Android Design Support Library v28 新增组件详解

最新推荐文章于 2021-05-30 11:43:52 发布
最新推荐文章于 2021-05-30 11:43:52 发布
阅读量318 收藏
点赞数
文章标签： 移动开发 java ui
原文链接：https://juejin.im/post/5b2af8c3f265da59801856cc
版权

1.简介

Google在近期发布了最新的Design Support Library 28.0.0-alpha3版本，其中新增了一些非常实用的组件，本篇文章将会对其进行详细的介绍，一起来看下！

如果你对Material Design还不太了解，可以点击这篇文章《Design Support Library介绍》了解一下。

引入依赖库

在app根目录的buil.gradle文件中加入依赖：

dependencies {
	...
	implementation 'com.android.support:design:28.0.0-alpha3'
}
复制代码

2.MaterialButton

MaterialButton组件继承于Button，因此可以使用Button的大部分属性，可以更便捷的设置按钮圆角、边框、图标等属性，看下效果：

对应的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <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="@color/color_white" />

    <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="50dp"
        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="50dp"
        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="50dp"
        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>
复制代码

注意：MaterialButton必须设置textAppearance属性，如果没有的话会报错，不知道是不是bug。

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 & ChipGroup

在Chip组件出现之前，我们一直都是通过自定义控件的形式来实现关键字标签等UI效果的，比如《Android 流式布局FlowLayout 实现关键字标签》中实现的效果，现在Chip & ChipGroup组件可以对其进行原生支持了，非常Nice，看下效果：

对应的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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:text="Chip"
            android:textAllCaps="false" />

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="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: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: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: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: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="0dp" />

    </android.support.design.chip.ChipGroup>

</LinearLayout>
复制代码

单选或多选功能需要设置android:checkable="true"才可以实现，官方给的设置方式是app:checkable=“true”，会报错找不到，可能是bug，发布正式版的时候再看看。

Chip组件默认不支持点击，需要设置**android:clickable="true"**才可以。

ChipGroup属性速查表：

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

Chip属性速查表：

属性介绍
app:chipBackgroundColorChip背景颜色
app:chipCornerRadiusChip圆角角度
app:chipStrokeColorChip边框颜色
app:chipStrokeWidthChip边框宽度
app:rippleColorChip点击水波纹效果颜色
app:chipIconEnabled是否在Chip上显示图标，默认为true
app:chipIconChip图标（在文字左边，不能设置位置）
app:chipIconSizeChip图标大小
app:closeIconEnabled是否显示Chip关闭按钮，默认为false
app:closeIconChip关闭按钮图标
app:closeIconTintChip关闭按钮着色
app:closeIconSizeChip关闭按钮大小
app:checkedIconEnabled是否显示Chip选中图标，默认为true
app:checkedIconChip选中图标
app:chipStartPaddingChip左内边距
app:chipEndPaddingChip右内边距
app:iconStartPaddingChip图标左内边距
app:iconEndPaddingChip图标右内边距
app:textStartPaddingChip文字左内边距
app:textEndPaddingChip文字右内边距
app:closeIconStartPaddingChip关闭图标左内边距
app:closeIconEndPaddingChip关闭图标右内边距

4.MaterialCardView

与普通CardView相比，可以设置边框样式，看下效果：

对应的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        app:cardBackgroundColor="@color/colorAccent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="MaterialCardView" />

    </android.support.design.card.MaterialCardView>

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="MaterialCardView" />

    </android.support.design.card.MaterialCardView>

    <android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="MaterialCardView" />

    </android.support.design.card.MaterialCardView>

</LinearLayout>
复制代码

MaterialCardView属性速查表：

属性介绍
app:strokeColorMaterialCardView边框颜色
app:strokeWidthMaterialCardView边框宽度

5.BottomAppBar

BottomAppBar组件通常会与FloatingActionButton组件一起使用，但是在开发过程中不是很常用，看下效果：

