您现在的位置是:首页 > 文章详情

Android Design Support Library v28

日期:2018-07-19点击:457
1). 依赖
 implementation "com.android.support:design:28.0.0-alpha3" 
2). MaterialButton
img_39add1ad36dfd76686a9b6ff44847917.png
图1.png
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#DDD" tools:context="com.mazaiting.testdemo.design.MaterialButtonActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--MaterialButton必须设置textAppearance属性--> <android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="Material Button" android:textAllCaps="false" android:textAppearance="?android:attr/textAppearanceLargeInverse" app:rippleColor="#FF8888" /> <android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:backgroundTint="@color/colorPrimary" android:gravity="center" android:text="Material Button" android:textAllCaps="false" android:textAppearance="?android:attr/textAppearanceLargeInverse" /> <android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="Material Button" android:textAllCaps="false" android:textAppearance="?android:attr/textAppearanceLargeInverse" app:cornerRadius="10dp" /> <android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="Material Button" android:textAllCaps="false" android:textAppearance="?android:attr/textAppearanceLargeInverse" app:icon="@mipmap/ic_launcher" app:iconSize="30dp" /> <android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="Material Button" android:textAllCaps="false" android:textAppearance="?android:attr/textAppearanceLargeInverse" app:icon="@mipmap/ic_launcher" app:iconSize="30dp" app:iconTint="@color/colorPrimary" /> <android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="Material Button" android:textAllCaps="false" android:textAppearance="?android:attr/textAppearanceLargeInverse" app:icon="@mipmap/ic_launcher" app:iconSize="30dp" app:iconTint="@color/colorPrimary" app:strokeColor="@color/colorPrimaryDark" app:strokeWidth="2dp" /> </LinearLayout> </android.support.constraint.ConstraintLayout> 

注:MaterialButton必须设置textAppearance属性
MaterialButton属性:

属性 介绍
app:backgroundTint 按钮背景着色
app:backgroundTintMode 按钮背景的着色模式
app:icon 按钮图标(在文字左边,不能设置位置)
app:iconSize 按钮图标大小
app:iconPadding 按钮图标的内边距
app:iconTint 按钮图标着色
app:iconTintMode 按钮图标的着色模式
app:additionalPaddingStartForIcon 按钮图标的左内边距
app:additionalPaddingEndForIcon 按钮图标的右内边距
app:strokeColor 按钮边框颜色
app:strokeWidth 按钮边框宽度
app:cornerRadius 按钮圆角角度
app:rippleColor 按钮点击水波纹效果颜色
3). Chip
img_8f2cace6a7c30aa51f0f24651bc1c67f.png
图2.png
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#DDD" tools:context="com.mazaiting.testdemo.design.ChipActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <android.support.design.chip.ChipGroup android:id="@+id/chip_group" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:chipSpacing="10dp" app:singleSelection="false"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:clickable="true" android:focusable="true" android:text="Chip" android:textAllCaps="false"/> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:focusable="true" android:text="水波纹颜色" android:textAllCaps="false" app:rippleColor="@color/colorAccent"/> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:clickable="true" android:focusable="true" android:text="图标" android:textAllCaps="false" app:chipIcon="@mipmap/ic_launcher" app:chipIconEnabled="true" app:chipIconSize="20dp" app:iconStartPadding="5dp" /> <android.support.design.chip.Chip android:id="@+id/chip_close" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:clickable="true" android:focusable="true" android:text="删除按钮" android:textAllCaps="false" app:closeIconEnabled="true"/> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:clickable="true" android:focusable="true" android:text="背景" android:textAllCaps="false" app:chipBackgroundColor="@color/colorAccent"/> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:clickable="true" android:focusable="true" android:text="边框" android:textAllCaps="false" app:chipStrokeColor="@color/colorAccent" app:chipStrokeWidth="2dp"/> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:clickable="true" android:text="圆角角度" android:textAllCaps="false" app:chipCornerRadius="10dp" android:focusable="true"/> </android.support.design.chip.ChipGroup> </LinearLayout> </android.support.constraint.ConstraintLayout> 

