自定義標籤多選更改背景圖片
阿新 • • 發佈：2019-01-26
最近在做專案時候遇到了標籤佈局問題，當時我首選的是用流式佈局TagFlowLayout的控制元件，可是發現不能滿足我專案的需求，於是翻看了一下網頁寫了一個用配合ChekBox來實現多選標籤的佈局，在這寫出來，希望對其他夥伴們有些幫助！
需取效果：
首先：我們需要一個實體類TagBean，確保有id，和name（顯示的內容）
public class TagBean {
private String id;
private String name;
public void setId(String id) {
this.id = id;
}
public 然後就可以寫我們的自定義佈局了，重寫ViewGroup，採用onDraw，onMeasure，onLayout等方法類似於流式佈局，熟悉流式佈局的小夥伴應該so easy，這裡就不說太多了，直接上程式碼：
public class LabelLayout extends ViewGroup {
private int mMaxCheckCount = Integer.MAX_VALUE;
/**
* 豎直方向間距, default is 8.0dp.
*/
private int horizontalSpacing;
/**
* 水平方向間距, default is 4.0dp.
*/
private int verticalSpacing;
//whether or not to draw the divider between labels at horizon. 上面是佈局類程式碼我全展示出來，
還有就是xml檔案的程式碼：
ChekBox的：
<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_margin="10dp"
android:background="@drawable/label_selector"
android:button="@null"
android:paddingBottom="4dp"
android:paddingLeft="13dp"
android:paddingRight="13dp"
android:paddingTop="4dp"
android:text="hello"
android:textColor="@drawable/label_gray_selector"
android:textSize="16sp" />背景選中效果程式碼：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="6dp" />
<solid android:color="#fff" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="6dp" />
<stroke android:width="1dp" android:color="#fff" />
</shape>
</item>
</selector>字型選中效果：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FF9400" android:state_checked="true" />
<item android:color="#434343" />
</selector>主佈局 ：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:orientation="vertical"
tools:context="com.example.l.tag_label.MainActivity">
<com.example.l.tag_label.LabelLayout
android:id="@+id/label_me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
>
</com.example.l.tag_label.LabelLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="bt"
android:text="點選"/>
</LinearLayout>
然後就是activity中的程式碼了，
首先新增資料：
private ArrayList<TagBean> initList() {
ArrayList<TagBean> list = new ArrayList<>();
for (int i = 0; i < 8; i++) {
TagBean bean = new TagBean(i + "", "hello" + i);
list.add(bean);
}
return list;
}然後再把資料傳過去，
tab.setLabels(list);// 設定資料
tab.setMaxCheckCount(4);// 設定最大選中數量
// 點選選中取消監聽
tab.setOnCheckChangedListener(new LabelLayout.OnCheckChangeListener() {
@Override
public void onCheckChanged(TagBean label, boolean isChecked) {
String name = label.getName();
Toast.makeText(MainActivity.this, isChecked + "==" + name, Toast.LENGTH_SHORT).show();
Log.d("dd", name + "");
// 在這塊可以自己寫個集合儲存一下
if (isChecked)
name_liat.add(name);
else
name_liat.remove(name);
}
@Override
public void onBeyondMaxCheckCount() {
}
});最後執行自己的button按鈕監聽方法就可以把集合裡面的東西拿出來了。
public void bt(View view) {
for (int i = 0; i <name_liat.size() ; i++) {
Log.d("ee", name_liat.get(i).toString() + "");
}
}寫的夠詳細，簡單了！如果感覺有幫助，請點贊！！^_^
效果圖：
