Material Design 学习——阴影、轮廓、裁剪、着色

(Updated: )
,

1 阴影

Android5.0 上实现阴影很简单，只需两点

  • Z 轴上的高度
  • 背景/轮廓

效果图


2 Z 轴

2.1 Z 轴是 Andorid5.0 中新引入的一个概念

  • elevation表示控件的高
  • translationZ表示控件在 Z 轴山的偏移量
  • 控件在 Z 轴上的实际高度是elevation + translationZ

2.2 实例：

style：dp

android:elevation="50dp"
android:translationZ="20dp"

code：px

view.setElevation(50);
view.setTranslationZ(20);

3 轮廓

实例：为按钮设置一个圆形轮廓，代码实际上设置了一个圆角矩形的轮廓，不过把圆角的半径设置为了边长的一半，所以实际效果是个圆

imageView.setOutlineProvider(new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        int shapeSize = 120;//px
        outline.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);
    }
});

效果图如下，仔细看可以发现，阴影已经变成圆形了，在计算阴影时，轮廓优先于背景


4 裁剪

可以将 View 按其轮廓裁剪，只需在设置轮廓后再添加一行代码

button.setClipToOutline(true);

效果图


5 着色

tint 是 Android5.0 中引入的一个新概念，用于将 View 着色，拿 ImageView 举例，分别为 src 与 background 着色：
style：

code：

imageView.setImageTintList(ColorStateList.valueOf(Color.RED));
imageView.setBackgroundTintList(ColorStateList.valueOf(Color.BLUE));

效果图