ChipGroup属性:

属性 介绍
app:chipSpacing Chip在水平&垂直方向的间距
app:chipSpacingHorizontal Chip在水平方向的间距
app:chipSpacingVertical Chip在垂直方向的间距
app:singleLine 是否单行显示Chip,默认为false
app:singleSelection 是否为单选模式,默认为false

Chip属性:

属性 介绍
app:chipBackgroundColor Chip背景颜色
app:chipCornerRadius Chip圆角角度
app:chipStrokeColor Chip边框颜色
app:chipStrokeWidth Chip边框宽度
app:rippleColor Chip点击水波纹效果颜色
app:chipIconEnabled 是否在Chip上显示图标,默认为true
app:chipIcon Chip图标(在文字左边,不能设置位置)
app:chipIconSize Chip图标大小
app:closeIconEnabled 是否显示Chip关闭按钮,默认为false
app:closeIcon Chip关闭按钮图标
app:closeIconTint Chip关闭按钮着色
app:closeIconSize Chip关闭按钮大小
app:checkedIconEnabled 是否显示Chip选中图标,默认为true
app:checkedIcon Chip选中图标
app:chipStartPadding Chip左内边距
app:chipEndPadding Chip右内边距
app:iconStartPadding Chip图标左内边距
app:iconEndPadding Chip图标右内边距
app:textStartPadding Chip文字左内边距
app:textEndPadding Chip文字右内边距
app:closeIconStartPadding Chip关闭图标左内边距
app:closeIconEndPadding Chip关闭图标右内边距
4). MaterialCardView
img_d0e40f0087812f5cce806a79f5ce96e1.png
图3.png
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#DDD" tools:context="com.mazaiting.testdemo.design.MaterialCardViewActivity"> <LinearLayout android:gravity="center" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.card.MaterialCardView android:layout_margin="20dp" app:cardBackgroundColor="@color/colorAccent" android:layout_width="match_parent" android:layout_height="100dp"> <TextView android:layout_gravity="center" android:text="Material CardView" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </android.support.design.card.MaterialCardView> <android.support.design.card.MaterialCardView android:layout_margin="20dp" app:cardCornerRadius="10dp" app:cardElevation="5dp" android:layout_width="match_parent" android:layout_height="100dp"> <TextView android:layout_gravity="center" android:text="Material CardView" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </android.support.design.card.MaterialCardView> <android.support.design.card.MaterialCardView android:layout_margin="20dp" app:strokeColor="@color/colorAccent" app:strokeWidth="5dp" android:layout_width="match_parent" android:layout_height="100dp"> <TextView android:text="Material CardView" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </android.support.design.card.MaterialCardView> </LinearLayout> </android.support.constraint.ConstraintLayout> 

MaterialCardView属性:

属性 介绍
app:strokeColor MaterialCardView边框颜色
app:strokeWidth MaterialCardView边框宽度
5). BottomAppBar
img_82e7fdbe03cc17f9b003be4abcad6935.png
图4.png
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.mazaiting.testdemo.design.BottomAppBarActivity"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:src="@mipmap/ic_launcher" app:fabSize="normal" app:layout_anchor="@id/bottom_app_bar" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <android.support.design.bottomappbar.BottomAppBar android:id="@+id/bottom_app_bar" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:fabAlignmentMode="end" app:fabAttached="true" android:layout_width="match_parent" android:layout_height="50dp"/> </android.support.design.widget.CoordinatorLayout> </android.support.constraint.ConstraintLayout> 

BottomAppBar属性:

属性 介绍
app:backgroundTint BottomAppBar背景着色
app:fabAlignmentMode FAB位置(居中或居右),默认为居右
app:fabAttached 是否绑定FAB,默认为true
app:fabCradleMargin BottomAppBar与FAB的距离,默认为5dp
app:fabCradleRoundedCornerRadius BottomAppBar与FAB相邻处的圆角角度,默认为8dp
app:fabCradleVerticalOffset FAB在BottomAppBar中的垂直偏移量,默认为0dp

代码下载

原文链接:https://yq.aliyun.com/articles/663269
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章