自定義標籤FlowTagLayout

Jet啟思發表於2018-08-11

為什麼寫這個庫？

專案中有時候會有這樣的需求，比如興趣愛好的選擇、搜尋歷史標籤等，自帶的Android控制元件實現起來賊麻煩，所以自己擼一個唄，當然前提是這個庫開發者必須用得簡潔高效，而且功能到位。

特點是什麼？

1、最基本的功能，標籤佈局並且自動換行。

2、自定義了各種styleable，在xml佈局檔案就可以設定tag的屬性。

3、可以單選、多選，這個全有開發者自由選擇，只要自己加background就完事。

4、最後一點，簡潔高效。

如何使用？

對，在使用之前看看效果，來，上效果圖

效果圖

首先，引入這個庫

這是GitHub地址自定義標籤佈局FloaTagLayout，原始碼專案裡面有，這篇文章暫不說該控制元件的原理，之後會出原始碼的分析。

gradle：

compile 'com.jetlee:FlowTagLayout:1.0.1'
複製程式碼

Maven：

<dependency>
  <groupId>com.jetlee</groupId>
  <artifactId>FlowTagLayout</artifactId>
  <version>1.0.1</version>
  <type>pom</type>
</dependency>
複製程式碼

把庫依賴到專案中後，在佈局中使用，並配置各種屬性

<com.jet.flowtaglayout.FlowTagLayout
    android:id="@+id/flowTagLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:item_leftMargin="8dp"  // tag的左外邊距
    app:item_rightMargin="8dp"  // tag的右外邊距
    app:item_topMargin="8dp"  // tag的上外邊距
    app:item_bottomMargin="8dp"  // tag的下外邊距
    app:item_leftPadding="12dp"  // tag的左內邊距
    app:item_rightPadding="12dp"  // tag的右內邊距
    app:item_topPadding="6dp"  // tag的上內邊距
    app:item_bottomPadding="6dp"  // tag的下內邊距
    app:item_background="@drawable/ripple_gray"  // tag的item背景效果
    app:item_textColor="#F25A25"  // tag的text顏色
    app:item_textSize="16sp"  // tag的text字型大小
    />
複製程式碼

下面列出FlowTagLayout的重要方法（注意，這些方法可以共用，也可以只用一種，看各自的需求）

先準備幾條資料，都是tag的label

List<String> dataList = new ArrayList<>();
dataList.add("資料結構");
dataList.add("演算法");
dataList.add("Java");
dataList.add("多執行緒程式設計");

// 新增tag
flowTagLayout.addTags(dataList);  // 新增tag的列表，該方法會把之前的tags全部清空
flowTagLayout.addTag("Kotlin");  // 在尾部新增一個tag
flowTagLayout.addTagOfIndex(2,"自定義view");  // 在指定的位置插入tag，示例為在index為2，也就是第三個位置插入tag

// 移除tag
flowTagLayout.removeTag();  // 移除尾部tag
flowTagLayout.removeTagOfIndex(3);  // 移除指定位置的tag，示例為移除index為3，也就是第四個tag移除
複製程式碼

最後就是繫結點選事件

flowTagLayout.setTagClickListener(new FlowTagLayout.OnTagClickListener() {
    @Override
    public void tagClick(int position) {
	// getChildAt(position)方法在這很實用
        flowTagLayout.getChildAt(position).setSelected(!flowTagLayout.getChildAt(position).isSelected());
    }
});
複製程式碼

這個庫的使用就是這麼簡單，喜歡的給個star唄，哈哈哈。

相關文章