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()
