Android Metrail Design

Android Metrail Design

0.Theme

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--导航栏底色,RecyclerView滑动时光晕的颜色-->
<item name="colorPrimary">@color/accent_material_dark</item>
<!--状态栏底色-->
<item name="colorPrimaryDark">@color/accent_material_light</item>
<!--导航栏上的标题颜色-->
<item name="android:textColorPrimary">@android:color/black</item>
<!--Activity窗口的颜色-->
<item name="android:windowBackground">@color/white</item>
<!--按钮选中或者点击获得焦点后的颜色,TextInputLayout文字的颜色-->
<item name="colorAccent">@color/accent_material_light</item>
<!--和 colorAccent相反，正常状态下按钮的颜色,所有控价在没有获得焦点时的颜色-->
<item name="colorControlNormal">#ff0000</item>
<!--Button按钮正常状态颜色-->
<item name="colorButtonNormal">@color/accent_material_light</item>
<!--EditText 输入框中字体的颜色-->
<item name="editTextColor">@android:color/white</item>
</style>

1.TextInputLayout

XML文件

<android.support.design.widget.TextInputLayout
    android:id="@+id/md_textinputlayout"android:layout_width="match_parent"android:layout_height="wrap_content"><EditText
    android:id="@+id/md_edittext"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入文本"/></android.support.design.widget.TextInputLayout>

代码显示错误信息,文本颜色的需要使用Theme修改

TextInputLayout tily1=(TextInputLayout) findViewById(R.id.tily1);
tily1.setHint("新的Hint");
tily1.getEditText().addTextChangedListener(new TextWatcher()); 
//在监听之中进行如下设置可以显示错误信息
int num = 0;
if (((num = s.toString().length()) < 6) && num != 0) {textInputLayout.setErrorEnabled(true);textInputLayout.setError("长度不能小于6");
} else {textInputLayout.setErrorEnabled(false);
}

2.SnackBar

代码,没有使用链式编程因为可以改变背景颜色

Snackbar snackbar = Snackbar.make(view, "SnackBar测试", Snackbar.LENGTH_SHORT)//点击事件中按钮的颜色.setActionTextColor(Color.WHITE)//设置点击事件.setAction("SnackBar", new View.OnClickListener() {@Overridepublic void onClick(View v) {Log.i("chendong", "点击了action");}});
//修改背景颜色
snackbar.getView().setBackgroundColor(Color.GRAY);
snackbar.show();
}

3.FloatingActionButton

xml文件

<android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_launcher"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:layout_margin="10dp"android:onClick="ClickFloatButton"app:fabSize="normal"app:backgroundTint="#f00"app:elevation="5dp"/>

属性

//上面的文件使用相对布局，可以使用相对锚点的设置定位fab
app:layout_anchor="@id/md_recyclerview"//锚点，基于哪个控件定位
app:layout_anchorGravity="bottom|right|end"//相对锚点的位置
app:fabSize="normal"//控件大小，只支持两种大小，mini,normal
app:backgroundTint="#f00"//改变背景颜色，不设置好像是黑的还是跟随主题
app:elevation="5dp"//阴影

4.AppBarLayout

AppBarLayout本身是一个垂直的LinearLayout，被他包裹的控件将作为ActionBar展示

xml文件

<android.support.design.widget.AppBarLayout       android:layout_width="match_parent"            android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
      android:id="@+id/md_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:minHeight="?attr/actionBarSize"android:background="?attr/colorPrimary"android:layout_marginBottom="20dp">
</android.support.v7.widget.Toolbar>
<TextView
      android:layout_width="match_parent"android:layout_height="wrap_content"android:padding="10dp"android:text="这是appbarlayout测试"android:gravity="center_horizontal"android:textSize="20sp"
/>
</android.support.design.widget.AppBarLayout>

5.CoordinatorLayout

这个（Coordinator）单词的意思是协调器，它是协调控件之间动画效果的一个布局

