Android 5.X 新特性详解（一）MD主题、Palette、视图阴影、Tinting(着色)和Clipping(裁剪)

最新推荐文章于 2021-08-22 15:41:01 发布

提辖鲁

最新推荐文章于 2021-08-22 15:41:01 发布

阅读量1.2k

点赞数 2

分类专栏： Android MaterialDesign Android群英传笔记文章标签： android

本文链接：https://blog.csdn.net/lj402159806/article/details/78057955

版权

Android 同时被 3 个专栏收录

122 篇文章 7 订阅

订阅专栏

Android群英传笔记

25 篇文章 1 订阅

订阅专栏

MaterialDesign

8 篇文章 0 订阅

订阅专栏

Android 5.X系列使用新的MaterialDesign设计风格，这次的MaterialDesign设计将Android带到了一个全新的高度。

Material Design 主题

Material Design 现在有三种默认的主题可以设置，显示效果如下图所示：

这里写图片描述

@android:style/Theme.Material(dark version)
@android:style/Theme.Material.Light(light version)
@android:style/Theme.Material.Light.DarkActionBar

同时，Android 5.X 提出了Color Palette的概念，如下图所示，让开发者可以自己设定系统区域的颜色，是整个App的颜色风格和系统的颜色风格保持统一。

这里写图片描述

通过如下所示代码，可以通过使用自定义Style的方式来创建自己的Color Palette颜色主题，从而实现不同的颜色风格。

<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
      <!--Main theme colors-->
      <!--your app branding color for the app bar-->
      <item name="android:colorPrimary">#BEBEBE</item>
      <!--darker variant for the status bar and contextual app bars-->
      <item name="android:colorPrimaryDark">#FF5AEBFF</item>
      <!--theme UI controls like checkboxes and text fields-->
      <item name="android:navigationBarColor">#FFFF4130</item>
  </style>
</resources>

Palette

UI越来越成为Google的发展重心。这次的Android 5.X 创新的使用Palette来提取颜色，从而让主题能够动态适应当前页面的色调，做到整个App颜色基调和谐统一。

Android内置了几种提取色调的种类，如下所示：

Vibrant (充满活力的 palette.getVibrantSwatch()
Vibrant dark (充满活力的黑 palette.getDarkVibrantSwatch()
Vibrant light (充满活力的亮 palette.getLightVibrantSwatch()
Muted (柔和的 palette.getMutedSwatch()
Muted dark (柔和的黑 palette.getDarkMutedSwatch()
Muted light (柔和的亮 palette.getLightMutedSwatch()

使用Palette的API，能够让我们从Bitmap中获取对应的色调，修改当前的主题色调。

使用Palette首先需要在Android Studio 中引用相关的依赖，在项目列表中点击F4，然后在Module Setting的Dependencies选项卡中添加com.android.support:palette-v7:21.0.2引用，重新Sync项目即可。可以通过传递一个Bitmap对象给Palette，并调用它的Palette.generate()静态方法或者Palette.generateAsync()方法来创建一个Palette。接下来，就可以使用getter方法来检索相应的色调。

下面的例子演示了如何通过加载的图片的柔和色调来改变状态栏和Actionbar的色调，代码如下所示：

public class PaletteActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_palette);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.mipmap.palette);
        // 创建Palette对象
        Palette.Builder builder = Palette.from(bitmap);

        builder.generate(new Palette.PaletteAsyncListener() {
            @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
            @Override
            public void onGenerated(Palette palette) {
                // 通过Palette来获取对应的色调
                Palette.Swatch vibrant = palette.getVibrantSwatch();
                if (vibrant == null) {
                    //api23后需要加判断
                    for (Palette.Swatch swatch : palette.getSwatches()) {
                        vibrant = swatch;
                        break;
                    }
                }
                // 这样获取的颜色可以进行改变。
                int rbg = vibrant.getRgb();
                int color = changeColor(rbg);
                // 将颜色设置给相应的组件
                getActionBar().setBackgroundDrawable(
                        new ColorDrawable(rbg));
                Window window = getWindow();
                window.setStatusBarColor(color);
            }
        });
    }

    // 对获取到的RGB颜色进行修改。
    private int changeColor(int rgb) {
        int red = rgb >> 16 & 0xFF;
        int green = rgb >> 8 & 0xFF;
        int blue = rgb & 0xFF;
        red = (int) Math.floor(red * (1 - 0.2));
        green = (int) Math.floor(green * (1 - 0.2));
        blue = (int) Math.floor(blue * (1 - 0.2));
        return Color.rgb(red, green, blue);
    }

}

效果图如下所示：

这里写图片描述

视图与阴影

Material Design 的一个很重要的特点就是拟物扁平化。通过展现生活中的材质效果、恰当地使用阴影和光线，配合完美的动画效果，模拟出一个动感十足又美丽大胆的视觉效果。

以往的Android View通常具有两个属性——X和Y，而在Android 5.X 中，Google为其增加了一个新的属性——Z，对应垂直方向上的高度变化。

在Android 5.X 中，View的Z值由两部分组成，elevation和translationZ(它们都是Android 5.X 新引入的属性)。elevation是静态的成员，translationZ可以在代码中使用来实现动画效果，它们的关系如下所示：

Z = elevation + translationZ

通过在XML布局中使用如下所示代码来静态设置View的视图高度。

android:elevation="XXdp"

通过下面代码演示不同视图高度所显示效果不同：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@color/lighter_gray"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@color/lighter_gray"
        android:elevation="10dp"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@color/lighter_gray"
        android:elevation="20dp"/>

</LinearLayout>

显示效果如图：
这里写图片描述

在程序中可以使用如下代码来动态改变视图高度

view.setTranslationZ(XXX);

通常也会使用属性动画来为视图高度改变的时候增加一个动画效果，代码如下：

if (flag) {
    view.animate().translationZ(100);
    flag = false;
} else {
    view.animate().translationZ(0);
    flag = true;
}

Tinting 和 Clipping

Android 5.X 在对图像的操作上增加了更多的新功能，下面来看看两个操作图像的新功能：Tinting（着色）和Clipping（裁剪）。

Tinting（着色）

Tinting的使用非常简单，只要在XML中配置好tint和tintMode就可以了。在下面的代码中，设置了几种不同的tint和tintMode来演示Tinting效果，XML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">


    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply"/>

</LinearLayout>

效果如图：
这里写图片描述

Clipping（裁剪）

Clipping可以改变一个视图的外形，要使用Clipping，首先需要使用ViewOutlineProvider来修改outline，然后再通过setOutlineProvider将outline作用给视图。

在下面的例子中，将一个正方形的TextView通过Clipping裁剪成了一个圆角正方形和一个圆，XML代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
        android:id="@+id/tv_rect"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="1dp"
        android:layout_margin="5dp" />

    <ImageView
        android:id="@+id/tv_cicle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="1dp"
        android:layout_margin="5dp" />

</LinearLayout>

程序代码如下：

public class ClippingActivity extends Activity {

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_clipping);

        View view1 = findViewById(R.id.tv_rect);
        View view2 = findViewById(R.id.tv_cicle);

        //获取Outline
        ViewOutlineProvider viewOutlineProvider1 = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline为特定的形状
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);
            }
        };
        //获取Outline
        ViewOutlineProvider viewOutlineProvider2 = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline为特定的形状
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };

        //重新设置形状
        view1.setOutlineProvider(viewOutlineProvider1);
        view2.setOutlineProvider(viewOutlineProvider2);
    }

}