Yandexレクチャー：高度なUI、パート1

2017年度モバイル開発スクールの講義をいくつか公開します。 この学校はYandexのMobilizationプロジェクトの一部です。 ここでは、昨年の「動員」に基づいて編集されたビデオコースを見つけることができます 。



講義「高度なUI」は、モバイルYandex.Mailチームの開発者であるDmitry Svirikhinによって行われました。 Dmitryは、Androidアプリケーションインターフェイスを開発する際に最も一般的な問題を解決する方法を説明します。

トピックに関する上記のすべてを要約しましょう。 テーマを使用して統一されたUI要素をスタイルする必要があります。トピック全体を最初から記述する必要はありません。システムテーマから継承し、このテーマの属性のサブセットを最初に設定できます。

-今月、Mobilization Schoolで勉強してきましたが、今月はUIを含む多くのことを学びました。 今日は、あなたがすでに学べることをいくつか明らかにし、また何か新しいことを伝えようとします。 面白いものになることを願っています。



私の講義は2つのパートで構成され、その中でまず何らかの問題を提起し、次にそれを解決する方法を探します。





今日調査する問題を見てみましょう。



最初に、アプリケーションのUIの不一致の問題と、この不一致を解決する方法を見ていきます。



第二に、Android開発のかなり大きな問題の1つは、キーボードとの相互作用です。 キーボードが画面に表示されたときの対処方法、キーボードとの併用方法。



第三に、カスタムビューを効果的に適用する方法を検討します。 講義の1つに既に合格しており、カスタムビューを作成する方法、これにどのような規則があるかを大まかに想像してください。 しかし、今日はこのトピックを少し開き、論理的に続けます。 また、可能な場合の状態の損失についても少し調べます。 もちろん、アクティビティを再作成するときに状態を失う可能性がある場合の動作方法も既に知っています。 バンドルにいくつかのものを保存し、それらを使用してアクティビティを再作成する必要があります。



それでも、問題が発生する場合がありますが、今日はこれらすべての問題を考慮に入れます。



また、UIのインタラクティブ性の欠如の問題を検討し、UIをよりインタラクティブにし、ユーザーが行ういくつかのアクションに理解できるように応答する方法を確認します。



最初から始めましょう-矛盾について。



UIの不整合にはいくつかの種類があります。 まず、AndroidのさまざまなデバイスでUIに一貫性がない場合があります。 たとえば、異なるデバイスで同じビューが異なる場合があります。 Androidにはかなり多くのデバイスが搭載されていることはご存知のことと思います。そのため、Androidのバージョンごとに断片化がかなり進んでいます。 したがって、Android 4 UIでは一見、Android 5では別の見た目になります。 これにより、デバイス間でUIの不整合が発生します。



しかし、これはおそらく主な問題ではありません。アプリケーションのUIに不整合が生じる可能性があるためです。異なる画面で異なる色のツールバーを使用したり、ツールバーを使用した色と組み合わせることができない場合があります。画面の左にスクロールするナビゲーションドロワーで。 そして、この問題を解決しなければ、少なくともその解決策を大幅に簡素化する方法があります。



これらはテーマとスタイルです。





それから始めます。 そして、最初にトピックが何であるかを判断しましょう。



テーマは、AndroidのUI全体の一種のグローバル構成です。 テーマの属性には、たとえば、UI全体の構築に関連する何らかの種類のウィンドウログ、UIの構築にも使用するグローバルな色と画像、個々のビューとサブトピックのスタイル全体などが含まれます。たとえば、ダイアログの場合。



トピックには約300個の属性があり、さらに多くの属性がありますが、トピックを定義するとき、300個すべての属性を再定義する必要はありません。単にこれを行うべきではありません。 これを行うために、プラットフォームは、何らかの既成のシステムテーマから継承し、必要なものを再定義する必要があるような方法を提供します。



継承できるトピックを見てみましょう。



最初は、サポートライブラリの一部であるAppCompatライブラリを接続し、このライブラリで既に提供されているテーマのいくつかから独自のテーマを継承するのが最適です。 したがって、暗いUIを作成するにはTheme.AppCompatが必要で、明るいUIを作成するにはTheme.AppCompat.Lightが必要になる場合があります。 そして、これを実行した後-これらの事前定義されたトピックの1つから独自のテーマを継承します-さまざまなデバイスでのUIの不整合の問題はすでに解決されています。 4番目、5番目、およびそれ以降のAndroid UIのユーザーは同一ではないかもしれませんが、非常によく似ており、異なるデバイスでの不整合の問題はすでに解決されています。



