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如下：
<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:
<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 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