了解Material Design

了解Ma-teri-al Design
设计规范

字体 常用字号:
12sp —————————— 小字提示
14sp——————————(桌面端13sp) 正文/按钮文字
16sp——————————(桌面端15sp) 小标题
20sp—————————— Appbar文字
24sp—————————— 大标题
34sp/46sp/56sp/112sp—————————-超大号文字

最小点击区域尺寸:48dp X 48dp (通过padding缩小)

栅格系统的最小单位是8dp,分隔线上下留白:8dp
顶部状态栏高度:24dp
Appbar最小高度:56dp
底部导航栏高度:48dp
悬浮按钮尺寸:56x56dp/40x40dp
用户头像尺寸:64x64dp/40x40dp
侧边抽屉到屏幕右边的距离:56dp
大多元素的留白距离:16dp
屏幕左右对齐基线:16dp
文字左侧对齐基线:72dp
阴影(层次)e-le-vation
动画
水波 ri-pple
Android 5.0特性
CardView(卡式布局)
RecyclerView(循环视图)
Patelle(调色板)
Toolbar(工具栏)
RippleDrawable(波纹图)
1.View的高度与阴影,轮廓 (5.0以上)

View增加了高度的概念,高度大的View会覆盖在高度小的View之上,并带有阴影效果:

view.setEvelvation();
View高度 = elevation + translationZ
代码设置:view.setEvelvation();

布局设置:android:elevation=”10dp”
2.View的轮廓与裁剪(5.1以上)

View增加了轮廓概念,轮廓会影响阴影的效果和裁剪的形状
View的轮廓默认是依据于background的,有其他3个取值:bounds,none,paddingBounds,可以通过outlineProvider属性更改:
布局设置:android:outlineProvider=”bounds”
代码设置:

tvView.setOutlineProvider(new ViewOutlineProvider() {
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void getOutline(View view, Outline outline) {
outline.setOval(0,0,view.getWidth(),view.getHeight());
}
});
3.水波纹动画,自定义水波纹动画以及状态选择器动画(5.0以上)

系统自带

//矩形边框水波纹
android:background=”?android:attr/selectableItemBackground”
//无边框限制水波纹
android:background=”?android:attr/selectableItemBackgroundBorderless”

自定义

使用ripple标签
使用ViewAnimationUtils创建圆形水波纹动画,注意该动画不能在Activity的onCreate方法中执行:

Animator circularReveal = ViewAnimationUtils.createCircularReveal

  (text, 0, text.getHeight() , 1f, text.getWidth()*2);

circularReveal.setDuration(1000);
circularReveal.start();

定义带有属性动画的状态选择器

android:stateListAnimator=”@drawable/selector_anim”
代码加载:

//加载动画
AnimationInflater.loadStateListAnimator();
//设置动画
View.setStateListAnimator();
布局加载: android:stateListAnimator=”@drawable/selector_anim”

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值