美文网首页
MaterialDesign之UI篇

MaterialDesign之UI篇

作者: Zzz丶jethro | 来源:发表于2017-02-24 15:44 被阅读0次

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

theme.png

二、Vector Drawable

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

vector.png

AnimatedVectorDrawable

AnimatedVectorDrawable利用属性动画改变VectorDrawable的属性来实现动画效果,通过匹配Vector节点下Group和path的android:name="” <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600"> <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vectordrawable" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="v" android:animation="@anim/rotation" /> </animated-vector>
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效果。

<pre>
<android.support.v7.widget.CardView
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">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="TextView in CardView"
    android:textStyle="bold"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="26sp" />

</android.support.v7.widget.CardView></pre>
theme里也可以修改ripple的效果和颜色。
<item name="android:colorControlHighlight">@android:color/holo_orange_dark</item> <item name="selectableItemBackground">@drawable/ripple_test</item>

五、BottomSheet


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

直接在activity中使用

父容器必须是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;`

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

使用bottomSheetDialog和bottomSheetFragment

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

相关文章

网友评论

      本文标题:MaterialDesign之UI篇

      本文链接:https://www.haomeiwen.com/subject/yvjwwttx.html