Material-Design
Material-Design
介绍Material design的相关控件在开发中使用
##概述 对于开发人员，Android21新增了许多新控件和新特性，这些控件和特性都是基于Material Design的设计理念的，这一篇就来讲讲Material Design给Android开发带来的变化。
##主题和布局 Material提供了下面三种主题
@android:style/Theme.Material (dark version)
@android:style/Theme.Material.Light (light version)
@android:style/Theme.Material.Light.DarkActionBar
使用Material的主题必须Api在21及以上；如果要适配21以下的设备，可以使用兼容包： Theme.AppCompat.Light Theme.AppCompat.Light.NoActionBar 继承Material主题时，可以通过下面的属性来自定义调色板:
设置StatusBar和系统NavigationBar的颜色
Andriod4.4 Holo主题
使用主题：继承主题Theme.Holo.Light.NoActionBar.TranslucentDecor ;不继承这个也可以，设置下面属性即可:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
设置 fitsSystemWindows 属性为true来进行布局调整
使用SystemTintBar开源库设置颜色（其实就是自己画个View上去）
Android5.0及以上
使用主题：继承主题Theme.Material.Light，且SDK >= 21
设置属性或者调用方法：
colorPrimaryDark、navigationBarColor
getWindow().setStatusBarColor(Color.RED);
getWindow().setNavigationBarColor(Color.RED);
使用兼容包 Theme.AppCompat.Light 和上面一样
Theme Individual Views 个人主题View
在layout的xml定义中，可以使用android:theme来指定该View所适用的主题，指定后，它将改变当前View及其子View的theme。
android:layout_width="match_parent" android:layout_height="wrap_content" android:text="个人主题" android:theme="@style/xxx" /> Ps: 搞清沉浸式状态栏和透明状态栏 ##视图和阴影 上一篇讲到阴影的产生是因为高度差，阴影的大小是由相对高度差决定的。 在以前UI只是二维时，View的位置参数有以下公式 X = Left + translationX Y = Top = translationY; Material新增的第三维度同样遵循这个公式 Z = elevation + translationZ 在初始化View的时候，elevation被复制，之后在Z轴上做属性动画，改变translationZ，两者之和是View的绝对高度。 ###设置Elevation 在layout.xml中设置 android:elevation="2dp" 在代码中设置 mButton.setElevation(4f); ###Palette取色器 这个类挺有意思，在Android的版本发展中，UI越来越成为Google的发展中心，这次的Android5.X创新的使用了Palette来提取颜色，从而让主题能够动态适应当前页面的色调，使得整个app的颜色基本和谐统一。 Android内置了几种提取颜色的种类： Vibrant（充满活力的） Vibrant dark（充满活力的黑） Vibrant light（充满活力的白） Muted(柔和的) Muted dark(柔和的黑) Muted light(柔和的白) 使用： gradle compile 'com.android.support:palette-v7:21.0.+' Api @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); etContentView(R.layout.activity_main); setPalette(); } private void setPalette() { Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher); //创建Palette对象 Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { //通过Palette来获取对应的色调 Palette.Swatch vibrant = palette.getDarkVibrantSwatch(); //将颜色设置给相应的组件 getSupportActionBar().setBackgroundDrawable(new ColorDrawable(vibrant.getRgb())); Window window = getWindow(); window.setStatusBarColor(vibrant.getRgb()); } }); } 3.效果 4.分析 生成Palette对象的方法有好多 Palette palette = Palette.from(bitmap).generate(); Palette palette = Palette.generate(bitmap); Palette palette = Palette.generate(bitmap, 24); 这几个都是同步的获取，如果bitmap很小可以这样使用，如果bitmap很大，就需要使用异步获取。 Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { } }); 然而最新版本都deprecated了，建议使用Builder来构建Palette，Builder方式也支持同步和异步两种方式。 同步： Palette palette = new Palette.Builder(bitmap).generate(); 异步： new Palette.Builder(bitmap).generate(new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { } }); Ps:重要的一点 上面有一个方法传了24，这个值代表的是取样的最大颜色数，默认是16，建议范围8-32. 数值越大，取样耗时越长，但是取样代表性越强，所以根据你的图片的大小和需求，自己确定数值的大小。 取样风格 Palette.Swatch vibrant = palette.getDarkVibrantSwatch(); Palette提供了6种取样风格: palette.getVibrantSwatch(); //充满活力的 palette.getDarkVibrantSwatch(); //充满活力的黑 palette.getLightVibrantSwatch(); //充满活力的白 palette.getMutedSwatch(); //柔和的 palette.getDarkMutedSwatch(); //柔和的黑 palette.getLightMutedSwatch(); //柔和的白 Ps：这里的黑、白是指深色系和浅色系 样本值 Demo里用到的vibrant.getRgb()是获取取样后的颜色RGB值 除了这个api，还有以下： getPopulation():Swatch所代表的取样样本的像素个数 getRgb():Swatch取样的颜色RGB getHsl():Swatch取样的颜色HLS getBodyTextColor():在此取样颜色上，显示Body文本的推荐色 getTitleTextColor():在此取样颜色上，显示Title文本的推荐色 Tinting着色器 先看一个例子，Tinting的使用非常的简单，只要在XML中配置好tint和tintMode就可以了，对于配置组合效果，只需要大家实际操作一下，就能非常清晰的理解处理效果。 android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/ic_launcher" /> android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/ic_launcher" android:tint="@android:color/holo_blue_bright" /> android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/ic_launcher" android:tint="@android:color/holo_blue_bright" android:tintMode="add" /> android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/ic_launcher" android:tint="@android:color/holo_blue_bright" android:tintMode="multiply" /> Ps:tint->着色颜色；tintMode->着色模式 所谓着色，就是在背景颜色上再画一层颜色，不同的着色模式，对两层颜色的处理不一样。 系统控件有很多用到了着色，比如EditText，在Material主题下，设置colorAccent，EditText在聚焦时会变成高亮色。 如果要用两张图片的方式就太浪费资源了，系统用的就是用TintManager为背景着色，着色模式是SRC_IN。 着色模式有以下几种： 文字解释： 1.PorterDuff.Mode.CLEAR:所绘制不会提交到画布上。 2.PorterDuff.Mode.SRC:显示上层绘制图片 3.PorterDuff.Mode.DST:显示下层绘制图片 4.PorterDuff.Mode.SRC_OVER:正常绘制显示，上下层绘制叠盖。 5.PorterDuff.Mode.DST_OVER:上下层都显示。下层居上显示。 6.PorterDuff.Mode.SRC_IN:取两层绘制交集。显示上层。 7.PorterDuff.Mode.DST_IN:取两层绘制交集。显示下层。 8.PorterDuff.Mode.SRC_OUT:取上层绘制非交集部分。 9.PorterDuff.Mode.DST_OUT:取下层绘制非交集部分。 10.PorterDuff.Mode.SRC_ATOP:取下层非交集部分与上层交集部分 11.PorterDuff.Mode.DST_ATOP:取上层非交集部分与下层交集部分 12.PorterDuff.Mode.XOR:异或：去除两图层交集部分 13.PorterDuff.Mode.DARKEN:取两图层全部区域，交集部分颜色加深 14.PorterDuff.Mode.LIGHTEN:取两图层全部，点亮交集部分颜色 15.PorterDuff.Mode.MULTIPLY:取两图层交集部分叠加后颜色 16.PorterDuff.Mode.SCREEN:取两图层全部区域，交集部分变为透明色 代码设置： Drawable drawable = ContextCompat.getDrawable(this,R.mipmap.ic_launcher); Drawable.ConstantState state = drawable.getConstantState(); Drawable drawable1 = DrawableCompat.wrap(state == null ? drawable : state.newDrawable()).mutate(); drawable1.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); DrawableCompat.setTint(drawable, ContextCompat.getColor(this, R.color.colorAccent)); //ivTint.setImageDrawable(drawable); ivTint.setImageDrawable(drawable1); 比如我现在要对一个自定义组件实现对Tint的支持，其实只用继承下，加一些代码就好了，代码如下（几乎通用）： public class AppCompatFlowLayout extends FlowLayout implements TintableBackgroundView { private static final int[] TINT_ATTRS = { android.R.attr.background }; private TintInfo mInternalBackgroundTint; private TintInfo mBackgroundTint; private TintManager mTintManager; public AppCompatFlowLayout(Context context) { this(context, null); } public AppCompatFlowLayout(Context context, AttributeSet attributeSet) { this(context, attributeSet, 0); } public AppCompatFlowLayout(Context context, AttributeSet attributeSet, int defStyle) { super(context, attributeSet, defStyle); if (TintManager.SHOULD_BE_USED) { TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attributeSet, TINT_ATTRS, defStyle, 0); if (a.hasValue(0)) { ColorStateList tint = a.getTintManager().getTintList(a.getResourceId(0, -1)); if (tint != null) { setInternalBackgroundTint(tint); } } mTintManager = a.getTintManager(); a.recycle(); } } private void applySupportBackgroundTint() { if (getBackground() != null) { if (mBackgroundTint != null) { TintManager.tintViewBackground(this, mBackgroundTint); } else if (mInternalBackgroundTint != null) { TintManager.tintViewBackground(this, mInternalBackgroundTint); } } } @Override protected void drawableStateChanged() { super.drawableStateChanged(); applySupportBackgroundTint(); } private void setInternalBackgroundTint(ColorStateList tint) { if (tint != null) { if (mInternalBackgroundTint == null) { mInternalBackgroundTint = new TintInfo(); } mInternalBackgroundTint.mTintList = tint; mInternalBackgroundTint.mHasTintList = true; } else { mInternalBackgroundTint = null; } applySupportBackgroundTint(); } @Override public void setSupportBackgroundTintList(ColorStateList tint) { if (mBackgroundTint == null) { mBackgroundTint = new TintInfo(); } mBackgroundTint.mTintList = tint; mBackgroundTint.mHasTintList = true; applySupportBackgroundTint(); } @Nullable @Override public ColorStateList getSupportBackgroundTintList() { return mBackgroundTint != null ? mBackgroundTint.mTintList : null; } @Override public void setSupportBackgroundTintMode(PorterDuff.Mode tintMode) { if (mBackgroundTint == null) { mBackgroundTint = new TintInfo(); } mBackgroundTint.mTintMode = tintMode; mBackgroundTint.mHasTintMode = true; applySupportBackgroundTint(); } @Nullable @Override public PorterDuff.Mode getSupportBackgroundTintMode() { return mBackgroundTint != null ? mBackgroundTint.mTintMode : null; } } outLine和Clipping裁剪 Clipping可以让我们改变一个视图的外形，要使用Clipping，首先需要使用ViewOutlineProvider来修改outline作用给视图 下面这个例子，将一个正方形的textview通过Clipping裁剪成一个圆角正方形和一个圆。 android:id="@+id/tv_rect" android:layout_width="100dp" android:layout_height="100dp" android:elevation="1dp" /> android:id="@+id/tv_circle" android:layout_width="100dp" android:layout_height="100dp" android:elevation="1dp" /> @Bind(R.id.tv_rect) TextView tv1; @Bind(R.id.tv_circle) TextView tv2; ViewOutlineProvider vlp1 = new ViewOutlineProvider() { @Override public void getOutline(View view, Outline outline) { outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30); } }; ViewOutlineProvider vlp2 = new ViewOutlineProvider() { @Override public void getOutline(View view, Outline outline) { outline.setOval(0, 0, view.getWidth(), view.getHeight()); } }; tv1.setOutlineProvider(vlp1); tv2.setOutlineProvider(vlp2); Ps:这个灰色边框是因为elevation>0而产生的阴影。 打开Outline.java文件，公开的方法并不算多 outline.canClip(); 是否支持裁剪，目前只有矩形、圆形、圆角矩形支持裁剪 outline.getAlpha(); 设置透明度outline.isEmpty(); 是否是空的。刚创建的时候是空的，调用了setEmpty后是空的。 outline.offset(0, 0); 设置x、y的偏移量 outline.setAlpha(1); 设置透明度 outline.setConvexPath(null); 设置用于构造一个outline的path outline.setEmpty(); 置空 outline.setOval(0, 0, 0, 0); 设置椭圆 outline.setOval(new Rect(0, 0, 0, 0)); 同上 outline.setRoundRect(0, 0, 0, 0, 10);设置圆角矩形 outline.setRoundRect(new Rect(0, 0, 0, 0), 10); 同上 以上都是在操作outline，有了outline就可以用它来裁剪View。 view.setClipToOutline(true) 还用以上面的例子来说： 一个TextView，设置背景颜色 android:layout_width="100dp" android:layout_height="100dp" android:background="#d0d0d0" android:text="OutLine" android:gravity="center" android:elevation="2dp"/> 设置一个outline tv.setOutlineProvider(outline); 你会发现并没有变化。 因为outline并没有应用到裁剪view的内容，需要调用tv.setClipToOutline(true) 这句话会用当前的outline裁剪view的内容，需要canClip返回true，之前提到，目前只有矩形、圆形、圆角矩形支持裁剪。 裁剪结果： Ps：关于outline、clipping、background、alpha Outline可以影响投影的轮廓，但如果setClipToOutline(false)，那它并不会裁剪view的内容，所以也不能改变background和forground的形状。 Outline只是用path描述的一种形状，本身并没有颜色，但是它却有alpha值，并且它的alpha值会影响阴影的透明度。 按照Material的原则，光照不透明的实体才会产生阴影，outline能影响阴影轮廓，却又没有改变view的实体形状，这就不好理解了。 setClipToOutline内部调用了native方法，没法知道具体的实现。 ##UI控件 Android5.0基于Material Design，提供了很多新控件，这些控件无论在功能、体验和性能上都很出色，下面一一列举各个控件的使用方法。 ###SnackBar### SnackBar通过在屏幕底部展示简洁的信息，为一个操作提供了一个轻量级的反馈，并且在Snackbar中还可以包含一个操作，在同一时间内，仅且只能显示一个 Snackbar，它的显示依赖于UI，不像Toast那样可以脱离应用显示。它的用法和Toast很相似，唯一不同的就是它的第一个参数不是传入Context而是传入它所依附的父视图，但是他比Toast更强大。 （Dialog > SnackBar > Toast） gradle compile 'com.android.support:design:23.1.1' 最简单的提示 Snackbar.make(view, "SnackBar Demo Text", Snackbar.LENGTH_LONG).show(); 设置一个Action,自带点击事件 Snackbar.make(view, "Change Text", Snackbar.LENGTH_LONG) .setAction("OK", new View.OnClickListener() { @Override public void onClick(View v) { tv.setText("New Text"); } }).show(); 设置背景颜色 Snackbar sb=Snackbar.make(view, "SnackBar demo", Snackbar.LENGTH_LONG); sb.setAction("OK", new onClickListener()()); sb.getView().setBackgroundColor(0xfff44336); sb.show(); 设置Action文字颜色 默认的Action文字颜色是ColorAccent，也可以通过api设置sb.setActionTextColor(); 其他API sb.dismiss();消失 sb.isShown();是否在显示 sb.isShownOrQueued();是否在显示或者在等待队列 sb.setText();设置文字 显示时长 LENGTH_LONG：长时间 LENGTH_SHORT：短时间 LENGTH_INDEFINITE：无限期，知道调用dismiss或者下一个SnackBar显示 注意1.SnackBar始终从底部弹出 SnackBar调用make时传进去一个View，它会顺着这个View去找父级，一直找到CoordinatorLayout或者FrameLayout，然后在它底部弹出。如果你的布局中没有包含这两个容器的一个，它就会一直找到Widnow的DecorView，效果就是在屏幕底部弹出。 看源码： do { if(view instanceof CoordinatorLayout) { ... } if(view instanceof FrameLayout) { ... } } while(view != null); 了解这特性有两个用处，解决异常Bug，实现特殊需求。 Demo: android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="30dp"> android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:borderWidth="0dp" app:fabSize="normal" /> 注意2.悬浮按钮被snackBar遮挡 android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="30dp"> android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:borderWidth="0dp" app:fabSize="normal" /> 这个问题一看很棘手，其实也很简单用一下Material design库里的CoordinatorLayout即可，Java代码完全不用动。 android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="30dp"> android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:borderWidth="0dp" app:fabSize="normal" /> 稍微总结下： 1.比toast更加好，毕竟snackbar 可以响应点击事件 2.比Dialog轻量，可以替换很多Dialog的场景 3.snackbar 同一时间有且只有一个在显示 4.snackbar 上不要有图标 5.snackbar上action 只能有一个 6.如果有悬浮按钮FloatingActionButton的话，snackbar 在弹出的时候不要覆盖这个button 7.了解为什么SnackBar是从底部弹出的 ###CardView### CardView曾经开始流行在Google+，后来越来越多的APP也引入了Card这样的布局方式，说到底，CardView也是一个容器布局，只是他提供了一种卡片的形式，Google所幸提供了一个CardView控件，方便大家使用这种布局，开发者可以设置大小和视图高度，圆角的角度等。 android:id="@+id/cardview" android:layout_width="match_parent" android:layout_height="80dp" android:layout_margin="16dp" android:clickable="true" android:foreground="?android:attr/selectableItemBackground" app:cardBackgroundColor="@color/colorAccent" app:cardCornerRadius="4dp" app:cardElevation="6dp"> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="TextView in CardView" android:textStyle="bold" android:textColor="@color/colorPrimaryDark" android:textSize="26sp" /> 其实不用CardView也能实现，但是CardView做了很好的封装，只需要设置几个属性，就可以实现很好的效果，并且也减少了drawable资源，而且即便你什么都不设置，它也会设置合适的默认值。 Ps: 在低版本中设置了 CardElevation 之后 CardView 会自动留出空间供阴影显示，而 Lollipop 之后则需要手动设置 Margin 边距来预留空间，导致我在设置 Margin 在 Android 5.x 机器上调试好后，在 Kitkat 机器调试时发现边距非常大，严重地浪费了屏幕控件。因此，我们需要自定义两个dimen作为CardView的Margin值。 /res/value /res/value-v21 android:layout_margin="@dimen/xxx_card_margin" android:foreground="?attr/selectableItemBackground" 这个属性会在 Lollipop 上自动加上 Ripple 效果，在旧版本则是一个变深/变亮的效果。 让点击效果更加贴近 Material Design，要实现这个效果不难，我们只需要借助Lollipop的一个新属性android:stateListAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="@dimen/touch_raise" android:valueType="floatType" /> android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType" /> android:stateListAnimator="@anim/touch_raise" ###Toolbar### Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比， Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如： 设置导航栏图标； 设置App的logo； 支持设置标题和子标题； 支持添加一个或多个的自定义控件； 支持Action Menu； 使用 前面提到 Toolbar 是在 Android 5.0 才开始加上的，Google 为了将这一设计向下兼容，自然也少不了要推出兼容版的 Toolbar 。为此，我们需要在工程中引入 appcompat-v7 的兼容包，使用 android.support.v7.widget.Toolbar 进行开发。 MXL文件： android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da"> android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> MENU文件： Activity: public class ToolBarActivity extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tool_bar); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标 toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo toolbar.setTitle("Title");//设置主标题 toolbar.setSubtitle("Subtitle");//设置子标题 toolbar.setTitleTextColor(Color.rgb(250, 250, 250));//设置标题颜色 toolbar.setSubtitleTextColor(Color.rgb(250, 250, 250));//设置子标题颜色 toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { return true; } }); } } 设置更多Menu的icon： 设置返回menu的icon toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); 通过着色改变颜色 Drawabledrawable=getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);drawable.setColorFilter(Color.RED,PorterDuff.Mode.SRC_IN);toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); 精卫填坑 坑1：在XML中设置Toolbar属性不生效 android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" android:logo="@mipmap/ic_launcher" android:navigationIcon="@mipmap/ic_drawer_home" android:subtitle="456" android:title="123"> 解决方法：在根布局中加入自定义属性的命名空间 xmlns:toolbar="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" toolbar:navigationIcon="@mipmap/ic_drawer_home" toolbar:logo="@mipmap/ic_launcher" toolbar:subtitle="456" toolbar:title="123"> 为什么会出现这种问题呢？我猜测是因为这个控件是兼容版的控件，用 android:xxx 设置无效是的这些属性是在兼容包中，不在默认的Android SDK中，所以我们需要额外的引入。至于为什么IDE不报错，估计就是bug了吧！ 坑2：menu字体颜色不能改变 在style中设置： 坑3：ActionMode不能悬浮 解决方法：在style中设置悬浮 坑4：自定义的View位于 title 、 subtitle 和 actionmenu 之间，这意味着，如果 title 和 subtitle 都在，且 actionmenu选项 太多的时候，留给自定义View的空间就越小 坑5：必须设置为没有ActionBar 使用Toolbar必须要求当前Activity没有ActionBar，方法有两种。 ###TabLayout### 我们在使用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的滑动效果。但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足需求，在2015年的google大会上，新的Android Support Design库就包含了TabLayout，它可以实现TabPageIndicator的效果，而且兼容性非常好，最低可以兼容到2.2，32个赞不能再少了。 XML代码 android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/titleBlue" app:tabIndicatorColor="@color/white" app:tabSelectedTextColor="@color/gray" app:tabTextColor="@color/white" /> android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> java代码 TabLayout tabLayout; tabLayout = (TabLayout)view.findViewById(R.id.tab_FindFragment_title); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.addTab(tabLayout.newTab().setText("Tab1")); tabLayout.addTab(tabLayout.newTab().setText("Tab2")); tabLayout.addTab(tabLayout.newTab().setText("Tab3")); tabLayout.addTab(tabLayout.newTab().setText("Tab4")); viewPager.stAdapter(adapter); tabLayout.setViewPager(viewPager); //tabLayout.setupWithViewPager(viewPager); 属性 tabLayout.setTabMode(TabLayout.MODE_FIXED); **MODE_FIXED：**固定模式，每一个Tab等宽，不管多少都显示全部。 MODE_SCROLLABLE：滚动模式，适合多Tab，长短不一 tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); **GRAVITY_CENTER：**居中显示 **GRAVITY_FILL：**充满整个宽度 setIcon： tab.setIcon(R.drawable.ic_1); 要icon横向显示，可以使用setCustomView tab.setCustomView(getCustomView(index)); 精卫填坑 tabLayout.setupWithViewPager(viewPager); 看源码，这个方法中调用了setTabsFromPagerAdapter(adapter); public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) { removeAllTabs(); for (int i = 0, count = adapter.getCount(); i < count; i++) { addTab(newTab().setText(adapter.getPageTitle(i))); } } removeAllTabs()这个就是说把前面所有tablayout添加的view都删掉。也就是说在之前不管怎么处理view都被干掉。然后设置为PagerAdapter返回的title。 tabLayout.addTab(tab1); tabLayout.addTab(tab2); tabLayout.addTab(tab3); tabLayout.addTab(tab4); tabLayout.setupWithViewPager(viewPager); tabLayout.setupWithViewPager(viewPager); tabLayout.addTab(tab1); tabLayout.addTab(tab2); tabLayout.addTab(tab3); tabLayout.addTab(tab4); 通过Adapter返回title @Override public CharSequence getPageTitle(int position) { return “xxx”; } ###Notification### Notification作为一个时间触发性的交互提示接口，让我们获得消息的时候，在状态栏，锁屏界面显示相应的消息 Google在Android5.X中，又进一步的改进了通知栏，优化了Notification，在5.X设备上一个标准的通知是这样的，长按会显示消息的来源。 基本的Notification 顶部显示横条 折叠式Notification 下拉时显示扩展模式，高度变高 悬挂式Notification 在顶部悬浮显示，提示性更强 显示等级的Notification VISIBILITY_PUBLIC 只有在没有锁屏时会显示通知 VISIBILITY_PRIVATE 任何情况都会显示通知VISIBILITY_SECRET 在安全锁和没有锁屏的情况下显示通知 RecyclerView 这篇文章已经写的很好了，不需要再做任何总结了。 ##动画 ###触摸反馈### 触摸反馈是很有必要的，是对用于操作的反馈确认，通常就是颜色的改变，border的改变。 常规的做法是用两个drawable切换（图片或者xml），Material提供了一种更加优雅、更加符合Material风格的方式，就是水波纹效果ripple。 //波纹有边界 android:background="?android:attr/selectableItemBackground" //波纹无边界 android:background="?android:attr/selectableItemBackgroundBorderless" 自定义Ripple android:color="@android:color/holo_red_dark"> 揭露效果： android:id="@+id/rect" android:layout_width="200dp" android:layout_height="200dp" android:layout_marginTop="30dp" android:src="@mipmap/ic_launcher" /> rect = (ImageView) findViewById(R.id.rect); Animator animator2 = ViewAnimationUtils.createCircularReveal(rect, 0, 0, 0, (float) Math.hypot(rect.getWidth(), rect.getHeight())); animator2.setDuration(2000); animator2.start(); ###Activity过渡动画### Android的activity跳转动画只是很生硬的切换，即使通过 overridePendingTransition( int inId, int outId)这个方法来给Activity增加一些切换动画，效果也只是差强人意，而在Android5.X中，Google对动画效果进行了更深一步的诠释，为Activity的转场效果设计了更加丰富的动画效果 Android5.X提供了三种Transition类型 进入：一个进入的过渡动画决定Activity中的所有视图怎么进入屏幕 退出：一个退出的过渡动画决定Activity中的所有视图怎么退出屏幕 共享元素：一个共享元素过渡动画决定两个Activity之间的过渡，怎么共享他们的视图 进人和退出效果包括 explode(分解)一一从屏幕中间进或出,移动视图 slide(滑动)——从屏幕边缘进或出，移动视图 fade(淡出) 一一通过改变屏幕上视图的不透明度达到添加或者移除视图 共享元素包括 changeBounds——改变目标视图的布局边界 changeCliBounds——裁剪目标视图边界 changeTransfrom——改变目标视图的缩放比例和旋转角度 changeImageTransfrom——改变目标图片的大小和缩放比例 可以发现,在Android5.X上，动画效果的种类变得更加丰富了 首先来看看普通的三种Activity过渡动画， 要使用这些动画非常简单，例如从ActivityA转到ActivityB，只需要在ActivityA中将基本的startActivity(intent)方法改为如下代码即可 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle()); 而在AchvityB中，只需要设置下如下所示代码 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); 或者在样式文件中设置如下所示代码 那么接下来就可以设置进人/退出ActivityB的具体的动画效果了， 代码如下所示 getWindow().setEnterTransition(new Explode()); getWindow().setEnterTransition(new Slide()); getWindow().setEnterTransition(new Fade()); 要想在程序中使用共享元素的动画效果也很简单，首先需要在他的activity1布局中设置共享元素，增加元素代码`android:transitionName="XXX"` 同时在activity2中，也增加一个相应的共享元素属性，如果只要一个共享元素，那么在activity1中可以这样写 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, view, "share").toBundle()); ``` 使用的参数就是前面普通动画的基础上增加了共享的的view和前面取的名字，如果由多个共享元素，那么我们可以通过Pair.create()来创建多个共享元素。 ``` startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view,"share"),Pair.create(fab,"fab")).toBundle()); ``` View state changes Animation（视图状态改变动画） StaetListAnimator作为视图改变时的动画效果，通常会使用Seletor来进行设置，但是以前我们设置Seletor的时候，通常是修改他的背景来达到反馈的效果，但是再现在Android5.X中有更高端的方法，可以使用动画来实现。 android:duration="2000" android:property="rotationX" android:valueTo="360" android:valuyeType="floatType" /> android:duration="2000" android:property="rotationX" android:valueTo="0" android:valuyeType="floatType" /> android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/animatorstate" /> 曲线运动 Material design中的动画依靠曲线，这个曲线适用于时间插值器和控件运动模式。 PathInterpolator类是一个基于贝塞尔曲线(Bézier curve)或路径(Path)对象上的新的插值器。 在materialdesign规范中，系统提供了三个基本的曲线： @interpolator/fast_out_linear_in.xml @interpolator/fast_out_slow_in.xml @interpolator/linear_out_slow_in.xml 你可以传递一个PathInterpolator对象给Animator.setInterpolator()方法。 ObjectAnimator类有了新的构造方法，使你能够一次能同时使用两个或多个属性去绘制动画的路径。例如，下面的动画使用一个Path对象进行视图X和Y属性的动画绘制： ``` ObjectAnimator mAnimator; mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); ... mAnimator.start(); ```