个人练习代码库/Material Design Part2/视图与阴影+着色和裁剪-优快云博客

本文介绍如何在Android中使用视图阴影(elevation)和着色(tinting)技术来增强用户界面的设计感。包括如何设置静态阴影效果、利用translationZ属性创建动态阴影动画，以及如何使用不同混合模式对图片进行着色。

1.视图与阴影

elevation:静态的成员

translationZ：代码中使用实现动画效果

Z（高度）=elevation+translationZ

XML中使用：android：elevation=“xxdp”

代码中：view.setTranslationZ（）/动画效果 view.animate（）.setTranslationZ

2.着色+裁剪

Tinting：xml中配置tint和tintMode->通过修改Alpha遮罩修改图像颜色

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/use1"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:background="@android:color/white" />
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/use1"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:tint="#2C3E50"/>

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:src="@mipmap/use1"
        android:tint="#2C3E50"
        android:tintMode="add"
        tools:targetApi="lollipop" />
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/use1"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:tint="#2C3E50"
        android:tintMode="multiply"
        tools:targetApi="lollipop" />
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/use1"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:tint="#2C3E50"
        android:tintMode="screen"
        tools:targetApi="lollipop" />
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/use1"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:tint="#2C3E50"
        android:tintMode="src_atop"
        tools:targetApi="lollipop" />
</LinearLayout>

clipping：使用ViewOutlineProvider修改outline，通过setOutlineProvider设置给view

import android.annotation.TargetApi;
import android.app.Activity;
import android.graphics.Outline;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewOutlineProvider;
import android.widget.Button;
import android.widget.TextView;

public class Main2Activity extends AppCompatActivity {
    private Boolean flag=true;



    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.clipping);
        TextView tv1=findViewById(R.id.tv1);
        TextView tv2=findViewById(R.id.tv2);
        ViewOutlineProvider vo1=new ViewOutlineProvider() {
                @Override
                public void getOutline(View view, Outline outline) {
                    outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),30);
                }
            };
        ViewOutlineProvider vo2=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setOval(0,0,view.getWidth(),view.getHeight());
            }
        };

        tv1.setOutlineProvider(vo1);
        //截取当前的可视区域到Outline
        //setClipBounds(Rect rect),直接指定当前view的可视区域，当前的Rect使用的view的自身的坐标系
        tv1.setClipToOutline(true);
        tv2.setOutlineProvider(vo2);
        tv2.setClipToOutline(true);
        }
    }