MaterialDesign之UI篇

MaterialDesign是google在Android(Lollipop/5.0)中推出的新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容。

一、theme

在项目中使用MaterialDesignTheme:设置应用的targetSdkVersion为21,在style.xml中自定义theme继承android:Theme.Material,AndroidManifest中设置Application或者Activity的theme。google官方提供了三种Material Design样式:Theme.Material、Theme.Material.Light、Material.Light.DarkActionBar。低版本兼容性:Material Design主题只有在API级别为21以上才可使用,低版本如果要使用需要创建value-21资源目录,使用Material Design风格主题,在其他版本使用v7的Theme.AppCompat主题。
这个网站可以生成Material ThemeColor的xml:
一键生成theme color

MaterialDesign之UI篇_第1张图片
theme.png

二、Vector Drawable

在android5.0(API Level 21)中,我们可以支持矢量图:vector drawable,vector drawable的特点是它不会因为图像的缩放而失真。在安卓开发中也就意味着你不需要为不同分辨率的设备定义不同大小的图片资源,只需一个vectorDrawable就够了。
androidStudio创建矢量图可以右键-new VectorAsset,可以从Material icon中选自带的或者导入svg图。

MaterialDesign之UI篇_第2张图片
vector.png

AnimatedVectorDrawable

AnimatedVectorDrawable利用属性动画改变VectorDrawable的属性来实现动画效果,通过匹配Vector节点下Group和path的android:name="”


anim是ObjectAnimator或者AnimatorSet。v7包的版本需要在23.2.0以上,build成功后会External Libraries出现animated-vector-drawable和support-vector-drawable。

三、SnackBar

snackbar是类似toast一样轻量级的反馈,可以设置一个Action事件。默认的字体颜色是对应Theme中的ColorAccent
Snackbar.make(view, "Change Text", Snackbar.LENGTH_LONG) .setAction("OK", new View.OnClickListener() { @Override public void onClick(View v) { tv.setText("New Text"); } }).show();
和Toast不同的是他不依赖context,而是依赖父容器,SnackBar调用make时传进去一个View,它会顺着这个View去找父级,一直找到CoordinatorLayout或者FrameLayout,然后在它底部弹出。如果你的布局中没有包含这两个容器的一个,它就会一直找到Widnow的DecorView,效果就是在屏幕底部弹出。

相关api

sb.dismiss();消失
sb.isShown();是否在显示
sb.isShownOrQueued();是否在显示或者在等待队列
sb.setText();设置文字

四、cardView

cardView是google提供的一个卡片式控件,可以设置圆角、大小、阴影。
foreground是给cardview加点击后响应、波纹状的ripple效果。

MaterialDesign之UI篇_第3张图片


android:id="@+id/cardview"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="16dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/colorAccent"
app:cardCornerRadius="4dp"
app:cardElevation="6dp">



theme里也可以修改ripple的效果和颜色。
@android:color/holo_orange_dark @drawable/ripple_test

MaterialDesign之UI篇_第4张图片

五、BottomSheet

MaterialDesign之UI篇_第5张图片

bottomSheet的实现发现官方给出的有三种方法:

直接在activity中使用
MaterialDesign之UI篇_第6张图片

父容器必须是CoordinatorLayout,bottomSheet的几种状态:
` /**
* The bottom sheet is dragging.
*/
public static final int STATE_DRAGGING = 1;

/**
 * The bottom sheet is settling.
 */
public static final int STATE_SETTLING = 2;

/**
 * The bottom sheet is expanded.
 */
public static final int STATE_EXPANDED = 3;

/**
 * The bottom sheet is collapsed.
 */
public static final int STATE_COLLAPSED = 4;

/**
 * The bottom sheet is hidden.
 */
public static final int STATE_HIDDEN = 5;`
MaterialDesign之UI篇_第7张图片
MaterialDesign之UI篇_第8张图片

这种方式showBottomSheetView调用后有的机型并不会显示但是横竖屏切换后就好了,需要postInvalidateOnAnimation。

使用bottomSheetDialog和bottomSheetFragment
MaterialDesign之UI篇_第9张图片

bottomSheetDialog的父容器其实就是个CoordinatorLayout,这种方法比较实用点,项目中可以写个基类用的时候传view和回调监听事件就可以了。

你可能感兴趣的:(MaterialDesign之UI篇)