Android 5.0 材料设计(在imooc上看的视频,记录一些主要内容)


使用材料设计要做的工作:

1. 保证向后的兼容性

2. 使用材料设计的主题

     <resources>

          <style name=“AppTheme” parent=“android:Theme.Material”>

          </style>

     </resources>

3. 让视图产生阴影

     android:elevation=“5dp”

     z-depth

4. 使用 List 和

     RecyclerView

     CardView

5. 定制动画

    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());


使用材料设计,要求


使用5.0模拟器:

1. 安装x86模拟器加速器

检测是否安装成功:kextstat | grep intel

2. 安装x86模拟器镜像


保证APP的兼容性:

1. styles

    res/values/styles

    res/values-v21/styles

2. layout

    res/layout/xxx.xml

    res/layout-v21/xxx.xml

3. Support Library

    RecyclerView

    CardView

4. 检测Android系统的版本

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

可以使用材料设计

    }else{

低于 android 5.0,不能使用材料设计

    }


和材料设计有关的主题:

@android:style/Theme.Material

@android:style/Theme.Material.Light

@android:style/Theme.Material.Light.DarkActionBar


在style.xml文件中,可以自定义控件属性,如:

<item name=“android:colorPrimaryDark”>#00F</item>   状态栏背景色为蓝色,

<item name=“android:colorPrimary”>#0F0</item>  ActionBar背景色为绿色,

<item name=“android:colorAccent”>#F00</item>  控件颜色为红色。


RecyclerView :

1. ListView控件的升级版

2. LinearLayoutManager

    GridLayoutManager

    StaggeredGridLayoutManager

3. 定制Item动画,指定Item之间的分隔条


引用android.support.v7.widget.RecyclerView:

    android-support-v7-appcompat.jar

    android-support-v7-recyclerview.jar


绘制Item分隔条:

1. 定义一个类,继承 RecyclerView.ItemDecoration,重写 onDrawOver方法

定义 int[] 数组存放系统分隔条的id:android.R.attr.listDevider

定义一个存储分隔条的 Drawable 对象

2. 在一个参数的构造方法中,通过 TypedArray,将系统提供的分隔条赋给存储分隔条的 Drawable对象:

    TypedArray a = context.obtainStyledAttributes(int[]);

    mDrawable = a.getDrawable(0);

回收TypedArray所占用的空间

3. 在onDrawOver方法中,使用循环,绘制所有列表项之间的分隔条:

获取列表项距离左边缘的距离:parent.getPaddingLeft

获取列表项距离右边缘的距离:parent.getWidth - parent.getPaddingRight

获取列表项的总数:parent.getChildCount

    开始绘制所有列表项之间的分隔条:

        for(int i=0; i<childCount; i++){

获取当前列表项:child = parent.getChildAt(i)

获取当前列表项的布局参数:params = child.getLayoutParams

获取分隔条要绘制的左上角位置:child.getBottom + params.bottomMargin

获取分隔条要绘制的右下角位置:child.getBottom + params.bottomMargin + mDrawable.getIntrinsicHeight

通过setbounds设置绘制的范围

通过draw(canvas)进行绘制

        }


实现Adapter:extends RecyclerView.Adapter

范型ViewHolder:extends RecyclerView.ViewHolder


圆形按钮:

1. 创建ViewOutlineProvider

重写getOutline:获取矩形按钮尺寸:getResources().getDimensionPixelSize(R.dimen.fab_size)

设置轮廓尺寸:outline.setOval

2. 获取右下角按钮对象

3. 设置轮廓尺寸:setOutlineProvider


获取RecyclerView对象

创建线性布局管理器(默认垂直方向)

为RecyclerView指定布局管理器(LinearLayoutManager)

创建列表分割条对象

为RecyclerView指定分割条对象

创建Adapter对象

为RecyclerView设置Adapter


获取第一个可视的item的位置:LinearLayoutManager.findFirstCompletelyVisibleItemPosition。


CardView:

1. 用于实现一个立体的卡片

2. 提供了圆角,阴影等特效


引用android.support.v7. CardView:

        android-support-v7-appcompat.jar

        android-support-v7-cardview.jar

引用android.support.v7. cardview.R


自有属性:android:elevation(可以用来设置阴影)


在arrt.xml文件中指定CardView属性:

<declare-styleable name=“CardView”>

    <attr name=“cardBackgroundColor” format=“color” />

    <attr name=“cardCornerRadius” format=“dimension” />

</declare-styleable>


在布局文件中引用CardView属性:

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

card_view:cardBackgroundColor

card_view:cardCornerRadius


通常可以将CardView用作列表的Item,以产生较好的显示效果。


阴影特效:

1. Elevation:高度

