Android 自定义viewpager选中点

最近在做项目中多个页面都使用到了viewpager，因为在每个viewpager中都使用到了viewpager当前页的选中点，所在在这里将该选中点功能抽出来作为一个自定义控件，方便复用。

效果图如下：

首先，自定义一个类DotsRadioGroup继承自RadioGroup，代码如下：

import com.yesway.ycarstore.acura.R;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;

/**
 * 指示点
 * 
 * @author zhangke
 */
public class DotsRadioGroup extends RadioGroup implements OnPageChangeListener {

/**
 * 上下文
 */
private Context mContext;
/**
 * 关联的Viewpager
 */
private ViewPager mVPContent;

/**
 * 当前显示指示点
 */
private int mPosition;

/**
 * 指示点集合
 */
private RadioButton[] mDotsButton;

/**
 * 构造方法
 * 
 * @param context   上下文
 */
public DotsRadioGroup(Context context) {
super(context, null);
}

/**
 * 构造方法
 * @param context   上下文
 * @param attrs
 */
public DotsRadioGroup(Context context, AttributeSet attrs) {
super(context, attrs);
        // 将上下文赋值给当前类
this.mContext = context;
}

@Override
public void onPageScrollStateChanged(int arg0) {

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int position) {
mPosition = position;
if (mDotsButton != null) {
for (int i = 0; i < mDotsButton.length; i++) {
boolean isChecked = i == mPosition ? true : false;
mDotsButton[i].setChecked(isChecked);
}
}
};

/**
 * 获得该位置
 * 
 * @return
 */
public int getmPosition() {
return mPosition;
}

/**
 * 关联Viewpager并初始化指示点
 * 
 * @author zhangke
 * @Date 2015-9-25
 * @param viewPager
 * @param pageCount
 */
public void setDotView(ViewPager viewPager, int pageCount) {
if (pageCount < 2) {
setVisibility(View.GONE);
return;
}
// 清理所有的点
setVisibility(View.VISIBLE);
removeAllViews();
mDotsButton = new RadioButton[pageCount];
this.mVPContent = viewPager;
mVPContent.setOnPageChangeListener(this);
// 设置属性
RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.setMargins(10, 0, 10, 0);
params.gravity = Gravity.CENTER;

RadioButton radioButton = null;
for (int i = 0; i < pageCount; i++) {
radioButton = new RadioButton(mContext);
radioButton.setButtonDrawable(R.drawable.selector_dots);
radioButton.setLayoutParams(params);
radioButton.setClickable(false);
addView(radioButton, params);
mDotsButton[i] = radioButton;
}

// 第一个默认选中
mDotsButton[0].setChecked(true);
}

}

对于该控件需要自定义一个selector_dots.xml的文件，并将该文件放入到res/drawable文件夹下，如下：

<?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="oval">
            <solid android:color="@color/blue" />
            <size android:height="7dp" android:width="7dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#343434" />
            <size android:height="7dp" android:width="7dp" />
        </shape>
    </item>

</selector>

在布局文件中使用该指示点控件，

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:gravity="center" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:paddingTop="@dimen/vp_padding_top_size" >
    </android.support.v4.view.ViewPager>

    <com.yesway.ycarstore.acura.ui.DotsRadioGroup
        android:id="@+id/drg_dots"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible" />

</RelativeLayout>

在代码中关联该控件的viewpager

//第一个参数viewpager，第二个参数显示的总页数
mDrgDots.setDotView(mVpContent, mPageCount);

这样就可以重复再项目中使用该控件了