Design 28 最近发布一系列新组件，目前还在alpha版本中，本文是在Kotlin下针对这些组件使用的示例，效果图如下：
从上到下依次为：MaterialButton 、Chip、ChipGroup、MaterialCardView、BottomAppBar
环境与配置
- android studio>= 3.1
- sdk platforms = Android P
- sdk tools 勾选 Build-tools 28-rc2
- 在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主题
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
1.MaterialButton
我们可以将这个按钮添加到布局文件中，如下所示：
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="MaterialButton"
app:backgroundTint="@color/colorPrimary"
app:icon="@drawable/ic_adb_white_24dp"
app:iconTint="#e9a404"
app:cornerRadius="7dp"
app:rippleColor="@color/colorAccent"
/>
属性说明：
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上的文本：：
//布局
<android.support.design.chip.Chip
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:id="@+id/single_chip"
app:chipText="A single Chip"
app:closeIcon="@drawable/ic_close_circle_black_24dp"
app:closeIconEnabled="true"
/>
//代码中设置点击事件
single_chip.setOnCloseIconClickListener {
single_chip.visibility= View.INVISIBLE
}
属性说明：
app:checkable ：用于声明Chip是否可以切换为选定/不选定。如果禁用，则检查的行为方式与按钮相同。
app:chipIcon ：用于显示Chip图标
app:closeIcon ：显示关闭图标(chipIcon 在前，closeIcon在文字后)
closeIconEnabled ：默认为true
2.1 ChipGroup
如果我们向用户显示一组Chip，我们希望确保它们在我们的视图中正确地组合在一起。如果我们想使用ChipGroup，我们只需要将我们的芯片视图封装在一个父ChipGroup组件中：
<android.support.design.chip.ChipGroup
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipText="Chip"
android:id="@+id/ChipGroupChip1"
app:chipBackgroundColor="@color/colorAccent"
app:chipIcon="@drawable/ic_adb_white_24dp"
app:closeIcon="@drawable/ic_close_circle_black_24dp"
app:closeIconEnabled="true"
/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipText="Group"
/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipText="good"
/>
</android.support.design.chip.ChipGroup>
属性说明：
app:chipSpacing ：水平和垂直轴上chip间距
app:chipSpacingHorizontal ：水平间距
app:chipSpacingVertical ：垂直间距
app:singleLine ：chip显示在ChipGroup容器内的一行中，需要将ChipGroup包装在滚动视图(如HorizontalScrollView)中，这样用户就可以滚动显示芯片。
3. Material Card View
另一种样式的CardView组件，在布局中添加：
<android.support.design.card.MaterialCardView
android:layout_gravity="center_horizontal"
android:layout_marginTop="60dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:strokeColor="@color/colorPrimary"
app:strokeWidth="1dp"
>
<TextView
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2018/5/21\nThis is a MaterialCardView "
android:textAlignment="center"
/>
</android.support.design.card.MaterialCardView>
属性说明
app:strokeColor :描边画笔颜色
app:strokeWidth ：描边画笔宽度
app:cardBackgroundColor ：背景颜色
4.Bottom App Bar
底部的应用程序栏是一个新的组件，它允许我们在布局的底部显示一个类似工具栏的组件。这允许我们以比标准工具栏更容易与其交互的方式向用户显示组件。将BottomAppBar添加到布局文件中，如下所示：
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="36dp"
app:fabSize="normal"
android:src="@drawable/ic_add_white_24dp"
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="@dimen/mtrl_bottomappbar_height"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAttached="true"
app:fabAlignmentMode="end"
/>
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
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_show_toast"
android:title="Show toast"
android:icon="@drawable/ic_more_vert_black_24dp"
app:showAsAction="ifRoom"
/>
<item
android:id="@+id/item2"
android:title="item2"
android:icon="@drawable/ic_adb_white_24dp"
app:showAsAction="ifRoom"
/>
</menu>
代码已打包上传Csdn下载
