今天在学习Material Design的时候得知了ChipsInput这个开源项目，这个开源项目非常强大且好用，它的功能如下动图 ，项目地址是：https://github.com/pchmn/MaterialChipsInput
下面开始记录如何使用
- 先准备一些数据，主要是图片和标签上了文字，这里我随便的找了些图片和随便写了些文字
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="peopleName">
<item>小宝</item>
<item>小白</item>
<item>小张</item>
<item>小李</item>
<item>saber</item>
<item>小王</item>
<item>小杠</item>
</array>
<array name="peopleImage">
<item>@drawable/ic_22</item>
<item>@drawable/ic_22_hide</item>
<item>@drawable/ic_33</item>
<item>@drawable/ic_33_hide</item>
<item>@drawable/ic_attention_22</item>
<item>@drawable/ic_attention_33</item>
<item>@drawable/ic_empty_cute_girl_box</item>
</array>
</resources>
上面数据放在vaules目录的arrays.xml文件中，就不用在代码中写数组这么麻烦了。
- 创建一个类继承ChipInterface这个接口并实现里面的方法或者直接使用它提供的Chip这个类，这个类里面getLabel()必须返回一个字符串，否者这就是个普通输入框，联想功能就是根据这个返回的值查找的。其他都可以返回null，getAvatarDrawable()返回null它会用首字母生产一张图片
package com.example.hp_pc.testapplication.bean;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import com.pchmn.materialchips.model.ChipInterface;
public class ContantChip implements ChipInterface {
public int id;
public Drawable peopleImage;
public String peopleName;
public String peopleInfo;
@Override
public Object getId() {
return id;
}
@Override
public Uri getAvatarUri() {
return null;
}
@Override
public Drawable getAvatarDrawable() {
return null;
}
@Override
public String getLabel() {
return peopleName;
}
@Override
public String getInfo() {
return peopleInfo;
}
}
3.在布局文件加入，在代码中找到并设置数据
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".view.activity.Main2Activity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="@layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="To"
android:gravity="center"
android:minHeight="?attr/actionBarSize"
android:layout_marginLeft="18dp"
android:layout_marginRight="18dp"
android:textColor="@color/grey_60"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.pchmn.materialchips.ChipsInput
android:id="@+id/ci_main2"
android:layout_width="0dp"
android:layout_weight="1"
app:maxRows="3"
android:layout_height="wrap_content"/>
<ImageButton
android:background="?attr/selectableItemBackgroundBorderless"
android:src="@drawable/ic_contact"
android:tint="@color/colorAccent"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize" />
</LinearLayout>
<View
android:background="@color/grey_10"
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>
ChipsInput的更多其他属性在这里
package com.example.hp_pc.testapplication.view.activity;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import com.example.hp_pc.testapplication.R;
import com.example.hp_pc.testapplication.bean.ContantChip;
import com.pchmn.materialchips.ChipsInput;
import com.pchmn.materialchips.model.Chip;
import com.pchmn.materialchips.model.ChipInterface;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
public class Main2Activity extends AppCompatActivity {
@BindView(R.id.tb_main)
Toolbar mToolbar;
@BindView(R.id.ci_main2)
ChipsInput mChipsInput;
private List<ChipInterface> mChips;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
ButterKnife.bind(this);
initTollBar();
initCompoment();
}
private void initCompoment() {
initData();
mChipsInput.setFilterableList(mChips);
}
private void initData() {
mChips = new ArrayList<>();
TypedArray peopleImage = getResources().obtainTypedArray(R.array.peopleImage);
String[] peopleNames = getResources().getStringArray(R.array.peopleName);
for (int i = 0; i < peopleImage.length(); i++) {
ContantChip contantChip = new ContantChip();
contantChip.id = i;
contantChip.peopleName = peopleNames[i];
contantChip.peopleImage = ContextCompat.getDrawable(this, peopleImage.getResourceId(i, -1));
contantChip.peopleInfo = peopleNames[i] + "@gmail.com";
mChips.add(contantChip);
}
}
private void initTollBar() {
mToolbar.setTitle("Base");
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("Base");
}
}
好，运行一下，没毛病，很简单
下面说一下bug，我发现有两个
- 是这个显示详情的不能取消，但是我看了样例apk可以取消，不知什么问题。只能在xml加入
app:showChipDetailed="false"这个属性让它不显示 - 如果标签只有一个的话显示详情的删除按钮快速连续按两下会抛数组越界异常，这个问题出现在ChipsAdapter类的removeChip(int position)方法中，这里贴上源码
public void removeChip(int position) {
ChipInterface chip = mChipList.get(position);
// remove contact
mChipList.remove(position);
// notify listener
mChipsInput.onChipRemoved(chip, mChipList.size());
// if 0 chip
if (mChipList.size() == 0)
mEditText.setHint(mHintLabel);
// refresh data
notifyDataSetChanged();
}
问题解决很简单，只要加个mChipList的判断就行了，在开头加上if(mChipList.size == 0) return;不过要下载源码修改。
最近在慢慢学习Kotlin，感觉未来招聘会Kotlin是最基本的门槛了。