探索Android Design Support Library v28的新控件

Design 28 最近发布一系列新组件，目前还在alpha版本中，本文是在Kotlin下针对这些组件使用的示例，效果图如下：

Android Design Support Library v28

从上到下依次为：MaterialButton 、Chip、ChipGroup、MaterialCardView、BottomAppBar

环境与配置

1. android studio>= 3.1
2. sdk platforms = Android P
3. sdk tools 勾选 Build-tools 28-rc2
4. 在build.gradle(app)中

android {
    compileSdkVersion "android-P"
   ......
}
dependencies {
    .....
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
    implementation 'com.android.support:design:28.0.0-alpha1'
}

5.更改styles主题

1.MaterialButton

我们可以将这个按钮添加到布局文件中，如下所示：

MaterialButton

属性说明：

app:icon ：定义MaterialButton的图标
app:iconTint ：对图标进行染色
app:iconTintMode ：定义图标的色调模式
app:iconPadding ：图标内边距
app:additionalPaddingLeftForIcon ：图标左边额外的边距
app:additionalPaddingRightForIcon  ：图标右边额外的边距（图标距离文字的距离）
app:rippleColor ：按钮点击时的波纹效果颜色
app:backgroundTint  ：以避免破坏按钮样式，使用此属性更改按钮的背景色
app:backgroundTintMode  ：背景色色调模式
app:strokeColor ：描边的颜色值
app:strokeWidth  ：描边的颜色宽度
app:cornerRadius  ：圆角半径

2. Chip

自带原型背景的用户可选择的建议列表，我们可以像这样将Chip添加到布局中，使用app：chipText属性设置要显示在Chip上的文本：：

//布局
 

//代码中设置点击事件
 single_chip.setOnCloseIconClickListener {
            single_chip.visibility= View.INVISIBLE
        }

Chip

属性说明：

app:checkable ：用于声明Chip是否可以切换为选定/不选定。如果禁用，则检查的行为方式与按钮相同。
app:chipIcon  ：用于显示Chip图标
app:closeIcon ：显示关闭图标(chipIcon 在前，closeIcon在文字后)
closeIconEnabled ：默认为true

2.1 ChipGroup

如果我们向用户显示一组Chip，我们希望确保它们在我们的视图中正确地组合在一起。如果我们想使用ChipGroup，我们只需要将我们的芯片视图封装在一个父ChipGroup组件中：

ChipGroup

属性说明：

app:chipSpacing  ：水平和垂直轴上chip间距
app:chipSpacingHorizontal ：水平间距
app:chipSpacingVertical  ：垂直间距
app:singleLine ：chip显示在ChipGroup容器内的一行中，需要将ChipGroup包装在滚动视图(如HorizontalScrollView)中，这样用户就可以滚动显示芯片。

3. Material Card View

另一种样式的CardView组件，在布局中添加：

MaterialCardView

属性说明

app:strokeColor :描边画笔颜色
app:strokeWidth  ：描边画笔宽度
app:cardBackgroundColor ：背景颜色

4.Bottom App Bar

底部的应用程序栏是一个新的组件，它允许我们在布局的底部显示一个类似工具栏的组件。这允许我们以比标准工具栏更容易与其交互的方式向用户显示组件。将BottomAppBar添加到布局文件中，如下所示：

BottomAppBar+FloatingActionButton

BottomAppBar配合FloatingActionButton一起使用，属性说明：

app:layout_anchor：声明FloatingActionButton固定到BottomAppBar
app:fabAttached  ：声明是否有一个FAB已被附加到底部的应用程序栏。
app:fabAlignmentMode ：FloatingActionButton在BottomAppBar上的位置声明(center/end)
app:fabCradleVerticalOffset  ：标记用于FB的垂直偏移量。默认情况下0dp
app:backgroundTint  ;BottomAppBar背景色

在Activity代码中添加菜单

  override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        setSupportActionBar(bottom_app_bar)
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.bottom_app_bar_menu,menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        if (item?.itemId==R.id.action_show_toast){
            Toast.makeText(this,"你好",Toast.LENGTH_LONG).show()
        }
        return true
    }

bottom_app_bar_menu.xml

代码已打包上传Csdn下载