实现效果

上述效果使用了ViewPager+自制的PageNumberView实现的。下面来介绍一下具体实现：

首先是布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:orientation="horizontal"><Buttonandroid:id="@+id/btPrevPage"android:layout_width="80dp"android:layout_height="40dp"android:background="@drawable/page_number_selector_btn"android:text="上一页" /><Buttonandroid:id="@+id/btFirstPage"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:background="@drawable/page_number_selector_btn"android:text="首页" /><RadioGroupandroid:id="@+id/rgPageNumber"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rbFirst"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/page_number_selector_radiobutton"android:button="@null"android:gravity="center"android:text="1" /><RadioButtonandroid:id="@+id/rbSecond"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:background="@drawable/page_number_selector_radiobutton"android:button="@null"android:gravity="center"android:text="2" /><RadioButtonandroid:id="@+id/rbThird"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:background="@drawable/page_number_selector_radiobutton"android:button="@null"android:gravity="center"android:text="3" /><RadioButtonandroid:id="@+id/rbFourth"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:background="@drawable/page_number_selector_radiobutton"android:button="@null"android:gravity="center"android:text="4" /><RadioButtonandroid:id="@+id/rbFifth"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:background="@drawable/page_number_selector_radiobutton"android:button="@null"android:gravity="center"android:text="5" /></RadioGroup><Buttonandroid:id="@+id/btLastPage"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:background="@drawable/page_number_selector_btn"android:text="末页" /><Buttonandroid:id="@+id/btNextPage"android:layout_width="80dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:background="@drawable/page_number_selector_btn"android:text="下一页" /></LinearLayout>

布局采用了RadioButton来显示页码，最多显示5页。（Button与RadioButton都采用了自定义样式。）

再来看一下PageNumberView代码

