Android编程权威指南——material design

Android编程权威指南——material design

• elevation 和Z值

elevation值可以在View.setELevation（float）方法或布局XML文件中设置，如代码清单 所示。
在布局文件中设置elevation值

因为elevation值要作为Z基准值使用，所以最好采用设置XML属性值的方式。要修改View视图的elevation，可以使用transLationZ和Z属性。
Z值总是等于elevation加上transLationZ。如果给Z一个值，那么系统会自动算出t rans lationZ值。
translationZ: 6dp Z: elevation + translationZ
elevation: 2dp

• state list animator

state list animator能赋予视图动画特效。只要在res/animator中定义一个state list animator，就能实现按钮浮出的动画效果，如下代码所示。
animated state list drawable使用示例








<item android:duration=“10"android:drawable=”@drawable/button_frame 2"/><item android:duration=“10"android:drawable=”@drawable/button_frame_3"/>


• 动画工具

materialdesign引入了很多漂亮的动画特效。有些很容易实现，有些需要花点力气。不过，也不用担心，Android为你准备了便利工具。

1. circular reveal

circularreveal动画看起来就像墨滴在一张纸上快速扩散。从一个交互点出发（通常是用户的按压点），视图或是一段文字向外扩散显现。具体效果
material design指南指出，circular reveal动画应该开始于用户手指在屏幕上的触点。所以，首先要找到用户点击视图的坐标，如下代码所示。

 找到视图点击坐标


 @0verride

 
pubLic void onCLick(View cLickSource){


 
int[] clickCoords = new int[2];


 
// Find the Location of clickSource on the screen clickSource.getLocationOnScreen(clickCoords);

 

// Tweak that location so that it points at the center of the view,

 

// not the corner
clickCoords[0] += clickSource.getwidth()/ 2;

 

clickCoords[1]+= clickSource.getHeight()/ 2;
performReveaLAnimation(mViewToReveal,cLickCoords[0],cLickCoords[1]);

 

}


 

然后开始执行circular reveal动画，如下代码所示。

 

创建并执行circular reveal动画


 

private void performRevealAnimation(View view,int screenCenterx,int screenCenterY){


 

// Find the center relative to the view that will be animated

 

int[] animatingViewCoords = new int [2];

 view.getLocationOnScreen(animatingViewCoords);

 int centerX = screenCenterX - animatingViewCoords[0];

 int centerY = screenCenterY - animatingViewCoords[1];

 / Find the maximum radius Point size = new Point();

getActivity().getWindowManager().getDefauLtDisplay().getSize(size);
int maxRadius = size.y;

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){

ViewAnimationUtils.createCircularReveaL(view,centerX,centerY,0,maxRadius)
.start();
}

注意，成功调用createCircuLarReveal（…）方法有个前提条件∶布局中已有目标视图。

2. shared element transition

shared element transition（又称为hero transition）是material design中引入的另一新动画特效。它适用于一种特殊场景∶两个视图显示相同元素。
它实际就是个共享元素（shared element ）。

首先是打开activity transition。如果你的activity使用了AppCompat主题，这个步骤可以直接跳过。）
在随后手工打开activity transition。如下代码所示。
以代码的方式打开activity transition

@0verride


public void onCreate(Bundle savedInstanceState) {
getWindow().requestFeature(Window.FEATURE_ACTTVITY_TRANSTTIONS);


super.onCreate(savedInstanceState);


…


}
还可以通过修改activity使用的样式，设置android∶windowActivityTransitions属性值为true，如下代码所示。

在样式里打开activity transition





</ resources>
接下来为shared element视图设置transition名称。在Android在API 21中为View引入了 transitionName属性。可以在布局XML文件里，将android∶transitionName属性设置为image如下所示。

FrameLayout
xmLns;android=“http://schemas.android.com/apk/res/android"android: Layout_width=“match_parent” android;Layout_height=“match_parent” android;background=”#7700000"




ImageView


android:Layout_gravity=“center” android:transitionName=“image” android:id="@+id/image_view" android;Layout_width=“300dp” android:Layout_height="30odp"
图35-9 设置android∶transitionName属性值为image



然后，再定义一个startwithTransition（…）静态方法，为另一视图设置相同的transition名，如下代码所示。

定义startwithTransition（…）方法


pubLic static void startwithTransition(Activity activity,Intent intent,



View sourceView) {

ViewCompat.setTransitionName(sourceView,“image”);
ActivityOptionsCompat options = ActivityOptionsCompat

.makeSceneTransitionAnimation(activity,sourceView,“image”);
activity.startActivity(intent,options.toBundle());

}

• 新的视图组件

materialdesign指南还设计了一些全新视图组件，它们在Lollipop系统中尚属首秀。

1. card

首先学习的是card这个新组件，它是个frame容器组件。使用CardView。
类似RecyclerView，CardView是com.android.support∶cardview-v7支持库中的一个视图类。在使用前，首先要在项目中添加这个依赖。
引入以后，就可以像使用布局中的ViewGroup一样使用CardView了，如下代码所示。
在布局中使用CardView


<android.support.v7.widget.CardView

android:id="@+id/item"

android:Layout_width=“match_parent”
android:Layout_height=“200dp”
android;Layout_margin=“16dp”>
…
</android.support, v7.widget.CardView>

2. floating action button

floating action button是在Google设计支持库中实现的。使用前，首先要在项目中引入 com.android.support∶design∶24.2.1这个依赖。


如果把floating action button放在Framelayout中，设计支持库还会引入一个比较智能的 CoordinatorLayout。具体实现如代码所示。

布局floating action button


<android.support.design.widget.CoordinatorLayout

xmLns:android=“http://schemas.android.com/apk/res/android"

xmLns:tools=“http://schemas.android.com/tools”
xmLns:app=“http://schemas.android.com/apk/res-auto”

android:Layout_width=“match_parent”

android:Layout_height=“match_parent”>


[… main content here …
,]<android.support.design.widget.FLoatingActionButton


android:id=”@+id/floating_action _button"

android:Layout_width=“wrap_content”

android:Layout_height=“wrap_content”

android:Layout_gravity=“bottomright” android: layout_margin=“16dp”

android:src="@drawable/play"/>


</android.support.design.widget.CoordinatorLayout>

3. snackbar

snackbar比floating actionbutton复杂一些。它位于屏幕底部，是一种不怎么需要用户交互的控件snackbar控件的动画效果是从屏幕底部向上弹出。短暂停留一会，或是屏幕上有了其他交互操作，它就会自动退出。和floating action button一样，snackbar也是在Android设计支持库中实现的。创建和显示snackbar的方式和Toast类似，如代码所示。



创建并显示snackbar
Snackbar.make(container,R.string.munch,Snackbar.LENGTH_SHORT).show();




创建Snackbar需要传入放置它的视图、要显示的文字以及它暂留的时间。最后，调用show（）方法展示它。

> 
> 
> 详情参考Android编程权威指南