Android Designサポートパッケージコントロールの紹介
9486 ワード
Android5.0は史上最も重要なアンドロイドバージョンの一つであり、その多くはmaterial designの導入によるものであり、この新しい設計言語はアンドロイド全体のユーザー体験を一新した.歌の公式発表Material Designのコンセプトはすでにしばらくの間、Material Designのデザイン効果をより便利に実現するために、Android support design libraryサポートライブラリを提供し、開発者に材料設計の効果をより容易に実現させた.この文章では、よく使われるいくつかのコントロールを紹介します.
1、CoordinatorLayout
新しい考え方でスケジューリングサブレイアウトの形式を調整することによってタッチがレイアウトに影響する形式を実現し、アニメーション効果を生み出す.framlayoutから継承されたframlayoutの拡張クラスで、彼よりも機能が強く、多くの絢爛たる効果をサポートすることができ、一般的に親としてレイアウトされています.
2、CollapsingToolbarLayout
Toolbarを再包装するためのViewGroupは、主に折りたたみ、伸縮を実現するためのApp Bar効果です.AppBarLayoutレイアウトに配置する必要があります.AppBarLayoutの直接サブViewとして、主に折り畳み可能なToolbarコンテナを提供し、コンテナ内の異なるViewに対してlayout_を設定します.collapseMode折りたたみモードで、異なる折りたたみ効果を達成します.AppBarLayoutのサブレイアウトとして組み合わせて使用します.通常、2つのサブコントロールがあります.1つはImageViewで、1つはToobarで、Toobarは主にActionBarを置き換えるために使用されるので、使用する前にまず隠します.コードで非表示にすることも、プロファイルで非表示にすることもできます.また、インベントリファイルで非表示にすることもできます.
(1)私たちのスタイルではxmlファイルのAppThemeタグには、次の2行が追加されています.
falsetrue
(2)インベントリファイルへの追加
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
関連プロパティは次のように設定されています.
app:contentScrim="@android:color/holo_blue_dark";//titebarの背景色app:title=「趙麗穎」//titlebarに表示されるフォントapp:scrimAnimationDuration="50";このアトリビュートは、toolbarが収縮したときにカラーが変化するアニメーションの持続時間を制御します.つまり、contentScrimで指定した色になってアニメーションを行うのに要する時間です.app:expandedTitleGravity="bottom|right";//titebar展開後のフォント表示位置app:collapsedTitleGravity="center_horizontal";//titlebarから一番上までの表示位置app:titleEnabled="true";//タイトルテキストappを表示するかどうか:expandedTitleMargin="20 dp";//展開後のテキストmarginandroid:fitsSystemWindows=「true」//空間を残しておくことで、浸透状態バー効果を実現できますapp:layout_collapseParallaxMultiplier="0.7";//視差の係数を0.0～1.0に設定します.視差が大きいほど
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar";//テーマカラーapp:layout_scrollFlags="scroll|exitUntilCollapsed";//スライド収縮効果をサポート
サブクラス縮小可能なView:app:layout_collapseMode="parallax";//Viewはコントロールのスライドによって縮小
Toolbar:app:layout_collapseMode="pin";//pin収縮後最先端に固定し、parallaxはコントロールのスライド収縮に伴って収縮する
3、AppBarLayout
AppBarLayoutは主にヘッドレイアウトを設定するために使用され、linearlayoutから継承されています.彼はCollapsingToolbarLayoutサブレイアウトとその他のレイアウトを含んでいます.CollapsingToolbarLayoutは視差伸縮スライド効果を実現することができます.他のサブレイアウトは一般的にTabLayoutなどのナビゲーションバーです.
4、TabLayout
TabLayout:viewpagerindicator,radiobutton+viewpagerに類似し、リーフラベルのスライド効果を実現http://blog.csdn.net/yoonerloop/article/details/70766002クリックしてリンクを開く
5、CardView
CardViewはアンドロイド5.0で提案されたカード式コントロールです.
app:cardBackgroundColor="#6699FF";//タブの背景を設定app:cardCornerRadius="7 dp";//タブのフィレットサイズの設定app:cardElevation="7 dp";//タブのシャドウバックグラウンドサイズを設定app:cardMaxElevation="10 dp"//z軸の最大高さ値を設定app:cardUseCompatPadding="true"//互換性android 5.0以上のバージョンの2つのカード間の距離失効問題android:clickable=「true」//水波紋効果を生成するpadding設定:app:contentPadding設定内容のpaddingapp:contentPaddingLeft設定内容の左paddingapp:contentPaddingTop設定内容の上paddingapp:contentPaddingRight設定内容の右paddingapp:contentPaddingBottom設定内容の下padding
6、FloatingActionButton
android:layout_gravity="end|bottom";//レイアウト上の表示位置app:borderWidth="0 dp";//ボタン内ボーダーシャドウボーダーサイズapp:backgroundTint="#f 00";//ボタン画像周辺色app:elevation=「6 dp」//ボタン外枠シャドーのサイズapp:pressedTranslationZ="52 dp";クリックするとシャドウ拡散の効果app:rippleColor="#33728 dff";//ボタンボーダーシャドウの色は、デフォルトではthemeのcolorControlHighlightです.android:clickable="true";//クリックすると波紋効果が発生します
7、NestedScrollView
ScrollViewと同様に、listviewやrecycleViewと同様に、新しいコントロールにいくつかの互換性があります.
8、NavigationView
NavitationViewはDrawerLayoutサイドバーのメニューです.このメニューは全体的に2つの部分に分かれており、上の部分はHeaderLayoutと呼ばれ、下のクリック項目はmenuです.HeaderLayoutはレイアウトで、必要に応じて設定され、menuは主に各itemです.
android:layout_gravity=「left」プロパティは、ビューが左側のスライドアウトメニューであることを示します.
app:headerLayout="@layout/header_layout";//ヘッダレイアウトファイルを参照することを示します.
app:menu="@menu/main";//次のクリック項目itemとしてmenuを参照することを表す.
app:itemIconTint="@color/blue";//画像に色を設定します.デフォルトはグレーです.
navigationView.setItemIconTintList(null);//画像の色を画像表示のデフォルトの色に設定
app:theme="@style/MenuTextStyle";//itemフォントサイズ、背景色などのトピックの設定
menu設定:
android:id="@+id/file"android:icon="@mipmap/ic_launcher"android:title="設定"/>
android:icon="@mipmap/ic_launcher";//itemの左アイコンの設定
android:title=「設定」;//itemの右側のテキストを設定
デフォルトでは分割線はない、分割線が必要な場合はitem外層に1つネストしidを付ける必要がある.
View headerView = navigationView.getHeaderView(0);//ヘッダレイアウトの最初のコントロールを取得
//itemクリックイベントの設定
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){@Override public boolean onNavigationItemSelected(MenuItem item){//ここでitemのクリックイベントreturn trueを処理する. } });
9、BottomNavigationView
BottomNavigationViewはGoogleが発売した下部ナビゲーションバーコンポーネントで、これらの下部ナビゲーションコンポーネントがない前に、開発者が多く使っていたのはRadioGroupで、彼の使い方は上のNavitationViewと似ていて、彼の属性を見てみましょう.
app:itemIconTintは、下部ナビゲーションボタンアイコンの色を設定するプロパティです.
app:itemTextColorは、下部ナビゲーションボタンの文字色を設定するプロパティです
xmlのレイアウトは次のとおりです.
menuフォルダも上のものと似ています.
Activityでのクリックイベントの切り替えのリスニングは以下の通りです.
注意:このコントロールには次の穴があります.
1、下部ナビゲーションバーの高さのデフォルトは56 dpです.2、メニュー要素は3~5個しかありません.個数が3個未満または5個以上の場合は、エラーが発生します.3、メニュー要素が3つより大きいと、切り替え時に選択したメニューの拡大効果が現れ、設定できず、反射でキャンセルするしかない.
4、下のナビゲーションバーの背景色のデフォルトは現在のスタイルの背景色(白/黒)で、app:itemBackground="@android:color/black"を使用して変更できます.
10、TextInputLayout
LinearLayoutから継承された新しいレイアウトです.hintとErrorを設定することでフローティングラベルを表示できるEditTextまたはそのサブクラスのコントロールしか含まれません.次のようになります.
android:hint="ほほほ";//フローティングラベルの設定は、EditTextの上に設定してもよいし、TextInに設定してもよい.putLayoutの上にありますが、1つしか設定できません.
app:hintEnable="false";//フローティングラベルを閉じる(デフォルトはオン)
app:hintAnimationEnabled="boolean";//フローティングラベルの表示と非表示の間の遷移アニメーションを設定します(デフォルトはオンです).
app:counterEnabled="true";
app:counterMaxLength="11";//2つの結合は、ユーザーが現在入力している長さを表示し、指定した長さを超えるとプロンプトされます.
app:passwordToggleEnabled="true"//パスワードが表示されるかどうかのアイコンを設定し、デフォルトでは閉じます
app:passwordToggleDrawable="@mipmap/ic_launcher";//パスワードの表示/非表示を指定するアイコンの設定
app:passwordToggleTint="@color/colorAccent";//アイコンに色を付ける
app:hintTextAppearance="@style/hint";//カスタムフローティングラベルの色サイズなど
app:errorTextAppearance="@style/error";//カスタムエラーラベルの色サイズなど
以上は、EditTextではなくTextInputLayoutラベルの下に追加しました.
仮想キーボードをリスニングし、次の入力方法でパスワード入力ボックスにカーソルを合わせます.
ユーザー名EditTextに次の項目を追加します.
android:imeActionId="@+id/password"
android:imeOptions="actionNext"
パスワードEditTextに追加:
android:imeActionId="@+id/button"
android:imeOptions="actionDone"
傍受:
mPasswordEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() { @Override public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) { if ( id == EditorInfo.IME_ACTION_DONE) { startLogin(); return true; } return false; } });
以上がmaterial designパッケージでよく使われるコントロールですが、後で続々と補足します.これらの新しいコントロールの応用については、次のブログを参照してください.クリックしてリンクを開きます.
http://blog.csdn.net/yoonerloop/article/details/71411499
1、CoordinatorLayout
新しい考え方でスケジューリングサブレイアウトの形式を調整することによってタッチがレイアウトに影響する形式を実現し、アニメーション効果を生み出す.framlayoutから継承されたframlayoutの拡張クラスで、彼よりも機能が強く、多くの絢爛たる効果をサポートすることができ、一般的に親としてレイアウトされています.
2、CollapsingToolbarLayout
Toolbarを再包装するためのViewGroupは、主に折りたたみ、伸縮を実現するためのApp Bar効果です.AppBarLayoutレイアウトに配置する必要があります.AppBarLayoutの直接サブViewとして、主に折り畳み可能なToolbarコンテナを提供し、コンテナ内の異なるViewに対してlayout_を設定します.collapseMode折りたたみモードで、異なる折りたたみ効果を達成します.AppBarLayoutのサブレイアウトとして組み合わせて使用します.通常、2つのサブコントロールがあります.1つはImageViewで、1つはToobarで、Toobarは主にActionBarを置き換えるために使用されるので、使用する前にまず隠します.コードで非表示にすることも、プロファイルで非表示にすることもできます.また、インベントリファイルで非表示にすることもできます.
(1)私たちのスタイルではxmlファイルのAppThemeタグには、次の2行が追加されています.
falsetrue
(2)インベントリファイルへの追加
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
関連プロパティは次のように設定されています.
app:contentScrim="@android:color/holo_blue_dark";//titebarの背景色app:title=「趙麗穎」//titlebarに表示されるフォントapp:scrimAnimationDuration="50";このアトリビュートは、toolbarが収縮したときにカラーが変化するアニメーションの持続時間を制御します.つまり、contentScrimで指定した色になってアニメーションを行うのに要する時間です.app:expandedTitleGravity="bottom|right";//titebar展開後のフォント表示位置app:collapsedTitleGravity="center_horizontal";//titlebarから一番上までの表示位置app:titleEnabled="true";//タイトルテキストappを表示するかどうか:expandedTitleMargin="20 dp";//展開後のテキストmarginandroid:fitsSystemWindows=「true」//空間を残しておくことで、浸透状態バー効果を実現できますapp:layout_collapseParallaxMultiplier="0.7";//視差の係数を0.0～1.0に設定します.視差が大きいほど
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar";//テーマカラーapp:layout_scrollFlags="scroll|exitUntilCollapsed";//スライド収縮効果をサポート
サブクラス縮小可能なView:app:layout_collapseMode="parallax";//Viewはコントロールのスライドによって縮小
Toolbar:app:layout_collapseMode="pin";//pin収縮後最先端に固定し、parallaxはコントロールのスライド収縮に伴って収縮する
3、AppBarLayout
AppBarLayoutは主にヘッドレイアウトを設定するために使用され、linearlayoutから継承されています.彼はCollapsingToolbarLayoutサブレイアウトとその他のレイアウトを含んでいます.CollapsingToolbarLayoutは視差伸縮スライド効果を実現することができます.他のサブレイアウトは一般的にTabLayoutなどのナビゲーションバーです.
4、TabLayout
TabLayout:viewpagerindicator,radiobutton+viewpagerに類似し、リーフラベルのスライド効果を実現http://blog.csdn.net/yoonerloop/article/details/70766002クリックしてリンクを開く
5、CardView
CardViewはアンドロイド5.0で提案されたカード式コントロールです.
app:cardBackgroundColor="#6699FF";//タブの背景を設定app:cardCornerRadius="7 dp";//タブのフィレットサイズの設定app:cardElevation="7 dp";//タブのシャドウバックグラウンドサイズを設定app:cardMaxElevation="10 dp"//z軸の最大高さ値を設定app:cardUseCompatPadding="true"//互換性android 5.0以上のバージョンの2つのカード間の距離失効問題android:clickable=「true」//水波紋効果を生成するpadding設定:app:contentPadding設定内容のpaddingapp:contentPaddingLeft設定内容の左paddingapp:contentPaddingTop設定内容の上paddingapp:contentPaddingRight設定内容の右paddingapp:contentPaddingBottom設定内容の下padding
6、FloatingActionButton
android:layout_gravity="end|bottom";//レイアウト上の表示位置app:borderWidth="0 dp";//ボタン内ボーダーシャドウボーダーサイズapp:backgroundTint="#f 00";//ボタン画像周辺色app:elevation=「6 dp」//ボタン外枠シャドーのサイズapp:pressedTranslationZ="52 dp";クリックするとシャドウ拡散の効果app:rippleColor="#33728 dff";//ボタンボーダーシャドウの色は、デフォルトではthemeのcolorControlHighlightです.android:clickable="true";//クリックすると波紋効果が発生します
7、NestedScrollView
ScrollViewと同様に、listviewやrecycleViewと同様に、新しいコントロールにいくつかの互換性があります.
8、NavigationView
NavitationViewはDrawerLayoutサイドバーのメニューです.このメニューは全体的に2つの部分に分かれており、上の部分はHeaderLayoutと呼ばれ、下のクリック項目はmenuです.HeaderLayoutはレイアウトで、必要に応じて設定され、menuは主に各itemです.
android:layout_gravity=「left」プロパティは、ビューが左側のスライドアウトメニューであることを示します.
app:headerLayout="@layout/header_layout";//ヘッダレイアウトファイルを参照することを示します.
app:menu="@menu/main";//次のクリック項目itemとしてmenuを参照することを表す.
app:itemIconTint="@color/blue";//画像に色を設定します.デフォルトはグレーです.
navigationView.setItemIconTintList(null);//画像の色を画像表示のデフォルトの色に設定
app:theme="@style/MenuTextStyle";//itemフォントサイズ、背景色などのトピックの設定
menu設定:
android:id="@+id/file"android:icon="@mipmap/ic_launcher"android:title="設定"/>
android:icon="@mipmap/ic_launcher";//itemの左アイコンの設定
android:title=「設定」;//itemの右側のテキストを設定
デフォルトでは分割線はない、分割線が必要な場合はitem外層に1つネストしidを付ける必要がある.
View headerView = navigationView.getHeaderView(0);//ヘッダレイアウトの最初のコントロールを取得
//itemクリックイベントの設定
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){@Override public boolean onNavigationItemSelected(MenuItem item){//ここでitemのクリックイベントreturn trueを処理する. } });
9、BottomNavigationView
BottomNavigationViewはGoogleが発売した下部ナビゲーションバーコンポーネントで、これらの下部ナビゲーションコンポーネントがない前に、開発者が多く使っていたのはRadioGroupで、彼の使い方は上のNavitationViewと似ていて、彼の属性を見てみましょう.
app:itemIconTintは、下部ナビゲーションボタンアイコンの色を設定するプロパティです.
app:itemTextColorは、下部ナビゲーションボタンの文字色を設定するプロパティです
xmlのレイアウトは次のとおりです.
menuフォルダも上のものと似ています.
Activityでのクリックイベントの切り替えのリスニングは以下の通りです.
mNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
mTextView.setText(item.getTitle().toString().toUpperCase());
return true;
}
});
}注意:このコントロールには次の穴があります.
1、下部ナビゲーションバーの高さのデフォルトは56 dpです.2、メニュー要素は3~5個しかありません.個数が3個未満または5個以上の場合は、エラーが発生します.3、メニュー要素が3つより大きいと、切り替え時に選択したメニューの拡大効果が現れ、設定できず、反射でキャンセルするしかない.
4、下のナビゲーションバーの背景色のデフォルトは現在のスタイルの背景色(白/黒)で、app:itemBackground="@android:color/black"を使用して変更できます.
10、TextInputLayout
LinearLayoutから継承された新しいレイアウトです.hintとErrorを設定することでフローティングラベルを表示できるEditTextまたはそのサブクラスのコントロールしか含まれません.次のようになります.
android:hint="ほほほ";//フローティングラベルの設定は、EditTextの上に設定してもよいし、TextInに設定してもよい.putLayoutの上にありますが、1つしか設定できません.
app:hintEnable="false";//フローティングラベルを閉じる(デフォルトはオン)
app:hintAnimationEnabled="boolean";//フローティングラベルの表示と非表示の間の遷移アニメーションを設定します(デフォルトはオンです).
app:counterEnabled="true";
app:counterMaxLength="11";//2つの結合は、ユーザーが現在入力している長さを表示し、指定した長さを超えるとプロンプトされます.
app:passwordToggleEnabled="true"//パスワードが表示されるかどうかのアイコンを設定し、デフォルトでは閉じます
app:passwordToggleDrawable="@mipmap/ic_launcher";//パスワードの表示/非表示を指定するアイコンの設定
app:passwordToggleTint="@color/colorAccent";//アイコンに色を付ける
app:hintTextAppearance="@style/hint";//カスタムフローティングラベルの色サイズなど
app:errorTextAppearance="@style/error";//カスタムエラーラベルの色サイズなど
以上は、EditTextではなくTextInputLayoutラベルの下に追加しました.
仮想キーボードをリスニングし、次の入力方法でパスワード入力ボックスにカーソルを合わせます.
ユーザー名EditTextに次の項目を追加します.
android:imeActionId="@+id/password"
android:imeOptions="actionNext"
パスワードEditTextに追加:
android:imeActionId="@+id/button"
android:imeOptions="actionDone"
傍受:
mPasswordEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() { @Override public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) { if ( id == EditorInfo.IME_ACTION_DONE) { startLogin(); return true; } return false; } });
以上がmaterial designパッケージでよく使われるコントロールですが、後で続々と補足します.これらの新しいコントロールの応用については、次のブログを参照してください.クリックしてリンクを開きます.
http://blog.csdn.net/yoonerloop/article/details/71411499