xml文件

    <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.awesome.newfeatures.SecondActivity"><android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbar
    android:id="@+id/md_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:minHeight="50dp"android:background="?attr/colorPrimary"android:layout_marginBottom="20dp"   app:layout_scrollFlags="scroll|enterAlways"/><android.support.design.widget.TabLayout
    android:id="@+id/md_tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabGravity="fill"app:tabTextColor="#f00"app:tabIndicatorColor="#00f"app:tabMode="fixed"app:tabIndicatorHeight="2dp"/></android.support.design.widget.AppBarLayout><android.support.v7.widget.RecyclerView
    android:id="@+id/md_recyclerview"android:layout_width="match_parent"android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior"/><android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_launcher"app:backgroundTint="#00f"app:elevation="5dp"android:layout_margin="16dp"app:layout_anchor="@id/md_recyclerview"app:layout_anchorGravity="bottom|right|end"android:onClick="Click"/></android.support.design.widget.CoordinatorLayout>

解释一下

1.CoordinatorLayout需要作为根布局使用这是不对的，看见有个博客这么写，坑。

2.app:layout_behavior=”@string/appbar_scrolling_view_behavior”//在视图中可滑动的组件使用该属性标示，必须是RecyclerView或NestedScrollView

3.app:layout_scrollFlags=”scroll|enterAlways”//三种取值

scroll: this flag should be set for all views that want to scroll off the screen – for views that do not use this flag, they’ll remain pinned to the top of the screen
//所有需要滑动的视图需要定义该属性，不使用该属性的视图将会固定在屏幕顶端
enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
任意向下的操作会导致隐藏视图显示出来

enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting
这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

4.试验表明，开始使用后面两个属性并没起作用，后来发现需要固定toolbar高度才会起作用。

5.FloatingActionButton被包裹在CoordinatorLayout中时可以防止SnackBar跳出时遮挡Fab

6.CollapsingToolbarLayout

使用CollapsingToolbarLayout结合CoordinatorLayout实现可缩放的ActionBar,在使用CoordinatorLayout一直实现不了列表滑动到顶端才显示的效果，使用CollapsingToolbarLayout可以实现

    <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.awesome.newfeatures.SecondActivity">   //需要固定高度<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="160dp"><android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"android:layout_height="match_parent"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageView
    android:id="@+id/backdrop"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/ic_launcher"app:layout_collapseMode="parallax"/><android.support.v7.widget.Toolbar
    android:id="@+id/md_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"/></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView
    android:id="@+id/md_recyclerview"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_behavior="@string/appbar_scrolling_view_behavior"/>    <android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_launcher"app:backgroundTint="#00f"app:elevation="5dp"android:layout_margin="16dp"app:layout_anchor="@id/md_recyclerview"app:layout_anchorGravity="bottom|right|end"android:onClick="Click"/></android.support.design.widget.CoordinatorLayout>

需要设置的地方

1.AppBarLayout高度需要固定

2.CollapsingToolbarLayout设置app:layout_scrollFlags

23.1.0以后新增一个snap可以在拉动到底部时产生缩放效果
app:layout_scrollFlags=”scroll|enterAlways”
app:layout_scrollFlags=”scroll|enterAlwaysCollapsed”//不论ToolBar是否设置pin模式，将会全部滚出屏幕，任意下拉动画会使隐藏的视图显示出来
app:layout_scrollFlags=”scroll|exitUntilCollapsed”//设置为pin模式的固定在顶端，下拉到顶部才显示出隐藏视图
app:layout_collapseMode=”parallax”//需要固定的视图使用pin模式，需要滑动的视图使用parallax模式

一些属性

setTitle(CharSequence)//设置固定在顶端时显示的title
setContentScrim(Drawable)
app:contentScrim=”?attr/colorPrimary”//修改固定在顶端的背景颜色
setStatusBarScrim(Drawable)//状态栏背景，5.0以上有效
app:layout_collapseParallaxMultiplier=”0.6”//滑动的视觉差，产生的效果是提前将折叠的视图隐藏掉了
app:layout_collapseMode=”parallax|pin”//滑动模式，缩放或者固定
collapsingToolbarLayout.setTitle("title");//设置标题，将会自动进行缩放
//设置颜色后将会自动进行颜色过渡
collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);

7.DrawerLayout+NavigationView实现抽屉导航

