Design 28 最近發(fā)布一系列新組件，目前還在alpha版本中疆虚，本文是在Kotlin下針對(duì)這些組件使用的示例苛败，效果圖如下：
從上到下依次為：MaterialButton 、Chip径簿、ChipGroup罢屈、MaterialCardView、BottomAppBar
環(huán)境與配置
- 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
我們可以將這個(gè)按鈕添加到布局文件中牍帚，如下所示：
<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的圖標(biāo)
app:iconTint ：對(duì)圖標(biāo)進(jìn)行染色
app:iconTintMode ：定義圖標(biāo)的色調(diào)模式
app:iconPadding ：圖標(biāo)內(nèi)邊距
app:additionalPaddingLeftForIcon ：圖標(biāo)左邊額外的邊距
app:additionalPaddingRightForIcon? ：圖標(biāo)右邊額外的邊距（圖標(biāo)距離文字的距離）
app:rippleColor ：按鈕點(diǎn)擊時(shí)的波紋效果顏色
app:backgroundTint? ：以避免破壞按鈕樣式儡遮，使用此屬性更改按鈕的背景色
app:backgroundTintMode? ：背景色色調(diào)模式
app:strokeColor ：描邊的顏色值
app:strokeWidth? ：描邊的顏色寬度
app:cornerRadius? ：圓角半徑
2. Chip
自帶原型背景的用戶可選擇的建議列表，我們可以像這樣將Chip添加到布局中暗赶，使用app：chipText屬性設(shè)置要顯示在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"
/>
//代碼中設(shè)置點(diǎn)擊事件
single_chip.setOnCloseIconClickListener {
single_chip.visibility= View.INVISIBLE
}
屬性說明：
app:checkable ：用于聲明Chip是否可以切換為選定/不選定鄙币。如果禁用肃叶，則檢查的行為方式與按鈕相同。
app:chipIcon? ：用于顯示Chip圖標(biāo)
app:closeIcon ：顯示關(guān)閉圖標(biāo)(chipIcon?在前十嘿，closeIcon在文字后)
closeIconEnabled ：默認(rèn)為true
2.1 ChipGroup
如果我們向用戶顯示一組Chip因惭，我們希望確保它們?cè)谖覀兊囊晥D中正確地組合在一起。如果我們想使用ChipGroup绩衷，我們只需要將我們的芯片視圖封裝在一個(gè)父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容器內(nèi)的一行中蹦魔，需要將ChipGroup包裝在滾動(dòng)視圖(如HorizontalScrollView)中，這樣用戶就可以滾動(dòng)顯示芯片咳燕。
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
底部的應(yīng)用程序欄是一個(gè)新的組件，它允許我們?cè)诓季值牡撞匡@示一個(gè)類似工具欄的組件招盲。這允許我們以比標(biāo)準(zhǔn)工具欄更容易與其交互的方式向用戶顯示組件低缩。將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? ：聲明是否有一個(gè)FAB已被附加到底部的應(yīng)用程序欄咆繁。
app:fabAlignmentMode ：FloatingActionButton在BottomAppBar上的位置聲明(center/end)
app:fabCradleVerticalOffset? ：標(biāo)記用于FB的垂直偏移量。默認(rèn)情況下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下載
