探索Android Design Support Library

2018-05-21 本文已影响1145人 leo567

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

Android Design Support Library v28

从上到下依次为：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"
            />

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上的文本：：

//布局
 <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
        }

Chip

属性说明：

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>

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>

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

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下载

探索Android Design Support Library

环境与配置

1.MaterialButton

2. Chip

2.1 ChipGroup

3. Material Card View

4.Bottom App Bar

猜你喜欢

热点阅读