xml文件

    <android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/md_DrawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:context=".MainActivity"><android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="160dp"><android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/md_CollapsingToolbarLayout"android:layout_width="match_parent"android:layout_height="match_parent"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageView
    android:id="@+id/backdrop"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/ic_launcher"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.3"/><android.support.v7.widget.Toolbar
    android:id="@+id/md_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"/></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><android.support.v7.widget.RecyclerView
    android:id="@+id/md_recyclerview"android:layout_width="match_parent"android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/><android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_launcher"app:backgroundTint="#00f"app:elevation="5dp"android:layout_margin="16dp"app:layout_anchor="@id/md_recyclerview"app:layout_anchorGravity="bottom|right|end"android:onClick="Click"/></android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView
    android:id="@+id/md_NavigationView"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/header"app:menu="@menu/drawer"/></android.support.v4.widget.DrawerLayout>

结合之前学的总结在一个布局中，首先DrawerLayout需要有两个子view，上面的一个代表content,下面的NavigationView代表菜单导航，当然你可以替换成自己的布局，用来做其他的事情。

几个属性

关于NavigationView中item的字体颜色和icon选中状态颜色是去当前主题theme中的
<--正常状态下字体颜色和icon颜色-->
<item name="android:textColorPrimary">@android:color/darker_gray</item>
<--选中状态icon的颜色和字体颜色-->
<item name="colorPrimary">@color/accent_material_light</item>
当然你可以通过如下方法或者属性来改变这一状态：
setItemBackgroundResource(int)
app:itemBackground`//给menu设置背景资源
setItemIconTintList(ColorStateList)
app:itemIconTint`//给menu的icon设置颜色，对应的属性
setItemTextColor(ColorStateList)
app:itemTextColor`//给menu的item设置字体颜色，对应的属性
app:headerLayout="@layout/header"//NavigationView的头部布局
app:menu="@menu/drawer"`//NavigationView的菜单文件

代码

mDrawerLayout = (DrawerLayout) findViewById(R.id.md_DrawerLayout);
//这个组件将会展示一个图标在左上角，它是一个DrawerListener的子类，使用它可以简单地创建一个抽屉的控制图标，v4包下的该组件可以设置导航图标，但是已经过时，这里使用v7包下的组件，但是没有了设置图标的参数，如果想自定义可以使用自定义的图标，在实现DrawerListener时做处理
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,  mDrawerLayout, toolbar, R.string.close, R.string.open);
//没有找到合适的方法修改图标，这个方法没有效果mDrawerToggle.setHomeAsUpIndicator(R.mipmap.ic_launcher);//初始化状态mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);//设置导航栏NavigationView的点击事件final NavigationView mNavigationView = (NavigationView) findViewById(R.id.md_NavigationView);mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(MenuItem menuItem) {//使用该方法可以选中Item，但是出现了一个问题，点击时有时会造成选中无法取消，试过一个解决办法是获得Menu的所有Item设置不选中可以解决这个问题。menuItem.setChecked(true);mDrawerLayout.closeDrawers();//关闭抽屉return true;}});

8.TabLayout

TabLayout是用来进行tab导航的，使用它可以很简单有很完美的结合ViewPager实现tab导航，主要显示的多个导航栏和下面的导航条，并且实现与ViewPager的联动。

代码(Xml文件)

 <android.support.design.widget.TabLayout
            android:id="@+id/fragment_discover_tably"android:layout_width="match_parent"android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>

TabLayout有几个自定义的属性

app:tabMode="fixed"
app:tabSelectedTextColor="#af00"
app:tabIndicatorHeight="3dp"
app:tabIndicatorColor="#af00"
app:tabMaxWidth="100dp"

app:tabMode="fixed|scrollable"属性有两个取值,fixed时，所有的tab会居中显示，是不可滑动的，scrollable时，所有的tab会靠左显示，当tab数量很多时，就会呈现滑动的效果，这对适配小屏幕手机至关重要。

app:tabSelectedTextColor="#af00",意思很明显是说tab被选中的颜色。

app:tabIndicatorHeight="3dp" app:tabIndicatorColor="#af00"，导航条的高度和颜色。

app:tabMaxWidth="100dp"，设置导航最大宽度。

xml文件就是这样，代码就更加简单了，实现与ViewPager的联动tabLy.setupWithViewPager(viewPager);，就可以了，但是需要注意的是写ViewPager时需要实现getTitle()方法，用来设置tab的标题。

app:tabGravity="fill|cneter"tab导航的位置，填充还是居中

app:tabBackground=""导航的背景色

手动选中一个tab,代码tabLayout.getTabAt(0).select();

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注