Material Design

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

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

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Android中使用Material Design实现阴影效果，并展示了通过XML设置视图高度的方法。此外，还详细讲解了Tinting（着色）和Clipping（裁剪）的应用技巧。

Material Design
Android Material Design系列之主题样式介绍说明等
阴影效果：
在Android5.x 增加了一个新的属性 Z

z=elevation+translationZ

通过XML代码来设置高度

android:elevation="xxdp"

在程序中通过代码来动态改变视图高度。

 view.setTranslationZ(xxx)

综合例子：

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.wangbaofu.viewserverdemo.ElevationActivity"
    android:orientation="vertical"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="2dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="23dp"
        />
</LinearLayout>

效果图
这里写图片描述
2.Tinting（着色）和Clipping（裁剪）
Tinting只需在XML中配置好tini和tiniMode就可以了。下面一个例子。

<?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"
    tools:context="com.example.wangbaofu.viewserverdemo.ElevationActivity"
    android:orientation="vertical"
        >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:elevation="2dp"
        android:background="@mipmap/ic_launcher"
        />
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="11111"
        android:src="@mipmap/ic_launcher"
        android:elevation="2dp"
        android:tint="@android:color/holo_blue_bright"
        />
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="11111"
        android:src="@mipmap/ic_launcher"
        android:elevation="2dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add"
        />
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="11111"
        android:src="@mipmap/ic_launcher"
        android:elevation="2dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply"
        />
</LinearLayout>

效果图这里写图片描述
Clipping 裁剪

package com.example.wangbaofu.viewserverdemo;

import android.app.Activity;
import android.graphics.Outline;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewOutlineProvider;

public class ElevationActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_elevation);

        View view1 = findViewById(R.id.tv_rect);
        View view2 = findViewById(R.id.tv_cricle);
        View view3 = findViewById(R.id.image);
//        获取OutLine
        ViewOutlineProvider ViewOutlineProvider = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, 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.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };
//      重新设置形状
        view1.setOutlineProvider(ViewOutlineProvider);
        view2.setOutlineProvider(ViewOutlineProvider2);
        view3.setOutlineProvider(ViewOutlineProvider2);
    }
}

xml文件

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.wangbaofu.viewserverdemo.ElevationActivity"
    android:orientation="vertical"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="2dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="23dp"
        />

</LinearLayout>