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 > )