1.2 添加开关文字 android:layout_width="wrap_content" android:layout_height="match_parent" android"> 跳转到主内容
思享编程网:思考分享,玩转编程世界!

Android Material 常用组件详解(四)—— SwitchMaterial、Chip、ChipGroup 使用详解

1.SwitchMaterial 加强版的Switch 1.1 直接使用

android:layout_width="wrap_content" android:layout_height="match_parent" android:checked="true" android:enabled="true"/>

1.2 添加开关文字

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 修改开关的字体大小颜色

app:switchTextAppearance="@style/ontextoff"

1.4 修改开关轨迹样式颜色

app:theme="@style/scstyle"

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

app:switchMinWidth="60dp"

app:switchPadding="50dp"

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

app:trackTint="#cc1023"

app:thumbTint="#10cc16"

1.7 设置轨道图片 可设置为单一图片或者selector

app:track="@drawable/vd_clock_clock"

1.8 设置按钮图片 可设置为单一图片或者selector

android:thumb="@drawable/thumb_selector"

2.Chip

2.1 Chip的分类 (1)Action chip

使用

style="@style/Widget.MaterialComponents.Chip.Action"

不设置style时,默认使用上述style 默认前后图标都不展示,点击后没有选中状态

style="@style/Widget.MaterialComponents.Chip.Action" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ActionChip" />

android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ActionChip" />

(2)Filter Chip

使用

style="@style/Widget.MaterialComponents.Chip.Filter"

初始状态下, 不展示前后图标 点击之后会展示前面的选中图标,并且具有选中状态 通常应用在 ChipGroup 中

style="@style/Widget.MaterialComponents.Chip.Filter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="FilterChip" />

(3)Entry Chip

使用

style="@style/Widget.MaterialComponents.Chip.Entry"

默认在末尾展示删除按钮;点击后前面展示选中图标,有选中状态 通常可以作为 chipDrawable 使用,比如在填选邮件收件人时可以使用

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

使用

style="@style/Widget.MaterialComponents.Chip.Choice"

默认不展示前后的图标,但点击后有选中状态 通常用在 ChipGroup 中 , 通过 ChipGroup 的 singleSelection=true/false 属性可以实现单选或多选 2.2 Chip的属性 类别属性名称具体作用 Shapeapp:chipCornerRadius圆角半径Sizeapp:chipMinHeight最小高度Backgroundapp:chipBackgroundColor背景颜色Borderapp:chipStrokeColor边线颜色Borderapp:chipStrokeWidth边线宽度Rippleapp:rippleColor水波纹效果的颜色Labelandroid:text文本内容Labelandroid:textColor修改文本颜色Labelandroid:textAppearance字体样式Chip Iconapp:chipIconVisible前面的图标是否展示Chip Iconapp:chipIconchip中文字前面的图标Chip Iconapp:chipIconTint文字前面的图标着色Chip Iconapp:chipIconSizechip中文字前面的图标Close Iconapp:closeIconVisiblechip中文字后面的关闭按钮是否可见Close Iconapp:closeIconchip中文字后面的关闭图标Close Iconapp:closeIconSize文字后面的关闭图标的大小Close Iconapp:closeIconTint文字后面的着色Checkableapp:checkable是否可以被选中Checked Iconapp:checkedIconVisible选中状态的图标是否可见Checked Iconapp:checkedIcon选中状态的图标Paddingsapp:chipStartPaddingchip左边距Paddingsapp:chipEndPaddingchip右边距Paddingsapp:iconStartPaddingchipIcon的左边距Paddingsapp:iconEndPaddingchipIcon的右边距Paddingsapp:textStartPadding文本左边距Paddingsapp:textEndPadding文本右边距Paddingsapp:closeIconStartPadding关闭按钮的做左边距Paddingsapp: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 的布局方式以及事件。

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">

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

android:layout_width="wrap_content" android:layout_height="wrap_content">

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

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

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

android:layout_width="wrap_content" android:layout_height="wrap_content" app:singleLine="true">

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

style="@style/Widget.MaterialComponents.Chip.Entry" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="EntryChip " />

3.1 ChipGroup的特点 使用 ChipGroup 可以方便的实现 流式布局效果。

其特点如下: 默认情况下, ChipGroup 中的 chip 会横向排列,当超过一行时会执行换行操作。

如果我们不想让 Chip 换行,那么为 ChipGroup 设置

app:singleLine="true"

,如果 Chip 会超过一行,则在外层包裹

HorizontalScrollView

只有当其中包裹的 Chip 是

checkable=true

时,才具有选中效果 3.2 ChipGroup的属性 属性名称作用示例 app:checkedChip初始选中的chipapp:checkedChip=”@id/chipInGroup2_1”app:chipSpacingChip间的间距app:chipSpacing=”25dp”app:chipSpacingHorizontalChip间的水平间距app:chipSpacingHorizontal=”35dp”app:chipSpacingVerticalChip间的垂直间距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()

相关文章