そのため、何らかのシステムから継承した独自のテーマを作成しました。 次に何をする必要がありますか？





テーマ属性の特性は、すべての内部テーマとスタイルが何らかの形で互いに結びついていることです。最初に、属性のサブセット、いくつかの基本的な属性を定義する必要があります。 スライド上に表示されます。 それらのそれぞれに対処しましょう。



まず、windowBackground、スライド上で、指定された異なる背景でアプリケーションの外観がどのように変化するかを確認できます。 windowBackgroundは、アプリケーションのメインの背景を設定するだけで、windowBackgroundパラメーターに渡した色またはドロウアブルを、すべてのビューが描画されるウィンドウの背景として設定します。



colorPrimaryやcolorPrimaryDarkなどのオプションもあります。 それらの名前から、これらは非常に重要なパラメーターであると思われるかもしれませんが、実際に必要なのは、ツールバーとステータスバーにいくつかの色を設定することだけです。 アクションモードに切り替えると、同じツールバーで使用することもできます。 これらの属性を使用すると、ツールバーとコンテンツの間の区切りが色付けされます。



したがって、さらに興味深い属性であるcolorAccentに進みます。 名前が示すように、UIの重要な部分にユーザーを集中させるために必要です。 何だろう？ たとえば、FloatingActionButton、ユーザーが現在編集している編集テキスト、選択したチェックボックスなどです。



colorControlNormalは、非アクティブ状態のUI要素の色を決定します。 非アクティブな状態とは、たとえば、フォーカスのない編集テキスト、または選択されていないチェックボックスなどを意味します。



反対に、colorControlActivatedは、フォーカスされた編集テキストの色、選択されたチェックボックスなどを決定します。原則として、colorAccentに関連付けられているため、この属性を再定義する必要はありません。必要ではありませんが、それでも、彼について知ることは有用です。



colorControlHighlightは、ビューをタップしたときに強調表示する色を定義します。 実際、これはビューをタップしてしばらく待つと表示される波紋の色と同じです。



このような美しい効果を得るには、この色をアルファチャンネルに設定する必要があることに注意してください。



ボタンなど、スタイリングに必要な属性のリストもあります-これはcolorButtonNormalです。 ボタン、それらはガイドでまだ少し異なっているため、以前に検討したcolorControlNormal属性の影響を受けず、個別の属性を考え出しました。



また、たとえば、スイッチにも同様の属性があります。 したがって、colorControlNormalのような属性を設定するときに、何かがペイントされていなくても問題ではありません。おそらく、問題を解決するのに役立ついくつかの属性があります。



そして、パラメータについて、テキストについて少し話をします。



システムには、textColorPrimary（アプリケーションテキストのメインカラー）やtextColorHighlightなどのパラメーターがあり、テキスト選択のカラーを決定します。 一般に、テキストに関連付けられているパラメーターの数は非常に多く、特定のパラメーター（テキストの色属性）がシステムの多くのビューにどのように影響するかをすぐに推測できるとは限らないため、2つのオプションがあります。 textColorPrimaryパラメーターが機能しなかった場合は、必要なテキストの属性を経験的に決定するか、AppCompatライブラリにアクセスして、ビューが最終的にどの色に依存するかを確認できます。



テーマの色を設定し、同時にレイアウトのすべてのビューの背景が一般的にペイントされることが実際にどのように起こるかを考えてみましょう。 実際、これは次のように起こります。ここには魔法はありません。



最初は、システムには通常黒のビットマップが含まれているか、新しいAndroidではベクトルを使用して設定され、セレクターはこのビューの濃淡の形でそれにバインドされます。 たとえば、チェックボックスの場合、このようなセレクターはスライドに表示されるようにアタッチできます。これは、Checked状態ではビューの背景をcolorControlActivated属性で指定された色で着色する必要があることを示します。 したがって、ビュー（この場合はチェックボックス）がChecked属性を受け入れる場合、この色でペイントされます。 これは、colorControlActivatedの下に黄色を設定した場合のチェックボックスの外観です。





