1. 程式人生 > >ViewPager 指示器 實現聯動,自身滾動,支援型別 : 下滑線,三角形,全背景,圖片

ViewPager 指示器 實現聯動,自身滾動,支援型別 : 下滑線,三角形,全背景,圖片

RVPIndicator

專案地址:RuffianZhong/RVPIndicator 

簡介:ViewPager 指示器 實現聯動,自身滾動,支援型別 : 下滑線,三角形,全背景,圖片

更多:作者   提 Bug   

標籤:

viewpager-indicator-viewpager-indicator-miui-

歡迎使用 RVPIndicator

1.特點

簡單實用的 ViewPager 指示器 實現聯動,自身滾動。

高仿 MIUI 但更勝於 MIUI,提供多種指示器型別。支援型別 : 下滑線(可設定指示器高度),三角形,圖片

2.效果圖

 

3.屬性說明

開發者根據實際需要選擇使用對應的功能屬性

屬性 說明
text_color_normal 文字顏色 預設
text_color_selected 文字顏色 選中
text_size 文字大小
indicator_visible_count 螢幕可見指示器數量
indicator_color 指示器顏色
indicator_style 指示器樣式 { bitmap:圖片;line:下劃線;triangle:三角形 }
indicator_height 指示器高度
indicator_width 指示器寬度
style_bitmap_src 指示器圖片路徑 style=bitmap 有效
style_line_padding 指示器下劃線左右 padding style=line 有效

4.使用

4.1 Gradle (版本號根據更新歷史使用最新版)

compile 'com.ruffian.library:RVPIndicator:1.0.6'

4.2 XML 使用

   <com.ruffian.library.RVPIndicator
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="#ADD597"
    android:orientation="horizontal"

    //指示器顏色
    rvp:indicator_color="#ffffff"
    //指示器樣式
    rvp:indicator_style="triangle"
    //指示器可見數量
    rvp:indicator_visible_count="4"
    //指示器高度
    rvp:indicator_height="2dp"
    //指示器寬度
    rvp:indicator_widtht="20dp"

    //指示器圖片
    rvp:style_bitmap_src="@mipmap/ic_launcher"

    //線性指示器左右 padding
    rvp:style_line_padding="10dp"

    //文字預設顏色
    rvp:text_color_normal="#fb9090"
    //文字選中顏色
    rvp:text_color_selected="#FF0000"
    //文字大小
    rvp:text_size="20sp" />

4.3.1 程式碼呼叫(功能程式碼)

    // 設定 Tab 上的標題
    mIndicator.setTitleList(mList);

    // 設定關聯的 ViewPager
    mIndicator.setViewPager(mViewPager, 0);

    //設定 Adapter
    mViewPager.setAdapter(mAdapter);

4.3.2 程式碼呼叫(可選功能程式碼)

    //設定線性指示器左右 Padding
    mIndicator.setStyleLinePadding(10);
    //設定 title
    mIndicator.setTitle("哈哈哈", 1);
    mIndicator.setTitleList(mList);

    // Indicator 選中監聽
    mIndicator.setOnIndicatorSelected(new RVPIndicator.OnIndicatorSelected() {

        @Override
        public void setOnIndicatorSelected(int position, String title) {
            Log.w("TAG", "setOnIndicatorSelected");
        }
    });

    // PageChange 監聽
    mIndicator.setOnPageChangeListener(new RVPIndicator.PageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            Log.w("TAG", "onPageSelected");
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.w("TAG", "onPageScrolled");
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            Log.w("TAG", "onPageScrollStateChanged");
        }
    });

5.版本歷史

v1.0.6 2018.01.12 擴充套件指示器寬高均可設定,對各個模式有效

v1.0.5 2018.01.12 新增指示器寬度設定

v1.0.4 2017.11.10 新增指示器高度設定(line 模式有效,去除全背景模式,全背景效果通過設定指示器高度實現),修復 BUG #3

v1.0.3 2017.09.08 釋出正式版本