欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  移动技术

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

程序员文章站 2022-03-04 16:57:15
1.SwitchMaterial加强版的Switch直接使用 添加开关文字

1.SwitchMaterial

加强版的Switch

1.1 直接使用

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

  <com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:checked="true"
    android:enabled="true"/>

1.2 添加开关文字

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

  <com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:checked="true"
    android:enabled="true"
    android:text="我是SwitchMaterial"
    android:textOff="关"
    android:textOn="开"
    app:showText="true" />

1.3 修改开关的字体大小颜色

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

	app:switchTextAppearance="@style/ontextoff"

  <style name="ontextoff" parent="Theme.AppCompat.Light">
    <item name="android:textColor">#0d09f1</item>
    <item name="android:textSize">8sp</item>
  </style>

1.4 修改开关轨迹样式颜色

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

    app:theme="@style/scstyle"

  <style name="scstyle" parent="Theme.AppCompat.Light">
    <!--开启时的颜色-->
    <item name="colorControlActivated">#00e6db</item>
    <!--关闭时的颜色-->
    <item name="colorSwitchThumbNormal">#383434</item>
    <!--关闭时的轨迹颜色-->
    <item name="android:colorForeground">#ecd502</item>
  </style>

1.5 修改宽度设置和距离文字设置

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

	app:switchMinWidth="60dp"
	app:switchPadding="50dp"

1.6 修改轨道颜色和按钮颜色

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

	app:trackTint="#cc1023"
	app:thumbTint="#10cc16"

1.7 设置轨道图片

可设置为单一图片或者selector

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

	app:track="@drawable/vd_clock_clock"

1.8 设置按钮图片

可设置为单一图片或者selector

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

	android:thumb="@drawable/thumb_selector"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/vd_clock_clock"/>
  <item android:state_checked="false" android:drawable="@drawable/vd_clock_timer"/>
</selector>

2.Chip

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

2.1 Chip的分类

（1）Action chip

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

  • 使用 style="@style/Widget.MaterialComponents.Chip.Action"
  • 不设置style时，默认使用上述style
  • 默认前后图标都不展示，点击后没有选中状态
    <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ActionChip" />

    <!--展示效果同上面的一致-->
    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ActionChip" />

（2）Filter Chip

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

  • 使用 style="@style/Widget.MaterialComponents.Chip.Filter"
  • 初始状态下， 不展示前后图标
  • 点击之后会展示前面的选中图标，并且具有选中状态
  • 通常应用在 ChipGroup 中
<com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FilterChip" />

（3）Entry Chip

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

  • 使用style="@style/Widget.MaterialComponents.Chip.Entry"
  • 默认在末尾展示删除按钮；点击后前面展示选中图标，有选中状态
  • 通常可以作为 chipDrawable 使用，比如在填选邮件收件人时可以使用
    <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="EntryChip " />

（4）Choice Chip

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

  • 使用style="@style/Widget.MaterialComponents.Chip.Choice"
  • 默认不展示前后的图标，但点击后有选中状态
  • 通常用在 ChipGroup 中 , 通过 ChipGroup 的 singleSelection=true/false 属性可以实现单选或多选

2.2 Chip的属性

类别 属性名称 具体作用
Shape app:chipCornerRadius 圆角半径
Size app:chipMinHeight 最小高度
Background app:chipBackgroundColor 背景颜色
Border app:chipStrokeColor 边线颜色
Border app:chipStrokeWidth 边线宽度
Ripple app:rippleColor 水波纹效果的颜色
Label android:text 文本内容
Label android:textColor 修改文本颜色
Label android:textAppearance 字体样式
Chip Icon app:chipIconVisible 前面的图标是否展示
Chip Icon app:chipIcon chip中文字前面的图标
Chip Icon app:chipIconTint 文字前面的图标着色
Chip Icon app:chipIconSize chip中文字前面的图标
Close Icon app:closeIconVisible chip中文字后面的关闭按钮是否可见
Close Icon app:closeIcon chip中文字后面的关闭图标
Close Icon app:closeIconSize 文字后面的关闭图标的大小
Close Icon app:closeIconTint 文字后面的着色
Checkable app:checkable 是否可以被选中
Checked Icon app:checkedIconVisible 选中状态的图标是否可见
Checked Icon app:checkedIcon 选中状态的图标
Paddings app:chipStartPadding chip左边距
Paddings app:chipEndPadding chip右边距
Paddings app:iconStartPadding chipIcon的左边距
Paddings app:iconEndPadding chipIcon的右边距
Paddings app:textStartPadding 文本左边距
Paddings app:textEndPadding 文本右边距
Paddings app:closeIconStartPadding 关闭按钮的做左边距
Paddings app:closeIconEndPadding 关闭按钮的右边距