对应的布局文件：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_add"
        app:fabSize="normal"
        app:layout_anchor="@id/bottom_app_bar" />

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="end"
        app:fabAttached="true" />

</android.support.design.widget.CoordinatorLayout>
复制代码

根布局需要使用CoordinatorLayout，FloatingActionButton通过layout_anchor属性与BottomAppBar绑定在一起。

BottomAppBar属性速查表：

属性介绍
app:backgroundTintBottomAppBar背景着色
app:fabAlignmentModeFAB位置（居中或居右），默认为居右
app:fabAttached是否绑定FAB，默认为true
app:fabCradleMarginBottomAppBar与FAB的距离，默认为5dp
app:fabCradleRoundedCornerRadiusBottomAppBar与FAB相邻处的圆角角度，默认为8dp
app:fabCradleVerticalOffsetFAB在BottomAppBar中的垂直偏移量，默认为0dp

6.写在最后

到这里Design Support Library v28新增组件就介绍完了，如有错误或者遗漏的地方可以给我留言评论，谢谢！

代码已上传至GitHub，欢迎Star、Fork！

GitHub地址：https://github.com/alidili/DesignSupportDemo

本文Demo的Apk下载地址：https://github.com/alidili/DesignSupportDemo/raw/master/DesignSupportDemo.apk

