Material Design设计之Tinting(着色)和Clipping(裁剪)
Tinting(着色)
Tinting特点是可以给图片定义遮罩,让图片有你需要的着色效果。
使用的时候只需要在XML中配置tint和tintMode属性就可以了,给个效果提示如下:
代码如下:
<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.tinting_clipping_demo.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tinting Test!" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="原图" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:add" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="add" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:src_in" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="src_in" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:src_atop" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="src_atop" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:src_over" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="src_over" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:multiply" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="multiply" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:screen" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="screen" /> </RelativeLayout> </LinearLayout> </ScrollView>
Clipping(裁剪)
Clipping可以改变一个视图的外形。通过VIewOutlineProvider来修改outline,然后通过setOutlineProvider将outline作用给视图。
我们平常在给头像设置圆形时可以自定义圆形ImageView,有的设置shape设置圆角矩形。现在可以设置裁剪进行设置。
代码如下:
注意:正常来说clipping是不能裁剪视图背景的(比如ImageView),如果要一起裁剪背景需要设置 setClipToOutline(true);
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.clipping); ImageView ivRect = (ImageView) findViewById(R.id.iv_rect); ImageView ivCircle = (ImageView) findViewById(R.id.iv_circle); ViewOutlineProvider rectOutLine = new ViewOutlineProvider() { @Override public void getOutline(View view, Outline outline) { //裁剪为圆角矩形 outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30); } }; ViewOutlineProvider circleOutLine = new ViewOutlineProvider() { @Override public void getOutline(View view, Outline outline) { //裁剪为圆形 outline.setOval(0, 0, view.getWidth(), view.getHeight()); } }; ivRect.setClipToOutline(true); ivCircle.setClipToOutline(true); ivRect.setOutlineProvider(rectOutLine); ivCircle.setOutlineProvider(circleOutLine); } }
布局代码如下:
<?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:id="@+id/iv_rect" android:layout_width="200dp" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:layout_marginTop="40dp" android:background="@mipmap/image" /> <ImageView android:id="@+id/iv_circle" android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center_horizontal" android:layout_marginTop="40dp" android:background="@mipmap/image" /> </LinearLayout>
<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.tinting_clipping_demo.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tinting Test!" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="原图" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:add" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="add" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:src_in" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="src_in" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:src_atop" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="src_atop" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:src_over" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="src_over" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:multiply" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="multiply" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="tint tintMode:screen" /> <ImageView android:layout_width="180dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:src="@mipmap/ic_launcher" android:tint="@color/colorAccent" android:tintMode="screen" /> </RelativeLayout> </LinearLayout> </ScrollView>