Android Material Design设计基础

文章简介

本文主要记录一些用于MD设计的小控件或新概念等，辅助MD设计。

Palette

调色板，可以根据Bitmap获取多种色调用于调整ActionBar和StatusBar等，使界面更加和谐。

使用前请自行引入依赖：

compile 'com.android.support:palette-v7:23.3.0'

获取色调的方式：
同步方式：

// Synchronous
 Palette p = Palette.from(bitmap).generate();

异步方式：

// Asynchronous
 Palette.from(bitmap).generate(new PaletteAsyncListener() {
     public void onGenerated(Palette p) {
         // Use generated instance
     }
 });

色调类型：

• Vibrant：充满活力的
• Vibrant Dark：充满活力的黑
• VibrantLight：充满活力的亮
• Muted：柔和的
• Muted dark：柔和的黑

• Muted light：柔和的亮

  上述色调的获取都对应有get方法

CardView

卡片式布局，简洁美观，在5.0后中官方直接提供了自己的卡片式控件。
使用前请自行引入依赖：

compile 'com.android.support:cardview-v7:23.3.0'

在布局文件中，记得添加自定义命名空间：

xmlns:card_view="http://schemas.android.com/apk/res-auto"

两个主要属性：

• card_view:cardBackgroundColor=”@color/colorAccent”
• card_view:cardCornerRadius=”30dp”

视图高度

View的大小位置都是通过x，y确定的，而现在有了z轴的概念，这个z值就是View的高度（elevation），高度决定了阴影（shadow）的大小。

View的z值由两部分组成，elevation和translationZ（它们都是Android L新引入的属性）。

eleavation是静态的成员，translationZ是用来做动画。

Z = elevation+translationZ

---

前面概念和控件的使用Demo:

限于篇幅，直接提供源码链接，有爱自取：CardViewDemo

---

Tinting

着色：
Tint通过修改图像的Alpha遮罩来达到重新着色的目的。通过tint和tintMode可以很方便的对图像进行一些处理。

Demo:

so,很 easy的实现了色调的变换。

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:orientation="horizontal"
    tools:context="com.example.horizon.myapplication.MainActivity">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image1"
            android:layout_marginTop="50dp"
            android:layout_width="120dp"
            android:layout_height="80dp"
            android:src="@drawable/horizon"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"/>
        <ImageView
            android:id="@+id/image2"
            android:layout_marginTop="50dp"
            android:layout_width="120dp"
            android:layout_height="80dp"
            android:src="@drawable/horizon"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:tint="@color/colorSeaBlue"
            android:tintMode="add" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image3"
            android:layout_marginTop="50dp"
            android:layout_width="120dp"
            android:layout_height="80dp"
            android:src="@drawable/horizon"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:tint="@color/colorSeaBlue"
            android:tintMode="screen"/>
        <ImageView
            android:id="@+id/image4"
            android:layout_marginTop="50dp"
            android:layout_width="120dp"
            android:layout_height="80dp"
            android:src="@drawable/horizon"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:tint="@color/colorSeaBlue"
            android:tintMode="multiply"/>

    </LinearLayout>

</LinearLayout>

java

public class MainActivity extends AppCompatActivity {

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView1 = (ImageView) findViewById(R.id.image1);
        ImageView imageView2 = (ImageView) findViewById(R.id.image2);
        ImageView imageView3 = (ImageView) findViewById(R.id.image3);
        ImageView imageView4 = (ImageView) findViewById(R.id.image4);


        ViewOutlineProvider imageProvider;
        imageProvider = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                view.setClipToOutline(true);
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 25);
            }
        };

        if (imageView1 != null) {
            imageView1.setOutlineProvider(imageProvider);
        }
        if (imageView2 != null) {
            imageView2.setOutlineProvider(imageProvider);
        }
        if (imageView3 != null) {
            imageView3.setOutlineProvider(imageProvider);
        }
        if (imageView4 != null) {
            imageView4.setOutlineProvider(imageProvider);
        }

    }
}

Clipping

为了裁剪一个可绘制的视图形状，需要实例OutlineProvider，并在getOutline()调用view.setClipToOutline(true)以及设定裁剪的图形。

Demo:

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:orientation="vertical"
    android:gravity="center"
    tools:context="com.example.horizon.myapplication.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:gravity="center"
        android:background="@color/colorPrimary"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="Hello World!"
        android:elevation="20dp"/>

    <ImageView
        android:id="@+id/image"
        android:layout_marginTop="50dp"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:src="@drawable/horizon"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"/>
</LinearLayout>

java:

public class MainActivity extends AppCompatActivity {

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = (TextView) findViewById(R.id.textView);
        ImageView imageView = (ImageView) findViewById(R.id.image);


        final ViewOutlineProvider textProvider;

        //实例化ViewOutlineProvider
        textProvider = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //设置View可裁减和形状
                view.setClipToOutline(true);
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };

        if (textView != null) {
            //为view设置provider
            textView.setOutlineProvider(textProvider);
        }

        ViewOutlineProvider imageProvider;
        imageProvider = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                view.setClipToOutline(true);
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 25);
            }
        };

        if (imageView != null) {
            imageView.setOutlineProvider(imageProvider);
        }


    }
}

OK，先到这里吧。如果本文对你有帮助，欢迎star或点赞支持，不胜感激。