そして、属性について注意すべきもう1つの重要な点-レイアウトで直接参照できます。 階層内のレイアウトにトリプル効果を加えたいときにスライドに表示される最も一般的な方法を次に示します。 selectableItemBackgroundの背景を指定するだけで、このフレームレイアウトをタップすると、リップルが表示されます。 これはAndroid 5以降で使用され、Android 4ではタップするだけで背景が変更されます。



トピックに関する上記のすべてを要約しましょう。 テーマを使用して統一されたUI要素をスタイルする必要があります。テーマ全体を最初から記述する必要はありません。一部のシステムテーマから継承し、このテーマの属性の特定のサブセットを最初に設定できます。



次に、これで十分でない場合は、目的の結果を達成するために、いくつかの他の属性を個別に変更できます。 また、必要に応じて、レイアウトで属性を直接使用できます。



そこで、トピックの書き方を見つけました。 どこで使用できるか見てみましょう。 android：theme属性を使用して、アプリケーションとアクティビティのテーマをマニフェストで直接設定できます。 これらの各ケースをいつ使用できますか？ アプリケーションでは、たとえばライトテーマを設定できます。 現在では、すべてのアプリケーションが明るいテーマで表示されることがよくあります。 同時に、暗い色のギャラリーを作るのは非常にファッショナブルです。 したがって、メインテーマを設定してから、ギャラリーを表示するアクティビティで個別に設定し、たとえば暗いテーマを作成できます。



しかし、他の状況もあります。



ここにいくつかのレイアウトがあるので、デフォルトのテーマで見えます。 一般的に、すべてが悪いわけではありませんが、私たちはそれが好きではありません。 私たちまたは私たちのデザイナーは、少し異なるトピックを望んでいます-彼はツールバーをとても暗くしたいです。 アプリケーションの主要部分で明るいテーマを使用していることがわかりました-これは暗いテキストの明るい背景ですが、ツールバーは突然暗いテーマと明るいテキストになりました。



これを行うために、Androidはビューレベルでテーマを設定する機能を提供しました。 ビューレベルでトピックを設定するとどうなりますか？ ビューで設定したこのトピックで指定された属性は、それぞれ、このビューが表示されるアクティビティの主な属性をオーバーライドします。



このために、システムはいわゆるThemeOverlayも提供します。このテーマから独自のテーマを継承し、ビューに転送します。また、AppCompatライブラリを使用すると、使用可能なもののリストが既にあります。継承できます。 したがって、ThemeOverlay.AppCompat.Lightは、階層の一部を暗いテーマから明るいテーマに再定義し、ThemeOverlay.AppCompat.Dark-逆に明るいテーマから暗いテーマに再定義するように設計されています。 ActionBarおよびDarkActionBar用のオーバーレイもすでに用意されています。 前述の例では後者を使用する必要があります。



では、この状況を見てみましょう。 ビューレベルで設定したテーマとスタイルの違いは何ですか？ スタイルが何であるかを知っており、それらを複数回使用していると思います。この階層のビューBにいくつかのスタイルを定義するとしましょう。 その場合はどうなりますか？ このスタイル内にあるすべての属性は、ビューBのみに作用します。



ビューBのテーマを設定する場合、どうなりますか？ このトピックのすべてのグローバル属性は、Bだけでなく、そのすべての子（この場合はDとE）にも階層全体に影響します。 しかし、DとEに他の子がいた場合、トピックもそれらに拡張されます。



ビューBのスタイルとテーマの両方を設定するとどうなりますか？ 一般的にすべてが非常に明確です。 スタイルはこのビューBにも適用され、テーマはBとそのすべての子に拡張されます。



次に、ビューレベルで設定できるスタイルとテーマの違いを正式に決定します。 このスタイルは、このスタイルを定義する特定のビューにのみ適切な属性のサブセットを指定するように設計されています。 たとえば、スタイルにTextView、TextAppearance属性、またはBackgroundを設定すると、スタイルに含まれることがあります。 これはトピックの通常の例です。 一般的に、テーマはもともと同じビューの重複を排除できるように意図されていました。 ビューにテーマを設定する場合、このテーマを設定した階層全体の一部のグローバル属性を再定義するように設計する必要があります。



