android 5.x—Tinting着色和Clipping裁剪

android 5.x中新添了2个属性可以操作图像，一个是Tinting，另一个是Clipping。

1、tinting

tinting有2个属性，分别是tint和tintMode。其中tint设置着的色调，tintMode设置着色的模式。只需在xml布局中定义tint和tingMode属性值。

下面展示不同tintMode展示的效果，

xml布局如下：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@android:color/holo_orange_dark" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@android:color/holo_orange_dark"
            android:tintMode="add" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@android:color/holo_orange_dark"
            android:tintMode="multiply" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@android:color/holo_orange_dark"
            android:tintMode="src_in" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@android:color/holo_orange_dark"
            android:tintMode="src_atop" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@android:color/holo_orange_dark"
            android:tintMode="src_over" />
    </LinearLayout>
</ScrollView>

2、clipping

clipping可以改变一个视图的外形，如果一个view设置的background，clipping并不能修改background形状。

使用clipping修改外形时，需要使用ViewOutlineProvider修改outline，然后再通过setOutlineProvider将outline设置回原来的视图。

在布局中添加个TextView控件，需要注意的是，必须设置elevation属性，否则看不到效果，

<TextView
    android:id="@+id/iv_circle"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:elevation="1dp"
    android:gravity="center"
    android:textColor="@color/holo_orange_dark"
    android:textSize="19sp" />

在java文件中的实现如下：

TextView iv_pandaCircle = (TextView)findViewById(R.id.iv_circle);
        ViewOutlineProvider viewOutlineProvider2 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setOval(0,0,view.getWidth(),view.getHeight());
            }
        };
        iv_pandaCircle.setOutlineProvider(viewOutlineProvider2);

结果显示如下，

下面显示另一张效果图，设置了background，仍然可以看到一点点圆角效果，大部分被background遮挡了，

设置的布局如下，

<TextView
    android:id="@+id/iv_panda_round_radius"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:background="@drawable/kungfu_panda"
    android:elevation="1dp" />

实现如下，

View iv_padanRoundRadius = findViewById(R.id.iv_panda_round_radius);
        ViewOutlineProvider viewOutlineProvider1 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {                outline.setRoundRect(0,0,view.getWidth(),view.getRight(),50);
            }
        };
        iv_padanRoundRadius.setOutlineProvider(viewOutlineProvider1);