底部tab欄、篩選菜單tab欄、頂部fragment切換tab欄 自定義

TabButton

GitHub首頁

tabButton自定義控件。

開發過程中，經常有底部tab欄、篩選菜單tab欄、頂部fragment切換tab欄、側邊欄菜單tab欄等等，每次都去寫一堆的view堆在一起，查閱修改都不友善，為此自己寫了一個tabButton。

支援橫向、縱向、單文字、單icon、文字顔色、文字位置、圖檔顔色、圖檔位置、水波紋、點選、長按等等均可自定義配置。

示例圖

0. 如何引入

0.1 根目錄下的build.gradle添加如下代碼

allprojects {
    repositories {
        google()
        jcenter()
        //添加下面這個maven配置
        maven{
            //這是maven倉庫位址
            url 'https://raw.githubusercontent.com/xintanggithub/maven/master'
        }
    }
}
           

0.2 需要使用的module下build.gradle添加引用

implementation "com.tson.utils.view:lib:1.0.5"
           

1. TabButton的使用

1.1 添加布局

<com.tson.utils.view.tab.TabButton
            android:id="@+id/tabButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#789789"
            app:tab_button_height="200dp"
            app:tab_button_icon_visible="true"
            app:tab_button_text_size="16sp"
            app:tab_button_text_visible="true"
            app:tab_dividing_line_visible="true"
            app:tab_gravity="1"
            app:tab_icon_text_interval="-8dp"
            app:tab_icon_text_model="1"
            app:tab_orientation="2" />

           

屬性說明

• tab_button_height TabButton高度
• tab_button_width TabButton寬度
• tab_button_icon_visible 是否顯示圖示
• tab_button_text_size 字型大小
• tab_button_text_visible 是否顯示文字标題
• tab_dividing_line_visible 是否顯示分割線

• tab_gravity 内部對齊方式

  1. center

  2. left

  3. right

  4. top

  5. bottom

• tab_icon_text_interval icon和text的間隔，大于0增加間隔，小于0減少間隔

• tab_icon_text_model 顯示模式

  1 文字在上 icon 在下

  2 文字在左 icon 在右

  3 文字在下 icon 在上

  4 文字在右 icon 在左

• tab_orientation 對齊方式

  1橫向

  2縱向

• tab_text_def_color 字型預設顔色
• tab_text_select_color 字型選擇顔色
• tab_icon_height icon高度
• tab_icon_width icon寬度
• foreground 水波紋，示例：app:foreground="@drawable/button_black"

1.2 使用

//預設icon數組
        val defIcon: MutableList<Int> = mutableListOf(
                R.drawable.ic_customer, R.drawable.ic_houses,
                R.drawable.ic_main, R.drawable.ic_mine
        )
        //選擇的icon數組
        val selectIcon: MutableList<Int> = mutableListOf(
                R.drawable.ic_customer_up, R.drawable.ic_house_up,
                R.drawable.ic_main_up, R.drawable.ic_mine_up
        )

        val a = mutableListOf<Button>()

        for (i in 0..3) {
            val button = Button()
            button.id = i
            //轉換為drawble
            button.defaultIcon = ContextCompat.getDrawable(this, defIcon[i])
            button.selectIcon = ContextCompat.getDrawable(this, selectIcon[i])
            //tab名稱
            button.name = "tab-$i"
            a.add(button)
        }
        //添加資料并顯示
        tabButton.bindData(0, a).initView()
        //綁定點選事件
        tabButton.setOnclickListener(onclick)


    val onclick = object : TabButtonListener() {
        override fun onclick(index: Int, button: Button?) {
            Toast.makeText([email protected], "onclick:: ${button?.name}", Toast.LENGTH_LONG).show()
        }

        override fun onLongClick(index: Int, button: Button?) {
            Toast.makeText([email protected], "onLongClick:: ${button?.name}", Toast.LENGTH_LONG).show()
        }
    }

           

1.3 方法說明

1.3.1 綁定tabButton資料

• List buttons：

  将需要展示的自定義參數以及标題icon等傳入

• defaultIndex：

  預設選擇位置

public TabButton bindData(int defaultIndex, @NonNull List<Button> buttons)
           

1.3.2 加載綁定的的資料

• 需要在bindData之後調用

public TabButton initView()
           

1.3.3 選中某一個tabButton

• index:

  tabButton的位置，下标

• initView完成之後調用

public void setIndex(int index)
           

1.3.4 替換某個tabButton

• index：

  同上描述

• Button：

  需要替換的參數以及标題icon等傳入

public void replace(int index, Button button)
           

1.3.5 删除某個tabButton

• index：

  需要删除button的位置

public void remove(int index)
           

1.3.6 添加一個tabButton到最後的位置

• 添加一個button，這裡預設是添加到最後一個

• Button:

  同上描述

public void addButton(Button button) 
           

1.3.7 添加一個tabButton到指定位置

• index：

  需要添加的button的位置，小于0時添加到第一個，大于目前存在最大位置時加入最後一個位置，其他情況添加到對應位置

• Button:

  同上描述

public void addButton(int index, Button button)
           

1.3.8 添加點選事件監聽

• 綁定監聽事件，包括點選 和 長按事件

public void setOnclickListener(TabButtonListener tabButtonListener)
           

• TabButtonListener 說明

public interface OnclickListener {

    /**
     * 點選事件回調
     *
     * @param index  點選的button位置
     * @param button button資料
     */
    void onclick(int index, Button button);

    /**
     * 長按事件回調
     *
     * @param index  點選的button位置
     * @param button button資料
     */
    void onLongClick(int index, Button button);

}