public class PageNumberView extends RelativeLayout{private Context  mContext;private Button mPrevPage;private Button mFirstPage;private RadioGroup mPageNumber;private Button mLastPage;private Button mNextPage;private RadioButton mFirst;private RadioButton mSecond;private RadioButton mThird;private RadioButton mFourth;private RadioButton mFifth;public int mTotalPages;                        //总页数private int mCurrentPageNum;                   //当前选中的RadioButton展示的页码private boolean isHandCheck = true;           //是否是手动切换按钮 默认是public ViewPager mViewPager;                 //与之绑定的ViewPagerpublic PageNumberView(Context context) {super(context);mContext = context;initLayout(mContext);}public PageNumberView(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;initLayout(mContext);}/*** 加载自定义布局的地方* @param context*/private void initLayout(Context context) {mContext = context;LayoutInflater inflater = (LayoutInflater)  mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);View viewRoot = inflater.inflate(R.layout.page_number_layout, this);initPageNumView(viewRoot);}/*** 初始化各控件的地方* @param v*/private void initPageNumView(View v) {mPrevPage = (Button) v.findViewById(R.id.btPrevPage);mFirstPage = (Button) v.findViewById(R.id.btFirstPage);mPageNumber = (RadioGroup) v.findViewById(R.id.rgPageNumber);mLastPage = (Button) v.findViewById(R.id.btLastPage);mNextPage = (Button) v.findViewById(R.id.btNextPage);mFirst = (RadioButton) v.findViewById(R.id.rbFirst);mSecond = (RadioButton) v.findViewById(R.id.rbSecond);mThird = (RadioButton) v.findViewById(R.id.rbThird);mFourth = (RadioButton) v.findViewById(R.id.rbFourth);mFifth = (RadioButton) v.findViewById(R.id.rbFifth);initRadioGruop();mPrevPage.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (mFirst.isChecked()){}else if (mSecond.isChecked()){mFirst.setChecked(true);}else if (mThird.isChecked()){mSecond.setChecked(true);}else if(mFourth.isChecked()){mThird.setChecked(true);}else if(mFifth.isChecked()){mFourth.setChecked(true);}}});mFirstPage.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {setRadioButtonText(1);mViewPager.setCurrentItem(0,false);mFirst.setChecked(true);}});mNextPage.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (mFirst.isChecked()){mSecond.setChecked(true);}else if (mSecond.isChecked()){mThird.setChecked(true);}else if (mThird.isChecked()){mFourth.setChecked(true);}else if(mFourth.isChecked()){mFifth.setChecked(true);}else if(mFifth.isChecked()){
//                    mFirst.setChecked(true);}}});mLastPage.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {setRadioButtonText(mTotalPages-4);mViewPager.setCurrentItem(mTotalPages-1,false);mFifth.setChecked(true);}});}private void initRadioGruop(){//默认的RadioButton显示mFirst.setChecked(true);                                      //默认第一页被选中setRadioButtonText(1);mPageNumber.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {if (mViewPager != null){if (mTotalPages <= 5){switch (checkedId){case R.id.rbFirst:if (isHandCheck)mViewPager.setCurrentItem(0,false);break;case R.id.rbSecond:if (isHandCheck)mViewPager.setCurrentItem(1,false);break;case R.id.rbThird:if (isHandCheck)mViewPager.setCurrentItem(2,false);break;case R.id.rbFourth:if (isHandCheck)mViewPager.setCurrentItem(3,false);break;case R.id.rbFifth:if (isHandCheck)mViewPager.setCurrentItem(4,false);break;default:break;}}else {switch (checkedId){case R.id.rbFirst:if (isHandCheck){mCurrentPageNum = Integer.parseInt(mFirst.getText().toString());updatePadioButtonText(mCurrentPageNum);mViewPager.setCurrentItem(mCurrentPageNum-1,false);}break;case R.id.rbSecond:mCurrentPageNum = Integer.parseInt(mSecond.getText().toString());updatePadioButtonText(mCurrentPageNum);mViewPager.setCurrentItem(mCurrentPageNum-1,false);break;case R.id.rbThird:if (isHandCheck){mCurrentPageNum = Integer.parseInt(mThird.getText().toString());updatePadioButtonText(mCurrentPageNum);mViewPager.setCurrentItem(mCurrentPageNum-1,false);}break;case R.id.rbFourth:mCurrentPageNum = Integer.parseInt(mFourth.getText().toString());updatePadioButtonText(mCurrentPageNum);mViewPager.setCurrentItem(mCurrentPageNum-1,false);break;case R.id.rbFifth:mCurrentPageNum = Integer.parseInt(mFifth.getText().toString());updatePadioButtonText(mCurrentPageNum);mViewPager.setCurrentItem(mCurrentPageNum-1,false);break;default:break;}}}}});}/*** 给外界提供绑定ViewPager的方法*/public void setViewPager(ViewPager viewPager){this.mViewPager = viewPager;}/*** 给外界提供设置页码总数的方法* @param totalPages*/public void setmTotalPages(int totalPages){this.mTotalPages = totalPages;updatePageNum();}/*** 根据总页数更新页码显示状况*/private void updatePageNum(){if (mTotalPages <= 5){setPageNubRadioButton(mTotalPages);}else {setPageNubRadioButton(5);}}/*** 控制显示页码的RadioButton显示个数*/private void setPageNubRadioButton(int pageNum){if (pageNum == 1){mFirst.setVisibility(View.VISIBLE);mSecond.setVisibility(View.GONE);mThird.setVisibility(View.GONE);mFourth.setVisibility(View.GONE);mFifth.setVisibility(View.GONE);}else if (pageNum == 2){mFirst.setVisibility(View.VISIBLE);mSecond.setVisibility(View.VISIBLE);mThird.setVisibility(View.GONE);mFourth.setVisibility(View.GONE);mFifth.setVisibility(View.GONE);}else if (pageNum == 3){mFirst.setVisibility(View.VISIBLE);mSecond.setVisibility(View.VISIBLE);mThird.setVisibility(View.VISIBLE);mFourth.setVisibility(View.GONE);mFifth.setVisibility(View.GONE);}else if (pageNum == 4){mFirst.setVisibility(View.VISIBLE);mSecond.setVisibility(View.VISIBLE);mThird.setVisibility(View.VISIBLE);mFourth.setVisibility(View.VISIBLE);mFifth.setVisibility(View.GONE);}else if (pageNum == 5){mFirst.setVisibility(View.VISIBLE);mSecond.setVisibility(View.VISIBLE);mThird.setVisibility(View.VISIBLE);mFourth.setVisibility(View.VISIBLE);mFifth.setVisibility(View.VISIBLE);}}/*** RadioButton的Text设置* @param first*/private void setRadioButtonText(int first){mFirst.setText(first+"");mSecond.setText(first + 1 +"");mThird.setText(first + 2 +"");mFourth.setText(first + 3 +"");mFifth.setText(first + 4 +"");}/*** 更新RadioButton的Text设置*/private void updatePadioButtonText(int currentPageNum){if (currentPageNum+2 <= mTotalPages && currentPageNum-2 >= 1){setRadioButtonText(currentPageNum-2);isHandCheck = false;mThird.setChecked(true);isHandCheck = true;}else if (currentPageNum == mTotalPages){setRadioButtonText(currentPageNum-4);}else if (currentPageNum+1 == mTotalPages){setRadioButtonText(currentPageNum-3);}else if (currentPageNum == 1){setRadioButtonText(1);}else if (currentPageNum == 2){setRadioButtonText(1);}else {setRadioButtonText(1);}}
}

