Material Design的其他使用

最新推荐文章于 2025-07-12 16:51:48 发布

原创最新推荐文章于 2025-07-12 16:51:48 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

103 篇文章

订阅专栏

本文介绍了如何使用MaterialDesign进行图像着色与裁剪。通过设置XML属性实现图像着色，包括不同混合模式的效果展示。此外，还介绍了如何通过ViewOutlineProvider实现视图的裁剪效果。

Material Design给予图像两个新功能tint着色和clip剪裁
第一个着色很简单，你只需要在xml文件中配置好android:tint属性和android:tintMode属性就可以。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.shuaijie.jiang.mytest.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@color/colorAccent" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@color/colorAccent"
        android:tintMode="add" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@color/colorAccent"
        android:tintMode="multiply" />

</LinearLayout>

效果显而易见，如图所示

接下来说一下裁剪的功能，你可以通过裁剪改变一个视图的外形。首先需要使用ViewOutlineProvider来
修改outline，然后通过view.setOutlineProvider将outline作用给视图。代码如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.shuaijie.jiang.mytest.MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:elevation="5dp" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:elevation="5dp" />

</LinearLayout>
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View tv1 = findViewById(R.id.tv1);
        View tv2 = findViewById(R.id.tv2);
        ViewOutlineProvider vop1 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);
            }
        };
        tv1.setOutlineProvider(vop1);
        ViewOutlineProvider vop2 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };
        tv2.setOutlineProvider(vop2);
    }
}