MaterialDesign(一)

MaterialDesign主题

api21后有三种默认的主题可以设置

@android:style/Theme.Material.Dark
@android:style/Theme.Material.Light
@android:style/Theme.Material.Light.DarkActionBar

在style.xml中修改主题
<resources>
<style name="AppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

通过自定义Style来创建自己的颜色主题

colorPrimary
colorPrimaryDark
colorAccent
colorPrimaryDark 是状态栏底色
colorPrimary 如果你不手动自己去修改toolbar背景色的话，它就是默认的toolbar背景色
colorAccent 各控制元件(比如：checkbox、switch 或是 radio) 被勾选 (checked) 或是选定 (selected) 的颜色
navigationBarColor 导航栏的背景色，但只能用在 API Level 21 以上的版本，也就是5.0以上才可以
windowBackground App 的背景色
colorControlNormal 这个也只能在API21以上才能用各控制元件的预设颜色和colorAccent正好对应

<resources>
<!--继承于Theme.Material-->
<style name="AppTheme" parent="@android:style/Theme.Material">
     <!--在这里对各个颜色进行自定义-->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

Palette取色器

实现动态适应当前页面的色调,做到整个app基调和谐统一.
使用Palette的API,能够让我们从Bitmap中获取对应的色调,修改当前的主题色调.

android内置了几种色调的种类
Vibrant(充满活力的)
Vibrant dark(活力黑)
Vibrant light(活力亮)
Muted(柔和的)
Muted dark(柔和黑)
Muted light(柔和亮)

使用方法

使用该API需要添加依赖
Module Setting>>Dependcies选项卡>>添加com.android.support:palette-v7:21.0.2引用

    点击右上角的+号
    选中lib
    在弹出的窗中搜索support:palette
    点击确定后同步即可

更建议:

在Gradle中配置远程仓库,因为本地不一定有适合你的版本的支持包
compile 'com.android.support:palette-v7:21.0.+' 

代码Demo

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //创建需要一个bmp对象,通常选中activity的背景作为取色对象
    Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.xiaomai);
    //创建Pattle对象
    Palette.generateAsync(bmp, new Palette.PaletteAsyncListener() {
        @Override
        public void onGenerated(Palette palette) {
            //获取相应的色调
            Palette.Swatch mutedDark = palette.getDarkVibrantSwatch();
            Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
            Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();
            //注意返回的对象有可能为空,记得加非空判断
            if (lightVibrantSwatch!=null){
                //设置给相应的组件>>actionbar
                getActionBar().setBackgroundDrawable(new ColorDrawable(lightVibrantSwatch.getRgb()));
                //设置给相应的组件>>window
                getWindow().setStatusBarColor(lightVibrantSwatch.getRgb());
            }
        }
    });
}
}

视图和阴影

Android 5.0后,Google为控件添加了新的属性 Z轴,也就是垂直的高度变化;

View的Z轴由两个部分组成:
Z=elevation-translationZ

可以在Xml文件中设置高度

    <TextView
    android:elevation="100dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"/>

也可以动态设置控件的高度

tv.setTranslationZ(100);

需求:实现点击效果

        if (flag){
        tv.setTranslationZ(100);
        flag=false;
    }else{
        tv.setTranslationZ(0);
        flag=true;
    }

Tinting(着色)和裁剪(Clipping)

Tinting的使用方法非常简单

   //在iv中设置tint(颜色)和tintmode(着色模式即可)
   <ImageView
    android:tint="@color/colorAccent"
    android:tintMode="screen"
    android:src="@mipmap/ic_launcher"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Clipping的使用方法也很简单

    View iv = findViewById(R.id.iv);
    //创建需要的轮廓
    ViewOutlineProvider outline = new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            //修改轮廓为特定形状
            //这里修改为圆角矩形,五个参数分别为左上右下 和圆角半径
            outline.setRoundRect(0,0,view.getRight(),view.getHeight(),30);
        }
    };
    //调用view.setOutlineProvider()设置轮廓,设置到这一步后,Z轴的阴影效果将为设置的轮廓
    iv.setOutlineProvider(outline);
    //设置显示效果和阴影效果相同,设置了后才能真正改变显示的样式
    iv.setClipToOutline(true);