トピックには、前述のcolorControlNormalなどの属性が含まれる場合があります。



TextAppearanceと呼ばれる別のタイプのスタイルもあります。これは、テキストのみに関連付けられている多くの属性を定義するように設計されています。 色、サイズ、フォント、さらにはテキストの影のようになります。 そして、それらは主にEditTextやTextViewなどのビューに使用されますが、一般に、使用されるビューの特定のセットがまだあります。 主な特徴は、これらのスタイルを、TextAppearanceというフレーズが存在する名前の属性に転送する必要があることです。 覚えやすい。



ここでは、プラットフォームのAppCompatライブラリを使用して、このようなTextAppearanceを作成しています。 それらを使用できます。 これらのスタイルを使用してモックアップを提供するようにデザイナーに指示することもできます。



一般に、Androidのタイポグラフィのトピックは非常に広範囲です。 講義全体をそれらに費やすことができますが、おそらく、私はそれを独立した研究のために残すでしょう。 下部には、Androidのテキストに関するさまざまな詳細を読むことができるリンクがあり、開発に直接関連する次のトピックに進みます。



そして、スタイルについて最後に言いたかったのは、スタイルの明示的および暗黙的な継承です。 見てみましょう、いくつかのレイアウトがあります。 これは通常のログインフォームです。 したがって、電子メールとパスワードの入力フィールドがあります。 これらのフィールドは非常に似ているように見えますが、それでも、共通する部分とスタイルの違いがいくつかあります。 これらのスタイルの階層を構築してみましょう。





AuthFieldと呼ばれるスタイルを使用して一般的な部分を強調し、ログインとパスワードに対して個別に、馴染みのある方法で継承されるスタイルを作成します。 トピックも継承しました。 これは親属性を使用して行われ、一般に、すべてが明確でシンプルです。 しかし、それ以外のことはできます。 より視覚的にすることができます。より視覚的な方法で、スタイルの階層をたどることができます。





ポイントを介して共通部分を単純に分離し、この方法で共通部分から派生したスタイルを記述することができます。



独自の階層では、この方法はより視覚的で明白であるため、より受け入れられるように思われ、一般にこの方法を使用します。



スタイルとテーマについて、私は私が欲しかったすべてを言いました。 （Q＆Aセッションについては、ビデオを参照してください。-Ed。）



テキストフィールドについて説明しているので、テキストフィールドを取得する際の主な問題を把握します。 この問題はキーボードと呼ばれ、レイアウトの一部と重なる場合があります。



また、これはユーザーにとって必ずしも良いとは限りません。そのため、「キーボードとの対話」セクションで、キーボードに関連する一部のパーツを見てみましょう。



したがって、アプリケーションを開発しているある時点でキーボードのサイズを決定したい場合は、99％のケースでこれを行う必要はなく、単に行う必要はありません。 これは、たとえばチャットを開発している場合にのみ役立ちますが、他のすべての場合では必要ありません。 レイアウトのサイズ変更を監視し、これに応じて、キーボードが表示された後のサイズに画面上のすべてを調整する方がはるかに簡単です。



キーボードは別のアプリケーションであり、決して設定できないことを理解することも重要です。それは、実際にはそれだけであるため、キーボードは画面の3分の2を占めることができます。



そして、レイアウトのかなりの部分をカバーする場合、何をする必要がありますか？ このレイアウトをScrollViewに配置するだけで、キーボードが画面全体の2/3をカバーし、スクロールしてレイアウトの腸のどこかに必要なボタンを見つけると、ユーザーはそのような画像を見ることができます。





では、レイアウトの変更にどのように対応できますか？ この非自明な方法を使用して、OnLayoutChangeListener。 ビューが配置されているScrollViewまたは別のスクロール可能なコンテナーにサブスクライブする必要があります。サイズの変更に応じて、変更された場合は、利用可能な新しい高さに合わせて更新することができます。



何ができますか？ たとえば、ロゴを削除すると、すべてが表示されたままになります。または、ログインボタンをツールバーに移動することもできます。これもオプションです。 一般に、インデントを削除でき、多くのことができます。 すべてはあなたの想像力とあなたのデザイナーの想像力によってのみ制限されます。



