文中完整代码下载地址:
https://github.com/CnPeng/CnPengAndroid2.git
文中内容对应上述地址中的 a01_chips 目录
此外,
文中DEMO是基于 AndroidStudio 3.2 Beta 5 版本构建的。
gradle 中 compileSdkVersion 和 targetSdkVersion 均为 28
如上图,这种界面我们通常称之为 流式布局标签。
最早实现这种界面的时候,基本都是自定义一个继承自ViewGroup的控件,然后在Java代码中动态的add 一个个的TextView;
后来有了 RecyclerView , 我们实现这种界面就比较方便了;
现在谷歌为我们提供了 Chip、ChipGroup、ChipDrawable ,有了这三者, 我们实现这种界面就更加方便了!
使用Chip时需要先引入兼容包,可分为两种情况, 一种是新建项目;一种是在现有的项目中引入 Chip.
implementation 'com.google.android.material:material:1.0.0-rc01'
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="chipIconTint">@color/chipIconTint</item>
</style>
buildscript {
......
dependencies {
classpath 'com.android.tools.build:gradle:3.2.0-beta05'
......
}
}
补充
注意:以下类别中,特点描述都是基于只设置 text 和 style 不设置其他属性时总结的
根据Chip使用的 style ,可以将其分为以下四类:
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="ActionChip" />
<!--展示效果同上面的一致-->
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是一个单一的chip" />
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FilterChip01" />
<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 " />
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="ChoiceChip" />
属性名称 | 具体作用 |
---|---|
app:chipCornerRadius | 圆角半径 |
app:chipMinHeight | 最小高度 |
app:chipBackgroundColor | 背景颜色 |
app:chipStrokeColor | 边线颜色 |
app:chipStrokeWidth | 边线宽度 |
app:rippleColor | 水波纹效果的颜色 |
android:text | 文本内容 |
android:textColor | 修改文本颜色 |
android:textAppearance | 字体样式 |
app:chipIconVisible | 前面的图标是否展示 |
app:chipIcon | chip中文字前面的图标 |
app:chipIconTint | 文字前面的图标着色 |
app:chipIconSize | chip中文字前面的图标 |
app:closeIconVisible | chip中文字后面的关闭按钮是否可见 |
app:closeIcon | chip中文字后面的关闭图标 |
app:closeIconSize | 文字后面的关闭图标的大小 |
app:closeIconTint | 文字后面的着色 |
app:checkable | 是否可以被选中 |
app:checkedIconVisible | 选中状态的图标是否可见 |
app:checkedIcon | 选中状态的图标 |
app:showMotionSpec | 动效? |
app:hideMotionSpec | 动效? |
app:chipStartPadding | chip左边距 |
app:chipEndPadding | chip右边距 |
app:iconStartPadding | chipIcon的左边距 |
app:iconEndPadding | chipIcon的右边距 |
app:textStartPadding | 文本左边距 |
app:textEndPadding | 文本右边距 |
app:closeIconStartPadding | 关闭按钮的做左边距 |
app:closeIconEndPadding | 关闭按钮的右边距 |
上图来自于:ChipDrawable文档 https://developer.android.com/reference/com/google/android/material/chip/ChipDrawable?hl=zh-cn
点击事件的监听。
//使用了 kotlinx , 所以不需要 fingViewById。
chip_normal1.setOnClickListener {
Toast.makeText(mActivity, "Chip被点击了", Toast.LENGTH_SHORT).show()
}
Chip chip_normal=findViewById(R.id.chip_normal1);
chip_normal.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View view){
Toast.makeText(mActivity, "Chip被点击了", Toast.LENGTH_SHORT).show()
}
});
选中状态的监听。
注意:
chip_filter.setOnCheckedChangeListener { buttonView, isChecked ->
var hintStr = ""
if (isChecked) {
hintStr = "被选中了"
} else {
hintStr = "取消选中了"
}
Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
}
Chip chip = (Chip) findViewById(R.id.chip_filter);
chip.setOnCheckedChangeListener(new setOnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton view, boolean isChecked) {
String hintStr = ""
if (isChecked) {
hintStr = "被选中了"
} else {
hintStr = "取消选中了"
}
Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
}
});
关闭按钮被点击的监听
//关闭按钮的点击监听——closeIcon 没有id,所以必须需要构造匿名监听
chip_entry.setOnCloseIconClickListener {
Toast.makeText(mActivity, "ClostIcon被点击了", Toast.LENGTH_SHORT).show()
}
Chip chip = (Chip) findViewById(R.id.chip_entry);
chip.setOnCloseIconClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mActivity, "ClostIcon被点击了", Toast.LENGTH_SHORT).show()
}
});
假设我们让Chip所在的界面 实现了 onClickListener ,那么,为chip 设置点击监听时就可以直接调用 chip.setOnClickListener(this)。但是,如果此时也需要监听 CloseIcon 的点击事件,我们必须单独为 CloseIcon 构造一个匿名监听——因为:
CloseIcon 是直接通过画笔画出来的,没有id。在处理点击事件时,Chip的源码中实际是监听了触摸事件,根据触摸的位置判断 CloseIcon是否被点击了。相关源码如下:
public void setCloseIcon(@Nullable Drawable closeIcon) {
Drawable oldCloseIcon = this.getCloseIcon();
if (oldCloseIcon != closeIcon) {
float oldCloseIconWidth = this.calculateCloseIconWidth();
this.closeIcon = closeIcon != null ? DrawableCompat.wrap(closeIcon).mutate() : null;
float newCloseIconWidth = this.calculateCloseIconWidth();
this.unapplyChildDrawable(oldCloseIcon);
if (this.showsCloseIcon()) {
this.applyChildDrawable(this.closeIcon);
}
this.invalidateSelf();
if (oldCloseIconWidth != newCloseIconWidth) {
this.onSizeChange();
}
}
}
public boolean onTouchEvent(MotionEvent event) {
boolean handled = false;
int action = event.getActionMasked();
boolean eventInCloseIcon = this.getCloseIconTouchBounds().contains(event.getX(), event.getY());
switch(action) {
case 0:
if (eventInCloseIcon) {
this.setCloseIconPressed(true);
handled = true;
}
break;
case 1:
if (this.closeIconPressed) {
this.performCloseIconClick();
handled = true;
}
case 3:
this.setCloseIconPressed(false);
break;
case 2:
if (this.closeIconPressed) {
if (!eventInCloseIcon) {
this.setCloseIconPressed(false);
}
handled = true;
}
}
return handled || super.onTouchEvent(event);
}
与 RadioGroup 类似,ChipGroup 是用来管理多个Chip的 ,可以控制多个 chip 的布局方式以及事件。
使用 ChipGroup 可以方便的实现 流式布局效果。其特点如下:
属性名称 | 作用 |
---|---|
app:checkedChip | 初始选中的chip |
app:chipSpacing | Chip间的间距 |
app:chipSpacingHorizontal | Chip间的水平间距 |
app:chipSpacingVertical | Chip间的垂直间距 |
app:singleLine | 是否开启单行模式 |
app:singleSelection | 是否开启单选模式 |
注意:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="3、ChipGroup的使用——多行,多选" />
<!--ChipGroup 默认状态,会换行,可多选-->
<com.google.android.material.chip.ChipGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:chipSpacing="25dp"
app:chipSpacingHorizontal="35dp"
app:chipSpacingVertical="10dp">
<com.google.android.material.chip.Chip
android:id="@+id/chipInGroup1"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="chipInGroup1"
android:textAppearance="?android:textAppearanceMedium" />
<com.google.android.material.chip.Chip
android:id="@+id/chipInGroup2"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="chipInGroup2"
android:textAppearance="?android:textAppearanceMedium" />
<com.google.android.material.chip.Chip
android:id="@+id/chipInGroup3"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="chipInGroup3"
android:textAppearance="?android:textAppearanceMedium" />
</com.google.android.material.chip.ChipGroup>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="4、ChipGroup的使用——单行、单选" />
<!--ChipGroup 不换行,单选-->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<com.google.android.material.chip.ChipGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:checkedChip="@id/chipInGroup2_1"
app:chipSpacing="25dp"
app:singleLine="true"
app:singleSelection="true">
<com.google.android.material.chip.Chip
android:id="@+id/chipInGroup2_1"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="chipInGroup2——1"
android:textAppearance="?android:textAppearanceMedium" />
<com.google.android.material.chip.Chip
android:id="@+id/chipInGroup2_2"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="chipInGroup2——2"
android:textAppearance="?android:textAppearanceMedium" />
<com.google.android.material.chip.Chip
android:id="@+id/chipInGroup2_3"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="chipInGroup2——3"
android:textAppearance="?android:textAppearanceMedium" />
</com.google.android.material.chip.ChipGroup>
</HorizontalScrollView>
选中监听。 注意:只有 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()
}
ChipGroup chipGroup = (ChipGroup) findViewById(R.id.chipGroup2);
chipGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(ChipGroup group, @IdRes int checkedId) {
String hintStr=" ";
switch(checkedId){
case R.id.chipInGroup2_1:
hintStr = "被选中的是 chipInGroup2_1 ";
break;
case R.id.chipInGroup2_2 :
hintStr = "被选中的是 chipInGroup2_2 ";
break;
case R.id.chipInGroup2_3:
hintStr = "被选中的是 chipInGroup2_3 ";
break;
default:
hintStr = "没有选中任何chip";
break;
}
Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
}
});
获取被选中的 ChipId 注意:只有 singleSelction=true 时,该方法才有效。
示例代码省略。
继承自 Drawable。
注意事项:
<chip
xmlns:app="http://schemas.android.com/apk/res-auto"
app:chipIcon="@drawable/ic_avatar_circle_24"
android:text="@string/hello_world"/>
//直接以 Span的形式将 chipDrawable 加入到 EditText中,这样看着很好,但是,ChipDrawable 中clos额Icon的点击事件没法实现啊
bt_applyChip.setOnClickListener { view ->
val chipDrawable = ChipDrawable.createFromResource(mActivity, R.xml.chip_drawable_1)
val text = editText.text
val newInputText = text.substring(mPreSelectionEnd, text.length)
chipDrawable.setText(newInputText)
chipDrawable.setBounds(0, 0, chipDrawable.intrinsicWidth, chipDrawable.intrinsicHeight)
val span = ImageSpan(chipDrawable)
text.setSpan(span, mPreSelectionEnd, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
editText.setOnKeyListener(this)
mPreSelectionEnd = text.length
}
android:textAppearance 设置文字外观。
如“?android:attr/textAppearanceLargeInverse” 这里引用的是系统自带的一个外观,?表示系统是否有这种外观,否,则使用默认的外观。可设置的值如下:
https://developer.android.com/reference/com/google/android/material/animation/MotionSpec?hl=zh-cn
官方:
https://developer.android.com/reference/com/google/android/material/chip/Chip?hl=zh-cn
https://developer.android.com/reference/com/google/android/material/chip/ChipGroup#addview
含示例代码
https://material.io/develop/android/components/chip/
https://medium.com/material-design-in-action/chips-material-components-for-android-46001664a40f
其他Chip的实现
https://stackoverflow.com/questions/36563739/chips-component-in-android-support-library
引入支持库的参考:
https://stackoverflow.com/questions/50289355/google-material-design-library-error-program-type-already-present-android-suppo