Material Design学习（二）

Material Design学习（二）

欢迎去个人博客地址观看：http://chr10003566.github.io./2016/04/25/MaterialDesign2/

上一篇介绍了一个Material Design的各种控件的使用，并且将其组成了一个完整的Demo，根据代码一步一步来我想收获应该是不少的。今天就学习下Material Design的其他方面的用法－－动画

在Android L中新增了如下几种动画：

- Touch feedback（触摸反馈）

- Reveal effect（揭露效果）

- Activity transitions （Activity转换效果）

- Curved motion

- View state changes（视图状态改变）

- Animate Vector Drawables（可绘制矢量动画）

触摸反馈：

在Andorid L5.0中加入触摸反馈动画。

其中最明显的，最具代表的就是波纹动画，必入点击按钮会从点击的位置产生类似于波纹扩散的效果。

Ripple（波纹效果）

当你使用了Material主题，波纹动画会自动应用在所有控件上，我们可以设置其属性来调整我们需要的效果。

首先创建一个Andorid studio的project，这里注意了你必须设置你的

Minimum SDK

至少在

API21：Android5.0（Lollipop）

以上，因为这样你才可以使用Material主题，项目创建好了之后。在

AndroidMainifest.xml

作修改。

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@android:style/Theme.Material">

将主题切换成Material主题即可。

之后修改

activity_main.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"
tools:context="com.example.cui.materialthemedemo.MainActivity">

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="使用了MaterialDesign主题，默认" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:text="使用了MaterialDesign主题,设置了背景边界"/>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"

android:text="使用了MaterialDesign主题,设置了背景边界但可以超出边界"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>

修改好了后，尝试运行，有的人可能会报错。说你必须使用

Theme.AppCompat theme

的主题。这就还需要修改一个地方即将Activity继承自

AppCompatAcitvity

改为继承自

Avtivity

改完之后就能正常运行了，效果如下：



这种方法的好处想必大家也看出来了，代码量少，使用简单，操作方便。但它的缺点也十分的明显直接导致很少人这么使用，因为它必须得在

API21

以上的Android手机上才可以实现。还没有向后兼容的特点，故大多数人不会这么使用。

既然你不可以向后兼容，那就创建一个View可以实现这种效果不就好了嘛，所以有了另一种实现

Ripple

的方法

RippleEffect

要实现

Ripple

十分简单，你只需要在你的项目的

build.gradle(Module:app)

（另一个project，不再是上面那个了）中加入：

dependencies {
compile 'com.github.traex.rippleeffect:library:1.3'
}

就可以了。修改你的

activity_main.xml

:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.cui.rippledemo.MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_dark">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="RippeleDemo"
android:layout_marginLeft="25dp"
android:textColor="@android:color/white"
android:textSize="18sp"/>

<com.andexert.library.RippleView
android:id="@+id/more"
android:layout_width="?android:actionBarSize"
android:layout_height="?android:actionBarSize"
android:layout_toLeftOf="@+id/more2"
android:layout_margin="5dp"
app:rv_centered="true">

<ImageView
android:layout_width="?android:actionBarSize"
android:layout_height="?android:actionBarSize"
android:src="@android:drawable/ic_menu_edit"
android:layout_gravity="center"
android:padding="10dp"
android:background="@android:color/holo_blue_dark"/>
</com.andexert.library.RippleView>

<com.andexert.library.RippleView
android:id="@+id/more2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
app:rv_type="doubleRipple">

<ImageView
android:layout_width="?android:actionBarSize"
android:layout_height="?android:actionBarSize"
android:src="@drawable/ic_profil_plus"
android:layout_gravity="center"
android:padding="10dp"
android:background="@android:color/holo_blue_dark"/>
</com.andexert.library.RippleView>
</RelativeLayout>
</android.support.v7.widget.Toolbar>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="不在RippleView中哦"/>

<com.andexert.library.RippleView
android:id="@+id/rect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/actionbar"
android:layout_marginTop="20dp"
android:layout_marginLeft="30dp"
android:background="@drawable/selector_row"
app:rv_type="rectangle"
android:padding="20dp"
app:rv_zoom="true">

<TextView
android:id="@+id/rect_child"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:textColor="@android:color/white"
android:textSize="18sp"
android:gravity="center"
android:text="Hello World"
android:background="@android:color/holo_green_light"/>

</com.andexert.library.RippleView>

<android.support.v7.widget.RecyclerView
android:layout_below="@id/rect"
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</RelativeLayout>

RecyclerView

里面可以加载

RippleView

的（

ListView

也是可以的），之后我就不贴关于RecyclerView适配的一些代码了。（大家如果要学习可以Git下别人的源码，上不去Github就在后面我po的CSDN的链接上下载吧）

MainAcitivity.java

修改如下：

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

import com.andexert.library.RippleView;
import com.example.cui.rippledemo.adpater.RrippleRecyclerAdapter;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private ArrayList<String> sourcesArrayList = new ArrayList<>();

private static final String TAG = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final RippleView rippleView = (RippleView) findViewById(R.id.rect);

final TextView textView = (TextView) findViewById(R.id.rect_child);

final Toolbar toolbar = (Toolbar) findViewById(R.id.actionbar);

setSupportActionBar(toolbar);

rippleView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e(TAG, "onClick: Rect has clicked");
}
});

rippleView.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {
@Override
public void onComplete(RippleView rippleView) {
Log.d(TAG, "onComplete: RippleView has been Clicked");
}
});

textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e(TAG, "rect Chlid has been clicked" );
}
});

sourcesArrayList.add("Samsung");
sourcesArrayList.add("Android");
sourcesArrayList.add("Google");
sourcesArrayList.add("Asus");
sourcesArrayList.add("Apple");
sourcesArrayList.add("Samsung");
sourcesArrayList.add("Android");
sourcesArrayList.add("Google");
sourcesArrayList.add("Asus");
sourcesArrayList.add("Apple");
sourcesArrayList.add("Samsung");
sourcesArrayList.add("Android");
sourcesArrayList.add("Google");
sourcesArrayList.add("Asus");
sourcesArrayList.add("Apple");

RecyclerView recyclerView  = (RecyclerView) findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
RrippleRecyclerAdapter rippleRecyclerAdapter = new RrippleRecyclerAdapter(sourcesArrayList);
recyclerView.setAdapter(rippleRecyclerAdapter);
}

}

最终实现效果如下：



RippleEffect学习DEMO