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;}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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);

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

更多相关文章

随机推荐