MaterialChipsInput

介绍：

这个库实现了Material Design中的Chips component ，分为可编辑的ChipsInput和ChipView。

运行效果：

使用说明：

Demo

Download sample-v1.0.1.apk

Live demo on appetize.io

minSdkVersion 必须 >= 15.

在项目的build.gradle文件中添加 :

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

在 app 的 build.gradle文件中添加 :

dependencies {
    compile 'com.github.pchmn:MaterialChipsInput:1.0.1'
}

ChipsInput

这个view实现了Material Design中的Contact chips component。

它由一系列ChipView和EditText组成。点击一个chip可以打开详情视图（如果没有禁止的话）

不过这些都是可以自定义的，所以你也可以在非联系人场景中使用ChipsInput。

XML

在布局中使用默认配置的ChipsInput视图：

<com.pchmn.materialchips.ChipsInput
        android:id="@+id/chips_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hint="Enter a name" />

你也可以自定义t (查看 所有属性) :

<com.pchmn.materialchips.ChipsInput
        android:id="@+id/chips_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hint="Enter a name"
        app:hintColor="@color/customColor"
        app:textColor="@color/customColor"
        app:maxRows="3"
        app:chip_labelColor="@color/customColor"
        app:chip_hasAvatarIcon="true"
        app:chip_backgroundColor="@color/customColor"
        app:chip_deletable="false"
        app:chip_deleteIconColor="@color/customColor"
        app:chip_detailed_textColor="@color/customColor"
        app:chip_detailed_backgroundColor="@color/customColor"
        app:chip_detailed_deleteIconColor="@color/customColor"
        app:filterable_list_backgroundColor="@color/customColor"
        app:filterable_list_textColor="@color/customColor" />

建议

你可以把一个List<? extends ChipInterface> 对象作为输入提示传递给ChipsInput，这样就可以像一个MultiAutoCompleteTextView那样工作：

1. 创建一个实现了ChipInterface的类 (或者直接使用library中的chip类) :

public class ContactChip implements ChipInterface {
    ...
}

2. 然后在你的activity中，创建一个ContactChip或者Chip的列表，并传递给ChipsInput  view：

// get ChipsInput view
ChipsInput chipsInput = (ChipsInput) findViewById(R.id.chips_input);
// build the ContactChip list
List<ContactChip> contactList = new ArrayList<>();
contactList.add(new ContactChip()); 
...
// pass the ContactChip list
chipsInput.setFilterableList(contactList);

获得选中的列表

如果需要的话，你也可以获得当前用户已经选中的chips列表：

// get the list
List<ContactChip> contactsSelected = (List<ContactChip>) chipsInput.getSelectedChipList();

高级用法

ChipsListener

ChipsInput提供了一个listener来和输入交互：

chipsInput.addChipsListener(new ChipsInput.ChipsListener() {
            @Override
            public void onChipAdded(ChipInterface chip, int newSize) {
                // chip added
                // newSize is the size of the updated selected chip list
            }
            @Override
            public void onChipRemoved(ChipInterface chip, int newSize) {
                // chip removed
                // newSize is the size of the updated selected chip list
            }
            @Override
            public void onTextChanged(CharSequence text) {
                // text changed
            }
        });

手动添加和删除chips

你不是一定要为ChipsInput传入 List<? extends ChipInterface>，也可以手动触发。借助于ChipsListener你可以在用户输入的时候监听到输入变化，然后根据自己的业务处理。

ChipsInput chipsInput = (ChipsInput) findViewById(R.id.chips_input);

添加一个chip

有多种实现方法：

chipsInput.addChip(ChipInterface chip);
// or
chipsInput.addChip(Object id, Drawable icon, String label, String info);
// or
chipsInput.addChip(Drawable icon, String label, String info);
// or
chipsInput.addChip(Object id, Uri iconUri, String label, String info);
// or
chipsInput.addChip(Uri iconUri, String label, String info);
// or
chipsInput.addChip(String label, String info);

删除一个chip

也有多种实现方法：

chipsInput.removeChip(ChipInterface chip);
// or
chipsInput.removeChipById(Object id);
// or
chipsInput.removeChipByLabel(String label);
// or
chipsInput.removeChipByInfo(String info);

当你添加或者删除chip的时候ChipsListener将被触发。

获得选中的列表

当你想获得用户当前选中的列表：

// get the list
List<ChipInterface> contactsSelected = chipsInput.getSelectedChipList();

ChipsInput 属性

Attribute	Type	Description	Default
app:hint	string	Hint of the input when there is no chip	null
app:hintColor	color	Hint color	android default
app:textColor	color	Text color when user types	android default
app:maxRows	int	Max rows of chips	2
app:chip_labelColor	color	Label color of the chips	android default
app:chip_hasAvatarIcon	boolean	Whether the chips have avatar icon or not	true
app:chip_deletable	boolean	Whether the chips are deletable (delete icon) or not	false
app:chip_deleteIconColor	color	Delete icon color of the chips	white/black
app:chip_backgroundColor	color	Background color of the chips	grey
app:showChipDetailed	boolean	Whether to show full detailed view or not when touching a chip	true
app:chip_detailed_textColor	color	Full detailed view text color	white/balck
app:chip_detailed_backgroundColor	color	Background color of the full detailed view	colorAccent
app:chip_detailed_deleteIconColor	color	Delete icon color of the full detailed view	white/black
app:filterable_list_backgroundColor	color	Background color of the filterable list of suggestions	white
app:filterable_list_textColor	color	Text color of the filterable list of suggestions	black

ChipView

这个视图实现了Material Design guidelines 中的chip component。

用法

<com.pchmn.materialchips.ChipView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:label="Chip 1" />
            
<com.pchmn.materialchips.ChipView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:label="Chip 4"
                app:hasAvatarIcon="true" />
<com.pchmn.materialchips.ChipView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:label="Chip 6"
                app:labelColor="@android:color/white"
                app:avatarIcon="@drawable/avatar"
                app:backgroundColor="@android:color/holo_blue_light"
                app:deletable="true"
                app:deleteIconColor="@android:color/white" />

ChipView 属性

Attribute	Type	Description	Default
app:label	string	Label of the chip	null
app:labelColor	color	Label color of the chip	android default
app:hasAvatarIcon	boolean	Whether the chip has avatar icon or not	false
app:avatarIcon	drawable	Avatar icon resource	null
app:deletable	boolean	Whether the chip is deletable (delete icon) or not	false
app:deleteIconColor	color	Delete icon color of the chip	grey
app:backgroundColor	color	Background color of the chip	grey

Listeners

ChipView chip = (ChipView) findViewById(R.id.chip_view);

On chip click listener :

chip.setOnChipClicked(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // handle click    
    }
});

On delete button click listener :

chip.setOnDeleteClicked(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // handle click     
    }
});

Sample

A sample app with some use cases of the library is available on this link

You can also download the sample APK here