2. TranslationZ:z轴相对于高度的位置,用于实现动画的属性

3. Z = Elevation + TranslationZ


阴影拖动:

1. 使用DragFrameLayout

2. dragFrameLayout.setDragFrameController();

3. 在onDragDrop中调整TranslationZ:view.animate().translationZ( captured ? 50 : 0 ).setDuration( 100 );

    当手指按下时,阴影以动画的效果增大;当手指抬起时,阴影以动画的效果减小

4. dragFrameLayout.addDragView( view );


试图裁剪:

ViewOutlineProvider(视图轮廓提供者)

setOutlineProvider


1. 实现视图轮廓提供者

    extends ViewOutlineProvider

    getOutline

    outline.setXXX()

2. 获取待裁剪的视图对象clippedView

3. 将轮廓提供者与待裁剪的View进行绑定

4. 判断视图对象是否处于裁剪状态:

    clippedView.getClipToOutline();

5. 如果视图对象处于裁剪状态,则禁止裁剪,将视图对象恢复原状:

    clippedView.setClipToOutline( false );


着色:

android:tint(着色的颜色)

android:tintMode(着色的模式 ProterDuff.Mode)

setColorFilter(在代码中使用,可以同时设置着色的颜色和模式)


Ripple Drawable 资源:

1. drawable/xxx.xml

    <ripple xmlns:android=“” android:color=“” >

资源” android:id=“@android:id/mask” />(没有选中的状态)

资源” />(选中的状态)

    </ripple>

2. 使用Shape:

    <shape xmlns:android=“” android:shape=“oval”>

(实心圆)

(边框)

    </shape>

3. anim/xxx.xml

    <selector xmlns:android=“” >

(按下时,执行动画)

(对象动画,通过改变对象的属性来实现动画效果)

                                         android:duration=“@android:integer/config_shortAnimTme” 

                                         android:propertyName=“ translationZ ”

                                         android:valueFrom=“2dp”

                                         android:valueTo=“4dp”

                                         android:valueType=“ floatType ” />

        </item>

(普通状态)

(对象动画,通过改变对象的属性来实现动画效果)

                                         android:duration=“@android:integer/config_shortAnimTme” 

                                         android:propertyName=“ translationZ ”

                                         android:valueFrom=“4dp”

                                         android:valueTo=“2dp”

                                         android:valueType=“ floatType ” />

        </item>

    </selector>

4. layout/xxx.xml

在布局文件中指定 android:background=“普通状态的shape资源”

动画资源”

5. 通过代码控制:

重写onTouch事件,

(手指按下,设置触摸点为热点)

    (ViewGroup)view.getChildAt(0).getBackground().setHotSpot(motionEvent.getX, motionEvent.getY)

(手指抬起,开始播放动画)

    ViewAnimationUtils.createCircularReveal().start();


矢量Drawable资源:

SVG(Scalable Vector Graphics)矢量图,跨平台,w3c标准

M 100 100 L 300 100 L 200 300 z( M-当前点,L-画线,z-结束)


Android中使用矢量Drawable资源:

定义drawable/xxx.xml资源文件,在布局文件中引用矢量的drawable资源

<vector xmlns:android=“”

             android:width=“256dp”

             android:height=“256dp”

(虚拟坐标转换)

             android:viewportHeight=“32” >

    <path android:fillColor=“ #0000FF ”

              android:pathData=“M 100 100 L 300 100 L 200 300 z ” />

</vector>


<vector xmlns:android=“”

             android:width=“500dp”

             android:height=“500dp”

(虚拟坐标转换)

             android:viewportHeight=“600” >

(内部可以有多个path)

                 android:pivotX=“300”

(中心点的位置,相对于viewportHeight而定)

(旋转的角度)

        <path android:name=“path1”

                  android:fillColor=“ #0000FF ”

                  android:pathData=“M 100 100 L 300 100 L 200 300 z ” />

        <path android:name=“path2”

                  android:fillColor=“ #00FF00 ”

                  android:pathData=“M 100 100 L 300 100 L 200 300 z ” />

    </group>

</vector>


SVG设计工具:

在线设计工具:svg-edit

离线设计工具:inkscape(在android中使用,要保存为 Plain SVG格式)


SVG矢量动画:

1. 定义动画矢量资源文件 drawable/xxx.xml,在布局文件中引用

属性对应于 svg-drawable 资源文件中 group 的android:name属性

    <animated-vector xmlns:android=“” android:drawable=“ svg-drawable ” >

(用于控制时针旋转的动画)

(用于控制分针旋转的动画)

    </animated-vector>

2. 实现 svg-drawable 资源文件

3. 实现旋转动画的资源文件( < objectAnimator > )