weixin_34380948
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android Design Support Library 兼容库使用详解
Aluo
03-21 9995
Android Design Support Library 介绍 常规控件的使用介绍 符合 MD 设计的菜单控件 具有过渡动画效果的布局Layout Android Design Support Library 介绍主要介绍 Android Design Support Library 的来历，以及Android Design Support Library开发的所需环境Ma
Android Design Support Library 使用详解
yuminfeng728的博客
07-19 8055
概述Android Design Support Library 是Google在2015年的IO大会上，带来的全新适应Material Design设计规范的支持库。在这个支持库中，给我们提供了更加规范的MD设计风格控件。重要的是，Android Design Support Library中，支持所有的Android 2.1以上版本系统。
android.support.v4 库中 DrawerLayout抽屉组件
02-10
改变android.support.v4 库中 DrawerLayout抽屉组件弹出和关闭的时间
Android Design Support Library v28
mazaiting的博客
07-20 258
1). 依赖 implementation "com.android.support:design:28.0.0-alpha3" 2). MaterialButton 图1.png &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;android.support.constraint.Con...
Android Design Android 设计指南非官方简体中文版
weixin_33854644的博客
04-25 129
Android Design Android 设计指南非官方简体中文版我想大家肯定是会收藏的。http://www.apkbus.com/android-44247-1-1.html····························································································安卓巴士活动：您挑刺，我送礼！ 参...
Android Design（官方Android设计中文版）
有家客栈 君子不器
08-01 743
网址：http://www.topfun.us/adchs/index.html
Could not resolve com.android.support:design 28.0.0
all00747的博客
05-20 3362
想试一试android的那个侧滑栏功能，需要用到 'com.android.support:design:28.0.0'建好之后一直报关于28.00的错误，一开始各种百度更改配置没吊用，最后感觉是网络问题，翻了墙后ojbk。关于如何配置代理，墙后打开chrome进入代理设置: 记下地址以及端口后，打开AS，Ctrl+Alt+S打开设置，输入proxy找到代理设置，按下...
Android程序设计-DesignSupportLibrary库介绍.pptx
最新发布
11-02
**Android程序设计——Design Support Library库详解** Design Support Library是Android开发中的一个重要工具包，它为开发者提供了许多Material Design风格的UI组件，帮助我们轻松实现现代Android应用的界面设计。...
DesignSupportLibrary-MaterialDesign:该项目使用android的Design支持库并实现了材料设计
05-15
在"DesignSupportLibrary-MaterialDesign-master"这个项目中，开发者已经实践了这些组件的用法，并提供了示例代码，这对于学习和理解如何在实际项目中应用Design Support Library和Material Design具有很高的参考...
基于Material Design Support Library的一个小项目
04-05
对应博文：Android Material Design 兼容库的使用详解 RecyclerView的万能适配器。对应博文:打造一个RecyclerView的万能适配器-减少你的代码冗余 高仿QQ的自定义View。对应博文：Android自定义View之高仿QQ健康 ...
android support library支持库源码
01-17
android support 源码支持库，主要为使用eclipse安卓开发的用户提供方便
内含各个版本的android-support-design包
08-21
内含各个版本的android-support-design包内含各个版本的android-support-design包
Android添加implement 'com.android.support:design:28.0.0'报错
HUO_YAN的博客
12-25 8133
解决方法 查看依赖里是否使用了 AndroidX。 如果是，则 添加 implementation 'com.google.android.material:material:1.0.0' 因为谷歌用AndroidX取代了支持库，并做了映射。 Android Suppor或AndroidX不能同时存在 参考 https://blog.csdn.net/tuike/article/details...
failedto resolve:com.android.support:design:28.+
weixin_30405421的博客
01-16 254
failedto resolve:com.android.support:design:28.+ 把28改为下面的26 可以F4查看下面信息 参看：https://www.cnblogs.com/password1/p/9183342.html 转载于:https://www.cnblogs.com/sunupo/p/10277985.html...
Android5.0及Material Design
wdx_1136346879的博客
01-26 1236
Android5.0是在2014年10月16日发布的。 1、Android 1.0 一切的开始 2008年10月发布的。第一款安卓手机是htc的G1，它是一款全键盘的手机。没有虚拟键盘的。 2、Android 1.5 增加虚拟键盘。 3、Android 3.0 这个版本是专门针对平板而出的一个版本，一开始并不是开源的。 4、Android 4.0 从4.0开始到现在，4点多 的版本占据着...
android desion包版本,Android design包 TabLayout
weixin_30663789的博客
05-26 208
android 5.0 的新特性 主要是配合ViewPager来使用，很多项目中都会用到这个东西，我就简单来记录一下。先写基本用吗 xml文件里面然后在activity里面初始化控件，然后就是需要新建fragment 新建一个adapter，先上一个简单adapter的代码private ArrayListmArrayList;//存放fragment的集合private ArrayListmSt...
安卓 使用Snackbar Failed to resolve: com.android.support:design:26.0.0 解决方案
monkey_rose的博客
10-10 4620
使用Snackbar首先要在build.gradle app中添加库的依赖 compile 'com.android.support:design:26.+' ： 注意
Android 4.4版本的Material Design设计方法
weixin_34309435的博客
03-25 101
Material_Design 自从Android 5.0推出后其所运用的Material Design设计出来的界面深受广大用户的喜爱，但只有android 5.0及以上的版本支持这用法，对于android 5.0以下的手机，又该如何呢？ 经摸索，有下面方法可以设置： 步骤-- 1 build.gradle文件内的 minSdkV...
design android app,Colour Design app
weixin_35782626的博客
05-30 629
Colour Design是佐敦为潜在的客户们提供的家居墙面涂料色彩搭配选择软件，这款软件可以模拟真实的家居涂料颜色效果，帮助家居设计师们更好的搭配家装色彩。对于业主朋友们来说，这款Colour Design也可以让大家提前看看对应颜色的效果，而且这款软件还提供了线上的零售渠道，可以在线购买佐敦涂料。软件介绍：一个温暖而美好的家是慰藉心灵的最佳场所，墙面配色则体现了一个家庭的审美品味。消费升级潮流...
Android Design Library: 实现QQ侧滑与滑动菜单设计
在Android程序开发中，实现QQ动画侧滑效果和滑动菜单导航的关键是利用Android Design Support Library（简称DSL）。Google在2015年的IO大会上推广了Material Design（MD）设计规范，并在DSL中提供了符合MD风格的控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值