Android ViewPager与radiogroup实现关联示例
android viewpager与radiogroup实现关联
效果图展示
android viewpager与radiogroup实现关联步骤
1.实例化viewpager
2.通过layoutinflater加载布局,返回view结果
3.把生成的每一个view对象添加到list集合中
4.实例化适配器,传递view集合
5.在适配器中继承自pageradapter,实现内部的四个方法
- getcount(); 返回视图的数量
- isviewfromobject(); 是否通过对象加载视图 view==object
- instantiateltem(); 加载当前页面(通过container.addview();添加视图)返回个给用户
- destroyitem(); 销毁滑出的视图(通过container.removerview();销毁视图)
6.实例化每个radiobutton
7.点击每个raidobutton时,切换不同的页面(viewpager.setcurrentltem(下标))
8.当页面切换后,还要把当前的导航栏变为绿色
- 设置文本颜色的settextcolor(getresources().getcolor(r.color.tvgreen));
- 设置文本的上方的图片的,四个参数分别为,左、上、右、下setcompounddrawableswithintrinsicbounds (null,getresources().getdrawable)(r.drawable.call_t),null,null);
9.当你每次点击之前的时候,添加一个方法,清除方法,(清理之 前的所有导航栏的状态,置为灰色)
10.实现滑动监听需要addonpagerchangelistener
11.在onpagerselected方法中,根据position页面的下标判断分别设置对应的底部导航栏状态
代码演示
1.在主布局文件中引入android-support-v4.jar包并添加radiogroup并在radiogroup中添加radiobutton用于显示导航栏
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.cxy.viewpager.mainactivity"> <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="9"> </android.support.v4.view.viewpager> <radiogroup android:id="@+id/radiogroup" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#f4f3f3" android:orientation="horizontal"> <radiobutton android:id="@+id/radiobutton1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawabletop="@drawable/mess_t" android:gravity="center" android:text="微信" android:textcolor="#11cd6e"/> <radiobutton android:id="@+id/radiobutton2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawabletop="@drawable/call_f" android:gravity="center" android:text="通讯录" android:textcolor="@android:color/darker_gray"/> <radiobutton android:id="@+id/radiobutton3" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawabletop="@drawable/show_f" android:gravity="center" android:text="发现" android:textcolor="@android:color/darker_gray"/> <radiobutton android:id="@+id/radiobutton4" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawabletop="@drawable/my" android:gravity="center" android:text="我" android:textcolor="@android:color/darker_gray"/> </radiogroup> </linearlayout>
2.viewpager需要适配器继承于pageradapter
package com.example.cxy.viewpager.adapter; import android.support.v4.view.pageradapter; import android.view.view; import android.view.viewgroup; import java.util.list; /** * date:2017/3/7 * created:陈箫阳(admin) */ public class myviewpageradpter extends pageradapter { private list<view> mlist; public myviewpageradpter(list<view> list) { mlist = list; } //返回视图数量 @override public int getcount() { return mlist.size(); } //是否通过对象加载视图 @override public boolean isviewfromobject(view view, object object) { return view == object; } //加载当前页面 @override public object instantiateitem(viewgroup container, int position) { container.addview(mlist.get(position)); return mlist.get(position);//view } //销毁滑出视图 @override public void destroyitem(viewgroup container, int position, object object) { container.removeview(mlist.get(position)); } }
3.新建一个fragment包,在包中新建onefragment类用于滑动展示,新建布局文件fragmentone.xml并添加textview用于添加不同页面的内容,共有四个这里只写一个
onefragment类
package com.example.cxy.viewpager.fragment; import android.os.bundle; import android.support.annotation.nullable; import android.support.v4.app.fragment; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; import com.example.cxy.viewpager.r; /** * date:2017/3/7 * created:陈箫阳(admin) */ public class onefragment extends fragment{ @nullable @override public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) { view view = inflater.inflate(r.layout.fragmentone, null); return view; } }
fragmentone.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:orientation="vertical"> <textview android:textsize="30sp" android:id="@+id/textview" android:layout_width="match_parent" android:layout_height="match_parent" android:text="这是微信页面"/> </linearlayout>
4.编写主类
package com.example.cxy.viewpager; import android.os.bundle; import android.support.v4.view.viewpager; import android.support.v7.app.appcompatactivity; import android.view.layoutinflater; import android.view.view; import android.widget.radiobutton; import android.widget.radiogroup; import com.example.cxy.viewpager.adapter.myviewpageradpter; import java.util.arraylist; import java.util.list; public class mainactivity extends appcompatactivity implements radiogroup.oncheckedchangelistener, viewpager.onpagechangelistener { private viewpager mviewpager; private list<view> mlist; private radiogroup mradiogroup; private radiobutton wechatbtn, msgbtn, showbtn, mybtn; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); //初始化所有控件 initview(); } private void initview() { //实例化viewpager mviewpager = (viewpager) findviewbyid(r.id.viewpager); //实例化radiogroup mradiogroup = (radiogroup) findviewbyid(r.id.radiogroup); //给radiogroup添加监听 mradiogroup.setoncheckedchangelistener(this); //实例化radiobutton wechatbtn = (radiobutton) findviewbyid(r.id.radiobutton1); msgbtn = (radiobutton) findviewbyid(r.id.radiobutton2); showbtn = (radiobutton) findviewbyid(r.id.radiobutton3); mybtn = (radiobutton) findviewbyid(r.id.radiobutton4); //实例化list数组 mlist = new arraylist<>(); view view1 = layoutinflater.from(this).inflate(r.layout.fragmentone, null); view view2 = layoutinflater.from(this).inflate(r.layout.fragmenttwo, null); view view3 = layoutinflater.from(this).inflate(r.layout.fragmentthree, null); view view4 = layoutinflater.from(this).inflate(r.layout.fragmentfour, null); //把生成的每一个view对象添加到集合中 mlist.add(view1); mlist.add(view2); mlist.add(view3); mlist.add(view4); //实例化适配器 myviewpageradpter adapter = new myviewpageradpter(mlist); //给viewpager添加适配器 mviewpager.setadapter(adapter); //给viewpager添加监听事件 mviewpager.addonpagechangelistener(this); } @override public void oncheckedchanged(radiogroup group, int checkedid) { //清理所有导航栏的状态 clearstate(); switch (checkedid) { case r.id.radiobutton1: //给viewpager设置当前布局 mviewpager.setcurrentitem(0); //给radiobutton设置文本颜色 wechatbtn.settextcolor(getresources().getcolor(r.color.tvgreen)); //给radiobutton设置文本上方的图片 wechatbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.mess_t), null, null); break; case r.id.radiobutton2: mviewpager.setcurrentitem(1); msgbtn.settextcolor(getresources().getcolor(r.color.tvgreen)); msgbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.call_t), null, null); break; case r.id.radiobutton3: mviewpager.setcurrentitem(2); showbtn.settextcolor(getresources().getcolor(r.color.tvgreen)); showbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.show_t), null, null); break; case r.id.radiobutton4: mviewpager.setcurrentitem(3); mybtn.settextcolor(getresources().getcolor(r.color.tvgreen)); mybtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.my_t), null, null); break; } } //初始化底部导航栏 private void clearstate() { wechatbtn.settextcolor(getresources().getcolor(android.r.color.darker_gray)); msgbtn.settextcolor(getresources().getcolor(android.r.color.darker_gray)); showbtn.settextcolor(getresources().getcolor(android.r.color.darker_gray)); mybtn.settextcolor(getresources().getcolor(android.r.color.darker_gray)); wechatbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.mess_f), null, null); msgbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.call_f), null, null); showbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.show_f), null, null); mybtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.my), null, null); } //滑动过程中的动作 @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } //选择某个页面松手后会被调用 @override public void onpageselected(int position) { //清理所有导航栏的状态 clearstate(); switch (position) { //使用switch拿到下标定义当滑动到相应位置小点显示颜色 case 0: //当页面切换后,还要把当前的导航栏变为绿色 wechatbtn.settextcolor(getresources().getcolor(r.color.tvgreen)); //设置文本的上方的图片的,四个参数分别为,左、上、右、下 wechatbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.mess_t), null, null); break; case 1: msgbtn.settextcolor(getresources().getcolor(r.color.tvgreen)); msgbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.call_t), null, null); break; case 2: showbtn.settextcolor(getresources().getcolor(r.color.tvgreen)); showbtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.show_t), null, null); break; case 3: mybtn.settextcolor(getresources().getcolor(r.color.tvgreen)); mybtn.setcompounddrawableswithintrinsicbounds(null, getresources().getdrawable(r.drawable.my_t), null, null); break; } } //手指放上去,松开,拖动都会被调用 @override public void onpagescrollstatechanged(int state) { } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 简介C#读取XML的两种方式
推荐阅读
-
Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】
-
Android编程实现自定义PopupMenu样式示例【显示图标与设置RadioButton图标】
-
android实现定位与目的地的导航示例代码
-
Android实现界面内嵌多种卡片视图(ViewPager、RadioGroup)
-
Android UI设计与开发之使用ViewPager实现欢迎引导页面
-
android实现定位与目的地的导航示例代码
-
Android UI设计与开发之ViewPager介绍和简单实现引导界面
-
Android实现界面内嵌多种卡片视图(ViewPager、RadioGroup)
-
Android开发之瀑布流控件的实现与使用方法示例
-
Android App端与PHP Web端的简单数据交互实现示例