美文网首页
Android Design Support Library v

Android Design Support Library v

作者: _凌浩雨 | 来源:发表于2018-07-20 17:59 被阅读330次
1). 依赖
  implementation "com.android.support:design:28.0.0-alpha3"
2). MaterialButton
图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
图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
图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
图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

代码下载

相关文章

网友评论

      本文标题：Android Design Support Library v

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Android Design Support Library v|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！