キーボードとの相互作用に関連する別のポイント。 ユーザーが不要なアクションを強制しない限り、ユーザーはそれを気に入っています。 , e-mail (@) . - , , e-mail. いいね



. e-mail, , , . , «» . user «», , , . . , -, , Sign In, , Done, layout, . .



: inputType imeOptions. inputType , - . -. inputType Text Password, , , . , .



inputType - , , textEmailAddress, «» .



. , — , , , , .



imeOptions, , , . . , «», «», «», .



, inputType. textEmailAddress, «» — , e-mail.



inputType - . , - - .



inputType=”phone”, . , , — , , , . .





listener - , . Done. , . — .



Actiondone, , — .



, - . , Actionnext , . , , - , .



, . - , landscape, - . layout . fullscreen-, , - . , , , - , layout . . , , : « » ( e-mail), NoExtractUi imeOptions, Pipe, imeOptions , action . , .



, . layout, . .



-, UI- , , , , ScrollView. , , inputType imeOptions, XML, . , . ( . . — . .)



, , - , view.



, , - frame layout. view frame layout, .



- linear layout. view, .



- view. ?



view, , view , - , , - , view, . , . , . - , view.



-, view, , , . .



« custom view».



, view.



, — view - , . , , view , . , view. -, view - , - view . , , button . button - . .



三番目。 , view , Support Library, , - , , - .



view . - view, - : «, , - listener view, ». , , — view.



compound view. compound view? . Compound view compound components ( ). , view group .



? -, - layout, , , - -. . compound view, - linear layout, frame layout . . , performance . , - relative layout. , . , . view, view group, view .



, Android ́ view, , ConstraintLayout, CoordinatorLayout, FlexboxLayout ( , ). layout, , , - layout.



view. .



, , , Context , view .



, AttributeSet, , , view XML. LayoutInflater.



? , , , Button, , . , .



buttonStyle. これは何ですか？ , , , , view , .



? Android 5, . , , , .



-, , Button .



, , view . view - , - .





, , view. . , view , - . , , .





- obtainStyledAttributes, XML, XML. attrs, defStyleAttr defStyleRes — . styleable? XML, , declare-styleable , view . , obtainStyledAttributes .



TypedArray, , , , XML, - . TypedArray Recycle, TypedArray, view.





, , . , , , , 90% , . view, , , , . obtainStyledAttributes 0.



. - view, . , - , styleable.CustomView.



, . view , . , , , , - listener view. .



, view, , , , , .



, XML, view , .



view, view, layout, , .



, , , - , , . , , . , . , — . , . これに対処する方法は？ , , Bundle OnSaveInstanceState , , , .



, , -, , , , , - . , , , Bundle.



.



, state. , activity, , , , — activity , — - , activity, activity state. , , activity OnSaveInstanceState. , , - state , , , state .



state? activity, fragment, , , . view, - . view, , state.



?



, - EditText, , , . ViewPager, , Spinner RecyclerView. view .



? , view.



, , view , . , , , — , view, , , — , . , Bundle , .



, drawable. drawable Bundle Parcelable, Parcelable, , Android 700 , . , drawable, , .



drawable Glide Picasso. , drawable .



? , view , , activity - , , , . , , . .



, , , -, .



, . view, , . . view . , . RecyclerView, ListView. , .





? , , , , . , - — , — , - , , .



, , ProgressBar.



, view , . , . , , , .



- .



, , , OnSaveInstanceState - . , , , Fragment Manager, , layout, , Back Stack, . . Activity, Fragment Manager, . , , - , , . , . , , . これはどうですか？





, , onCreate, , , , activity , , , , , , - .



, ?





, , . . activity , - . , , , - . , , , .



, : Fragment Manager .



, , , , , DialogFragment. 他に何もありません。 , , , DialogFragment — , . .



. .



-, UI , .



-, layout, , layout, , , , .



第三に、賢明にカスタムビューを作成する必要があります。その前に、あなたは考える必要があります-私は同じ見解を持っていますか？または、新しいビューを使用して再利用できるように、このビューのXMLを修正できますか？



状態については-システムができることをする必要はありません。リストの状態を復元するために異なる松葉杖を書く必要はありません。必要なのは、状態の回復に関連する、おそらくあまり明白ではないルールを使用することだけです。



これで、最初の部分を終了したいと思います。ご清聴ありがとうございました。