2.3 Chip的监听

（1）点击事件的监听setOnClickListener 

chip_normal1.setOnClickListener {
      Toast.makeText(mActivity, "Chip被点击了", Toast.LENGTH_SHORT).show()
}

（2）选中状态的监听setOnCheckedChangeListener 

chip_filter.setOnCheckedChangeListener { buttonView, isChecked ->
    var hintStr = ""
    if (isChecked) {
            hintStr = "被选中了"
    } else {
            hintStr = "取消选中了"
    }
    Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
 }

注意：

  • 只有 checkable 属性为true 时该监听才会生效
  • 未设置 checkable 属性时，如果应用了 filter/entry/choice 的style , 该监听可生效，因为这三种style 中 checkable 的值为true。而 ation 的 style 中 checkable 是默认关闭的

（3）关闭按钮被点击的监听setOnCloseIconClickListener 

//关闭按钮的点击监听——closeIcon 没有id，所以必须需要构造匿名监听
chip_entry.setOnCloseIconClickListener {
    Toast.makeText(mActivity, "ClostIcon被点击了", Toast.LENGTH_SHORT).show()
}

3.ChipGroup

与 RadioGroup 类似，ChipGroup 是用来管理多个Chip的 ，可以控制多个 chip 的布局方式以及事件。

Android Material 常用组件详解 SwitchMaterial、Chip、ChipGroup 使用详解

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
    android:orientation="vertical"
    tools:context=".SecondFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="横向排列" />

    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />
        
    </com.google.android.material.chip.ChipGroup>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="单行滚动排列" />

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp">

        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:singleLine="true">

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />


            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />

        </com.google.android.material.chip.ChipGroup>
    </HorizontalScrollView>
</LinearLayout>

3.1 ChipGroup的特点

使用 ChipGroup 可以方便的实现 流式布局效果。其特点如下：

  • 默认情况下， ChipGroup 中的 chip 会横向排列，当超过一行时会执行换行操作。
  • 如果我们不想让 Chip 换行，那么为 ChipGroup 设置 app:singleLine="true"，如果 Chip 会超过一行，则在外层包裹 HorizontalScrollView
  • 只有当其中包裹的 Chip 是 checkable=true 时，才具有选中效果

3.2 ChipGroup的属性

属性名称 作用 示例
app:checkedChip 初始选中的chip app:checkedChip=”@id/chipInGroup2_1”
app:chipSpacing Chip间的间距 app:chipSpacing=”25dp”
app:chipSpacingHorizontal Chip间的水平间距 app:chipSpacingHorizontal=”35dp”
app:chipSpacingVertical Chip间的垂直间距 app:chipSpacingVertical=”10dp”
app:singleLine 是否开启单行模式 app:singleLine=”true”
app:singleSelection 是否开启单选模式 app:singleSelection=”true”

注意：

  • 如果 app:singleLine="false", app:chipSpacing 会同时控制Chips间的水平和垂直的间距
  • 如果 app:singleLine="true", app:chipSpacing 控制的是Chips之间的水平间距
  • 如果设置了 app:chipSpacing，也设置了 app:chipSpacingHorizontal / app:chipSpacingVertical 则 app:chipSpacing的值会被覆盖

3.3 ChipGroup的监听

（1）选中监听setOnCheckedChangeListener

注意： 只有 singleSelction=true 时，该监听才有效。

 //ChipGroup中设置选中监听-- 只有单选的chipGroup才可以使用
        chipGroup2.setOnCheckedChangeListener { chipGroup, selectedId ->
            var hintStr = ""
            when (selectedId) {
                R.id.chipInGroup2_1 -> hintStr = "被选中的是 chipInGroup2_1 "
                R.id.chipInGroup2_2 -> hintStr = "被选中的是 chipInGroup2_2 "
                R.id.chipInGroup2_3 -> hintStr = "被选中的是 chipInGroup2_3 "
                else -> hintStr = "没有选中任何chip"
            }
            Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
        }

（2）获取选中Chipid getCheckedChipIds 

	val ids = chipGroup2.getCheckedChipIds()

本文地址：https://blog.csdn.net/weixin_42046829/article/details/110220160

相关标签： Android

上一篇： flutter使用json_annotation实现序列化和反序列化

下一篇： PPT中插入声音与滚动字幕及图片如何同步出现

推荐阅读