1. 簡介 

本文將記錄的是一些有效的自定義指示器demo，誠然Indicator的開源框架還是比較多的，我們在具體具體中可以衡量。一些簡單的自定義基礎還是有必要好好掌握的。

2. demo樣例

2.1 圖片背景選擇+ViewPager樣式

首先看下效果吧：

如下圖所示，可以滑動viewPager來滑動頭部的指示器；也可以通過點選指示器來選擇不同的介面

具體實現：

首先就是佈局咯：和 tabLayout+ViewPager的形式是一樣的佈局

<?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=".indicator.IndicatorOneActivity">
        <LinearLayout
            android:layout_gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="#ffce3d3a">

            <ImageView
                android:id="@+id/iv_title_gank"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/titlebar_disco" />

            <ImageView
                android:id="@+id/iv_title_one"
                android:layout_width="55dp"
                android:layout_height="match_parent"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/titlebar_music" />

            <ImageView
                android:id="@+id/iv_title_dou"
                android:layout_width="55dp"
                android:layout_height="match_parent"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/titlebar_friends" />

        </LinearLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:descendantFocusability="blocksDescendants"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v4.view.ViewPager>
    <!-- android:descendantFocusability="blocksDescendants"
         解決滑動衝突的
    -->
</LinearLayout>
 

單個imageView的指示器背景佈局如下：stateListDrawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/titlebar_music_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/titlebar_music_normal" android:state_selected="false"/>
    <item android:drawable="@drawable/titlebar_music_normal" android:state_pressed="false"/>
</selector>
 

activity中的核心程式碼如下：

    // 設定點選事件 --- 改變之前判斷是否被選中了---
    private void setListener() {
        ivGank.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //不然cpu會有損耗
                if (mViewPager.getCurrentItem() != 0) {
                    ivGank.setSelected(true);
                    ivBook.setSelected(false);
                    ivMe.setSelected(false);
                    mViewPager.setCurrentItem(0);
                }
            }
        });

        ivBook.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //不然cpu會有損耗
                if (mViewPager.getCurrentItem() != 1) {
                    ivGank.setSelected(false);
                    ivBook.setSelected(true);
                    ivMe.setSelected(false);
                    mViewPager.setCurrentItem(1);
                }
            }
        });

        ivMe.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //不然cpu會有損耗
                if (mViewPager.getCurrentItem() != 2) {
                    ivGank.setSelected(false);
                    ivBook.setSelected(false);
                    ivMe.setSelected(true);
                    mViewPager.setCurrentItem(2);
                }
            }
        });
    }

    private void setViewPager() {
        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(new GankFragment());
        fragments.add(new GankFragment());
        fragments.add(new MeFragment());
        mViewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),fragments));
        mViewPager.setOffscreenPageLimit(2);
        // 設定viewpage滑動監聽 ---- 當滑到某個介面時 標題背景改變
        mViewPager.addOnPageChangeListener(this);
        // 設定預設選中第一個 通過選中的背景設定切換
        ivGank.setSelected(true);
        mViewPager.setCurrentItem(0);
    }
 

還是很easy的，因為我們接觸的專案有可能TabLayout不能滿足我們的需求，這時候可以去GitHub上找輪子，也可以自己來定義View，也算是一種積累吧。總之 viewPager這一元件講真還是特別重要的，有必要好好的學習下。

2.2 RadioGroup樣例

可以觀察下效果：

    <RadioGroup
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal"
        android:id="@+id/radioGroup"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/rb1"
            android:padding="8dp"
            android:button="@null"
            android:text="貢獻周榜"
            android:background="@drawable/drawable_selector_left"
            android:textColor="@color/text_radio_color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/rb2"
            android:padding="8dp"
            android:button="@null"
            android:text="貢獻總榜"
            android:background="@drawable/drawable_selector_right"
            android:textColor="@color/text_radio_color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RadioGroup>

text_radio_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#000000" android:state_checked="false" />
    <item android:color="#00ff00" android:state_checked="true" />
</selector>

drawable_selector_right.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/drawable_right_selected_true"/>
    <item android:state_checked="false" android:drawable="@drawable/drawable_right_selected_false"/>
</selector>

<!--false -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid
        android:color="#ffffff"/>
    <corners
        android:topRightRadius="5dp"
        android:bottomRightRadius="5dp"/>

</shape>

<!--true-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid
        android:color="#ff0000"/>
    <corners
        android:topRightRadius="5dp"
        android:bottomRightRadius="5dp"/>

</shape>