Android 滑动小圆点ViewPager的两种设置方法详解流程
程序员文章站
2022-03-02 20:53:44
第一种方法:一、测试如下,直接设置小圆点不是图标二、准备工作1.在drawable创建dot.xml,设置小圆点,比较方便
第一种方法:
二、准备工作
三、使用工作:
第二种方法:
第一种方法:
一、测试如下,直接设置小圆点不是图标
二、准备工作
1.在drawable创建dot.xml,设置小圆点,比较方便
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <shape android:shape="oval"> <solid android:color="@color/black" /> <corners android:radius="8dp" /> </shape> </item> <item android:state_selected="false"> <shape android:shape="oval"> <solid android:color="@color/white" /> <corners android:radius="8dp" /> </shape> </item> </selector>
2.布局小圆点的状态可以被左右滑动dotview.xml
<!--?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="match_parent" android:padding="5dp"> <imageview android:id="@+id/v_dot" android:layout_width="10dp" android:layout_height="10dp" android:src="@drawable/dot"/> </linearlayout>
3.分页适配器自定义viewpageradapter.java
public class viewpageradapter extends pageradapter { private list<view> mviewlist; public viewpageradapter(list<view> mviewlist) { this.mviewlist = mviewlist; } @override public void destroyitem(viewgroup container, int position, object object) { container.removeview(mviewlist.get(position)); } @override public object instantiateitem(viewgroup container, int position) { container.addview(mviewlist.get(position)); return (mviewlist.get(position)); } @override public int getcount() { if (mviewlist == null) return 0; return mviewlist.size(); } @override public boolean isviewfromobject(view view, object object) { return view == object; } }
三、使用工作:
1.activity_main.xml
<?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="wrap_content" android:background="#d4d3d3"> <relativelayout android:layout_width="match_parent" android:layout_height="100dp" android:background="#ffffff" android:orientation="vertical"> <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" /> <linearlayout android:id="@+id/ll_dots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:gravity="center" android:orientation="horizontal" /> </relativelayout> </linearlayout>
分析下布局结构:
(1)首先是一个viewpager,用于结合gridview实现左右滑动菜单
(2)下面是一个linearlayout,有多少个viewpager的页面就会inflate出多少个小圆点,并且在viewpager翻页时,也就是说在左右滑动时,下面小圆点的状态也要相应地做出改变
2.mainactivity.java
public class mainactivity extends appcompatactivity { private viewpager mpager; private linearlayout mlldots; private layoutinflater inflater; private list<view> mpagerlist; private int pagecount = 3;//默认三个小点 /** * 当前显示的是第几页 */ private int curindex = 0; @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mpager = (viewpager) findviewbyid(r.id.viewpager); mlldots = (linearlayout) findviewbyid(r.id.ll_dots); inflater = layoutinflater.from(this); mpagerlist = new arraylist<view>(); //#ff9800:黄,#4caf50:绿,#2196f3:蓝 string[] colors = {"#ff9800", "#4caf50", "#2196f3"}; for (int i = 0; i < pagecount; i++) { linearlayout mll = (linearlayout) inflater.inflate(r.layout.linearlayout, mpager, false); mll.setbackgroundcolor(color.parsecolor(colors[i])); mpagerlist.add(mll); } //设置适配器 mpager.setadapter(new viewpageradapter(mpagerlist)); //设置圆点 setdotlayout(); } /** * 设置圆点 */ public void setdotlayout() { for (int i = 0; i < pagecount; i++) { mlldots.addview(inflater.inflate(r.layout.dotview, null)); } // 默认显示第一页 mlldots.getchildat(0).setselected(true); mpager.addonpagechangelistener(new viewpager.onpagechangelistener() { @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } @override public void onpageselected(int position) { // 取消原点选中 mlldots.getchildat(curindex).setselected(false); // 原点选中 mlldots.getchildat(position).setselected(true); curindex = position; } @override public void onpagescrollstatechanged(int state) { } }); } }
这代码中一句,布局linearlayout随着左右滑动小圆点翻页
linearlayout mll = (linearlayout) inflater.inflate(r.layout.linearlayout, mpager, false);
布局linearlayout.xml
<?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="match_parent"/>
第二种方法:
一、测试如下,小圆点图标
二、dotview.xml
...... <imageview android:id="@+id/v_dot" android:layout_width="10dp" android:layout_height="10dp"/> ......
三、设置二个小圆点图标(黑白)
点击链接:二个小圆点图标.zip
// 默认显示第一页 mlldots.getchildat(0).findviewbyid(r.id.v_dot) .setbackgroundresource(r.drawable.dot_normal); mlldots.getchildat(1).findviewbyid(r.id.v_dot) .setbackgroundresource(r.drawable.dot_selected); mlldots.getchildat(2).findviewbyid(r.id.v_dot) .setbackgroundresource(r.drawable.dot_selected); mpager.setonpagechangelistener(new viewpager.onpagechangelistener() { public void onpageselected(int position) { // 取消圆点选中 mlldots.getchildat(curindex) .findviewbyid(r.id.v_dot) .setbackgroundresource(r.drawable.dot_selected); // 圆点选中 mlldots.getchildat(position) .findviewbyid(r.id.v_dot) .setbackgroundresource(r.drawable.dot_normal); curindex = position; } public void onpagescrolled(int arg0, float arg1, int arg2) { } public void onpagescrollstatechanged(int arg0) { } });
到此这篇关于android 滑动小圆点viewpager的两种设置方法详解流程的文章就介绍到这了,更多相关android 滑动小圆点内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: 教你如何免费使用aws的服务器资源
下一篇: hutool 工具类基本使用教程