Android 5.0におけるMaterial Designの新特性
5268 ワード
Material Design概要
Material DesignはGoogleの新しい設計言語で、Googleはこれによって各プラットフォームのユーザー体験を統一するように送りたいです。Material Designの特徴はきれいなレイアウトと簡単なレイアウトです。
Material Designはレイアウト、材質、配色、光学効果、間隔、文字サイズ、インタラクティブ方式、アニメーション軌跡に対して提案をして、設計者にMaterial Designのスタイルに合う応用を設計するように助けます。
Material Designデザイン言語は、活力あふれる鮮やかな色を使用することを奨励し、同じインターフェースで3つのトーンを使用することを提案し、強い色合いを保証します。強い色は一般的にビューの最下層にあります。例えば、ステータスバーやactionbarなどです。強い色調によって鮮やかなコントラストが形成され、内容の重要性が強調されやすくなります。文字の色の採値に対して、Material Designは明るい背景に黒を採用し、暗い背景に白を採用することを提案しています。重要な情報とタイトルは87%の透明度を採用し、二次文字は54%の透明度を採用し、二次的な説明文は26%の透明度を採用することができる。特に強調したい文字やクリックできる文字には、強い色調がおすすめです。階層別のビューは、陰影で強調できます。操作があり、かつ内容が強調されている領域に対しては、cardviewを用いて隔離することができ、内容があまり重要でない、または操作が単一の領域に対しては、分割線を用いて隔離することができる。
最近のプロジェクトでは、Material Designを使用して、下記のいくつかのよく使われているコントロールを整理して記憶します。
一、Snackbar
1.役割：Toastと似ていますが、傍受をクリックしてもいいです。
2.使用：
（1）Snackbarは静的な種類のmakeを呼び出して（）、三つのパラメータに入る：View親のコンポーネント、テキスト、表示時間；
（2）SnackbarはsetsActionを呼び出して、二つのパラメータが入ってきます。テキストをクリックして、傍受イベントをクリックしてOnClikListenerインターフェースを実現します。
（3）ショー（）と隠しディスマス（）を表示する；
二、TextInput Layout
1.作用：EditTextの外に小包を入れて、テキストをEditTextの上に提示することができます。同時にエラーメッセージを設定できます。
2.使用：
（1）TextInput LayoutオブジェクトがsetErrror Enbaleを呼び出し、ブーメランタイプのパラメータが入ってきて、エラー情報が表示されているかどうかを示す。
（2）TextInput LayoutオブジェクトがSetErr（）を呼び出し、エラー情報を設定する。
三、FloationgAction Button
1.役割：ページの上に浮遊するボタン。
2.特有の属性：
app:elevation=「5 dp」//シャドウ効果
app:presedTranslation Z="10 dp"//押すと効果が表示されます。
apple Color=「@カラー」
四、DrawerLayout
1.役割：レイアウトのサブレイアウトとして、左右両側の横滑り効果を実現し、メニューを追加する。
2.使用：(1)DraweLayoutをベースとして、内部には三つ及び三つ以下のレイアウトが含まれます。
（2）メニューとしてのレイアウト設定android：layout_gravity属性は、左側に「left」と表示され、右側に「Right」と表示されます。
（3）DrawerLayoutのレイアウトを動的に開くかまたは閉じる：
DraweLayoutオブジェクトがopenDrawerを呼び出し、Graviity.LeftまたはGravity.Rightの2つのパラメータ値が入ってきて、レイアウトを閉じます。
DrawerLayoutオブジェクトはcloseDrawerを呼び出し、2つのパラメータ値が入ってきて、レイアウトが閉じられます。
五、NavigationView
1.作用：ナビゲーションバーまたはメニューバーのMenuビューとして追加します。
2.使用：(1)静的属性：ap:header Layout追加ヘッドレイアウトファイル；
(2)静的属性：ap:menu追加メニューファイル；
（3）ヘッドビューのモニターを設定する：
（3−1）頭ビューを得る：NavigationViewオブジェクトがget HeaderViewを呼び出し、インデクス番号0に入る。
注意：もしget HeaderView（）がなかったら、findView ById（）を使ってヘッドビューを得ることができます。
（3-2）コントロールを探す：ファーストビューの呼び出しfindViewById（）はヘッドビューのコントロールを得る；
（3−3）リスニングイベントを設定する：得られたコントロールはset OnClikListenerを呼び出す（）；
（4）menuボタンのモニターを設定する：
NavigationViewオブジェクトは、set NavigationItem Selected Listenerを呼び出します。
NavigationView.OnNavigationView Intem Selected Listenerインターフェースに入りました。
ONavigationItem Selected()インターフェースを書き直します。
六、TabLayout
1.作用：ViewPagerと結合し、連動ナビゲーション効果を達成する。
2.静的属性：
1 app:tabIndicator Color=「@カラー/colorAccent」
2 app:tabIndicatoHeight=「5 dp」
3 app:tabSelected Text Color=「@カラー/colorAccent」
4 app:tabTextColor=「菗ffff」
3.ダイナミック使用：
（1）TabLayoutを宣言して実装し、ViewPager。
（2）Viewer Pagerコントロールのためのアダプターの設定；
（3）TablayoutとView Pagerとの連動を設定する：
（3−1）TabLayoutオブジェクトがsetupWithView Pager（）を呼び出して連動するViewer Pagerのオブジェクトに入る；
(3-2)カスタムViewer Pagerのアダプターに、getPageTitle()を書き換えて、現在のタイトルを返します。
（3−3）TabLayoutオブジェクトがsetTabMode（）を呼び出し、TabLayout.MODE_に入るSCROLLABLE定数は、TabLayoutのスクロールを設定します。
七、NestedScrrollView
1.役割：SrollViewの代替；
2.使用：SrollViewと同じで、内部にはサブコントロールしかない。
八、Toolbar
1.作用：
注意：Toolbarを使用する場合は、このActivityのテーマをNoアクションBar属性値に設定しなければなりません。
2.使用：ToolbarコントロールはAppBarLayoutコントロールに置かなければならないが、AppBarLayoutはCoordinatolayoutコントロール（共同配置）においたほうがいい。
3.静的属性：
1 app:layout_scrollFlags="scroll ga enterAlways"//Toolbarコントロールにおいて、スライド応答イベントを設定します。
2 app:title="//Toolbarにタイトル名を設定します。
3 app:layout_behavior=「@string/appbar_」scrolling_viewbehavior"//NestedScrrollViewコントロールでは、コントロールの挙動を設定します。
4.ダイナミック方法：
（4−1）Toolbarコントロールの例を宣言し、実行する。
（4−2）アクションバーをToolbarに設定する：現在のActivityでset Support Actionation Barを呼び出し、新たに作成されたToolbarオブジェクトに入る。
（4−3）現在のActivityテーマは、NoActivityモードに変更されました。リストファイルに現在のActivityタグの下の属性android：theme=「@style/Theme.AppComppat.NoActivit Bar」を設定します。
注意：現在のActivityテーマがNoアクションバーの時だけToolbarが表示されます。
九、CollappingToolbar
1.作用：Toolbarの折り畳み効果を実現する。
2.使用：
CollappingToolbarはAppBarLayoutに置かなければなりません。
ApBarLayoutは共同配置のCoordinasolayoutコントロールの中に置いたほうがいいです。
ToolbarはCollappingToolbarの折り畳みなしコントロールとして使用されます。
注意：CollappingToolbarコントロールの下に必ずあり、二つのコントロールしかありません。
3.静的属性：
Material DesignはGoogleの新しい設計言語で、Googleはこれによって各プラットフォームのユーザー体験を統一するように送りたいです。Material Designの特徴はきれいなレイアウトと簡単なレイアウトです。
Material Designはレイアウト、材質、配色、光学効果、間隔、文字サイズ、インタラクティブ方式、アニメーション軌跡に対して提案をして、設計者にMaterial Designのスタイルに合う応用を設計するように助けます。
Material Designデザイン言語は、活力あふれる鮮やかな色を使用することを奨励し、同じインターフェースで3つのトーンを使用することを提案し、強い色合いを保証します。強い色は一般的にビューの最下層にあります。例えば、ステータスバーやactionbarなどです。強い色調によって鮮やかなコントラストが形成され、内容の重要性が強調されやすくなります。文字の色の採値に対して、Material Designは明るい背景に黒を採用し、暗い背景に白を採用することを提案しています。重要な情報とタイトルは87%の透明度を採用し、二次文字は54%の透明度を採用し、二次的な説明文は26%の透明度を採用することができる。特に強調したい文字やクリックできる文字には、強い色調がおすすめです。階層別のビューは、陰影で強調できます。操作があり、かつ内容が強調されている領域に対しては、cardviewを用いて隔離することができ、内容があまり重要でない、または操作が単一の領域に対しては、分割線を用いて隔離することができる。
最近のプロジェクトでは、Material Designを使用して、下記のいくつかのよく使われているコントロールを整理して記憶します。
一、Snackbar
1.役割：Toastと似ていますが、傍受をクリックしてもいいです。
2.使用：
（1）Snackbarは静的な種類のmakeを呼び出して（）、三つのパラメータに入る：View親のコンポーネント、テキスト、表示時間；
（2）SnackbarはsetsActionを呼び出して、二つのパラメータが入ってきます。テキストをクリックして、傍受イベントをクリックしてOnClikListenerインターフェースを実現します。
（3）ショー（）と隠しディスマス（）を表示する；
二、TextInput Layout
1.作用：EditTextの外に小包を入れて、テキストをEditTextの上に提示することができます。同時にエラーメッセージを設定できます。
2.使用：
（1）TextInput LayoutオブジェクトがsetErrror Enbaleを呼び出し、ブーメランタイプのパラメータが入ってきて、エラー情報が表示されているかどうかを示す。
（2）TextInput LayoutオブジェクトがSetErr（）を呼び出し、エラー情報を設定する。
三、FloationgAction Button
1.役割：ページの上に浮遊するボタン。
2.特有の属性：
app:elevation=「5 dp」//シャドウ効果
app:presedTranslation Z="10 dp"//押すと効果が表示されます。
apple Color=「@カラー」
四、DrawerLayout
1.役割：レイアウトのサブレイアウトとして、左右両側の横滑り効果を実現し、メニューを追加する。
2.使用：(1)DraweLayoutをベースとして、内部には三つ及び三つ以下のレイアウトが含まれます。
（2）メニューとしてのレイアウト設定android：layout_gravity属性は、左側に「left」と表示され、右側に「Right」と表示されます。
（3）DrawerLayoutのレイアウトを動的に開くかまたは閉じる：
DraweLayoutオブジェクトがopenDrawerを呼び出し、Graviity.LeftまたはGravity.Rightの2つのパラメータ値が入ってきて、レイアウトを閉じます。
DrawerLayoutオブジェクトはcloseDrawerを呼び出し、2つのパラメータ値が入ってきて、レイアウトが閉じられます。
五、NavigationView
1.作用：ナビゲーションバーまたはメニューバーのMenuビューとして追加します。
2.使用：(1)静的属性：ap:header Layout追加ヘッドレイアウトファイル；
(2)静的属性：ap:menu追加メニューファイル；
（3）ヘッドビューのモニターを設定する：
（3−1）頭ビューを得る：NavigationViewオブジェクトがget HeaderViewを呼び出し、インデクス番号0に入る。
注意：もしget HeaderView（）がなかったら、findView ById（）を使ってヘッドビューを得ることができます。
（3-2）コントロールを探す：ファーストビューの呼び出しfindViewById（）はヘッドビューのコントロールを得る；
（3−3）リスニングイベントを設定する：得られたコントロールはset OnClikListenerを呼び出す（）；
（4）menuボタンのモニターを設定する：
NavigationViewオブジェクトは、set NavigationItem Selected Listenerを呼び出します。
NavigationView.OnNavigationView Intem Selected Listenerインターフェースに入りました。
ONavigationItem Selected()インターフェースを書き直します。
六、TabLayout
1.作用：ViewPagerと結合し、連動ナビゲーション効果を達成する。
2.静的属性：
1 app:tabIndicator Color=「@カラー/colorAccent」
2 app:tabIndicatoHeight=「5 dp」
3 app:tabSelected Text Color=「@カラー/colorAccent」
4 app:tabTextColor=「菗ffff」
3.ダイナミック使用：
（1）TabLayoutを宣言して実装し、ViewPager。
（2）Viewer Pagerコントロールのためのアダプターの設定；
（3）TablayoutとView Pagerとの連動を設定する：
（3−1）TabLayoutオブジェクトがsetupWithView Pager（）を呼び出して連動するViewer Pagerのオブジェクトに入る；
(3-2)カスタムViewer Pagerのアダプターに、getPageTitle()を書き換えて、現在のタイトルを返します。
（3−3）TabLayoutオブジェクトがsetTabMode（）を呼び出し、TabLayout.MODE_に入るSCROLLABLE定数は、TabLayoutのスクロールを設定します。
七、NestedScrrollView
1.役割：SrollViewの代替；
2.使用：SrollViewと同じで、内部にはサブコントロールしかない。
八、Toolbar
1.作用：
注意：Toolbarを使用する場合は、このActivityのテーマをNoアクションBar属性値に設定しなければなりません。
2.使用：ToolbarコントロールはAppBarLayoutコントロールに置かなければならないが、AppBarLayoutはCoordinatolayoutコントロール（共同配置）においたほうがいい。
3.静的属性：
1 app:layout_scrollFlags="scroll ga enterAlways"//Toolbarコントロールにおいて、スライド応答イベントを設定します。
2 app:title="//Toolbarにタイトル名を設定します。
3 app:layout_behavior=「@string/appbar_」scrolling_viewbehavior"//NestedScrrollViewコントロールでは、コントロールの挙動を設定します。
4.ダイナミック方法：
（4−1）Toolbarコントロールの例を宣言し、実行する。
（4−2）アクションバーをToolbarに設定する：現在のActivityでset Support Actionation Barを呼び出し、新たに作成されたToolbarオブジェクトに入る。
（4−3）現在のActivityテーマは、NoActivityモードに変更されました。リストファイルに現在のActivityタグの下の属性android：theme=「@style/Theme.AppComppat.NoActivit Bar」を設定します。
注意：現在のActivityテーマがNoアクションバーの時だけToolbarが表示されます。
九、CollappingToolbar
1.作用：Toolbarの折り畳み効果を実現する。
2.使用：
CollappingToolbarはAppBarLayoutに置かなければなりません。
ApBarLayoutは共同配置のCoordinasolayoutコントロールの中に置いたほうがいいです。
ToolbarはCollappingToolbarの折り畳みなしコントロールとして使用されます。
注意：CollappingToolbarコントロールの下に必ずあり、二つのコントロールしかありません。
3.静的属性：
app:title=” ” //
app:layout_scrollFlags="scroll|exitUntilCollapsed" //
app:expandedTitleGravity="right|bottom" //
app:expandedTitleMarginBottom="@dimen/activity_vertical_margin" //
app:expandedTitleMarginEnd="@dimen/activity_horizontal_margin" //
app:contentScrim="#00ff00" //
// ： ；
app:layout_collapseMode="parallax" // ；
app:layout_collapseMode="pin"： // ；
//（1）
collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);
//（2）
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.BLUE);