使用时与ViewPager一起使用

    <LinearLayoutandroid:id="@+id/llCourseTitle"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentStart="true"><com.chy.videotutorial.MyWiew.NoSlideViewPagerandroid:id="@+id/vpCourseTitlePaging"android:layout_width="match_parent"android:layout_height="400dp" /><com.chy.videotutorial.MyWiew.PageNumberViewandroid:id="@+id/courseTitlePageNumberView"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>

NoSlideViewPager是禁止滑动的ViewPager。使用原生的ViewPager亦可，不过这里没有添加ViewPager滑动时页码切换的逻辑。

使用时通过setViewPager(viewPager)，与setmTotalPages(totallPages) 让PageNumberView绑定相应的ViewPager并获取ViewPager页数即可。

ps:上述的展示布局是运行在横屏的平板上的。

自定义页码显示控件PageNumberView相关推荐

Qt 自定义信号强度显示控件
效果图 QWidget自定义信号强度显示控件,比较简单,适合初学者. 主要就是继承于QWidget, 重写paintEvent以绘制: 源码如下: signalwidget.h #ifndef SIG ...
android lrc 歌词view,自定义View强势来袭，用自定义View实现歌词显示控件下篇之自定义LyricView的实现...
在上篇中,我与大家分享了关于如何进行*.lrc歌词文件的解析,以及将解析完成后的歌词展示在镶嵌在ScrollView中的TextView上,就这样而言,一个简单的歌词显示功能也就实现了. 但是,如何才 ...
自定义LyricView实现歌词显示控件
声明:本博客转载自郭霖微信公众号,优秀博客值得多次转播. 地址http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650236950&a ...
Android歌词显示控件TextView自定义
1. 音乐播放,音乐播放,音乐播放放入服务中,那么App 退入后台音乐也可以播放 2. 歌词显示控件TextView自定义: 使用控件TextView, 为什么不用Listview,歌词不可以 ...
Angular19 自定义表单控件
1 需求当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
C# Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面...
个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...
自定义工作流任务控件
读moss sdk中的自定义工作流任务控件. 自定义工作流任务控件:任务的创建,修改,删除,完成于一体,同时定义了这四个动作的历史纪录. 自定义时封装属性: 1. 封装任务属性 IsTaskComp ...
自定义控件：等比例显示控件RatioLayout
我们经常碰到服务器返回的图片比例大小是一样的,但是分辨力却是不一样的.这时候,就会遇到显示效果的问题.例如,图1和图2都是宽高比例相等,但是分辨率大小不一样的图片,应该按照比例显示,使用等比例显示控件 ...
Winform中实现自定义水晶按钮控件(附代码下载)
场景效果注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现新建一个用户 ...

自定义页码显示控件PageNumberView

实现效果

自定义页码显示控件PageNumberView相关推荐

最新文章

热门文章