自定义页码显示控件PageNumberView
来源：互联网 发布：十大数据挖掘算法 编辑：程序博客网 时间：2024/06/04 18:46
实现效果
上述效果使用了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"> <Button android:id="@+id/btPrevPage" android:layout_width="80dp" android:layout_height="40dp" android:background="@drawable/page_number_selector_btn" android:text="上一页" /> <Button android:id="@+id/btFirstPage" android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="10dp" android:background="@drawable/page_number_selector_btn" android:text="首页" /> <RadioGroup android:id="@+id/rgPageNumber" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:orientation="horizontal"> <RadioButton android: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" /> <RadioButton android: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" /> <RadioButton android: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" /> <RadioButton android: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" /> <RadioButton android: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> <Button android:id="@+id/btLastPage" android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="10dp" android:background="@drawable/page_number_selector_btn" android:text="末页" /> <Button android: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; //与之绑定的ViewPager public 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() { @Override public 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() { @Override public void onClick(View v) { setRadioButtonText(1); mViewPager.setCurrentItem(0,false); mFirst.setChecked(true); } }); mNextPage.setOnClickListener(new OnClickListener() { @Override public 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() { @Override public 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() { @Override public 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一起使用
<LinearLayout android:id="@+id/llCourseTitle" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true"> <com.chy.videotutorial.MyWiew.NoSlideViewPager android:id="@+id/vpCourseTitlePaging" android:layout_width="match_parent" android:layout_height="400dp" /> <com.chy.videotutorial.MyWiew.PageNumberView android: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:上述的展示布局是运行在横屏的平板上的。
1 0
- 自定义页码显示控件PageNumberView
- 自定义 WPF常用控件 -页码控件
- easyui 分页控件 显示页码 宽度问题
- 页码控件
- 显示页码
- Thinkphp5 自定义分页样式显示页码和数量
- word2010 页码自定义
- asp.net页码显示
- 分页：页码显示javascript
- 分页页码显示算法
- PPT显示页码
- 分页页码显示算法
- RDLC 页脚 页码显示
- Latex beamer显示页码
- 自定义控件显示GIF图像
- 自定义控件不能显示： ThemeInfoAttribute
- 自定义控件显示省市选择器
- 自定义显示图片的控件
- Java static关键字
- 【LeetCode】容器装水
- 欢迎使用CSDN-markdown编辑器
- 【更新】Word控件Spire.Doc for .NET V5.8.92发布 | 新增功能
- WiFi攻击神器Pocket 8266 使用教程
- 自定义页码显示控件PageNumberView
- 框架之struts2篇----day3.2（配置文件）常量配置
- 均方根值、均方根误差以及标准差的区别
- UVa 1583 Digit Generator
- 51nod 1119 机器人走方格（费马小定理）
- 【LeetCode121-130】买卖锁，二叉树搜索，回文检测，恶心的wordladder2 BFS, 围棋消除BFS
- 关于curl模拟上传文件
- java判断字符串是否为空的方法总结
- 冒泡排序改进算法
