最近学习到了viewpager的使用,利用fragment+viewpager+radioButton组合进行了一个导航菜单加界面的开发,再次分享一下,自己也算是复习一下。
首先新建一个工程,我现在的这个sdk的版本,新建工程默认创建一个activity,使用的是fragment实现,用着不太习惯,我一般会修改为原来的模式,一个activity,加载一个layout作为主界面,然后删掉多余的代码,运行一下,主界面出来了:
然后我们在界面布局文件中区调textview,,放一个viewpager的组件,铺满全屏幕:
<android.support.v4.view.ViewPager android:id="@+id/mViewPager" android:layout_width="match_parent" android:layout_height="match_parent" />
新建三个布局文件,很简单的就行,分别有一个按钮,作为我们viewpager里面的界面元素,这里就不列出来了。
接下来新建三个fragment的类,继承自v4的Fragment,并重写其onCreateView方法,初始化将每个Fragment的界面,下面列出其中一个代码片段:
package com.example.fragmentviewpager; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FragmentOne extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_page1, container,false); return view; } }
接下来就要在activity中去初始化viewpager啦,先实例化viewpager对象,拿到我们的控件,并初始化Fragment数组,
private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (ViewPager)findViewById(R.id.mViewPager); Fragment fragmentOne = new FragmentOne(); Fragment fragmentTwo = new FragmentTwo(); Fragment fragmentThree = new FragmentThree(); fragments = new Fragment[]{fragmentOne,fragmentTwo,fragmentThree}; }
然后我们就要给它设置适配器,还没有,我们创建一个适配器类,继承自FragmentPagerAdapter,然后重写父类的抽象法方法,重写构造方法,构造数据源,可以直接写在activity中,作为内部类:
class MyViewPagerAdapter extends FragmentPagerAdapter{ public MyViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int index) { return fragments[index]; } @Override public int getCount() { return fragments.length; } }
接下来在onCreate方法中初始化我们的adapter,给viewpager设置上:
MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter);
运行一下,我们的viewpager+fragment就出现啦!fragment的好处就是可以与activity进行分离,传统的方式需要在activity中加载所有视图并初始化各种操作,造成activity代码杂乱。
接下来我们就要开始添加标题,上下都可以,我把它放在上面, 标题栏放几个textView,设置其点击事件,并高亮当前选中页就可以,我采用radiobutton的方式,来进行切换。
我们现在viewpager组件上面添加一个radiogroup,里面我们通过动态的方式创建radioButton,这样添加一页的布局文件不需要修改:
<RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="38dip" android:layout_alignParentTop="true" android:background="#000000" android:orientation="horizontal" />
然后我们新建一个radiobutton的布局文件nav_radiogroup_item.xml,设置一下radiobutton的样式,
<?xml version="1.0" encoding="utf-8"?> <RadioButton xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="0dip" android:layout_height="fill_parent" android:background="@drawable/rb_fouce_bg" android:button="@null" android:checked="false" android:gravity="center" android:text="" android:textColor="@drawable/rb_blue_bg" android:textSize="14.0dip" />
可以看到radiobutton的样式中,背景和文字显示都使用了drawable的方式,使用了两个selector,处理单击以及选中时背景和文字的交替变化,两个selector文件如下:
rb_blue_bg.xml处理文字颜色
<?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="#5AB0EB" /> <item android:state_checked="false" android:color="#ffffff"/> </selector>
rb_fouce_bg.xml处理背景颜色
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" android:drawable="@color/blue"/> <item android:drawable="@color/translate"></item> </selector>
在背景颜色处理是用到了color资源,在我们的colors.xml中定义需要的颜色:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="blue">#99FFFF</color> <color name="translate">#000000</color> <color name="black">#000000</color> <color name="white">#ffffff</color> <color name="green">#ff0000</color> <color name="red">#00ffff</color> </resources>
接下来处理标题资源文件,我们卸载arrays.xml里面,方便配置:
<?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="titles"> <item >页面1</item> <item >页面2</item> <item >页面3</item> </string-array> </resources>
资源文件处理完毕,现在开始代码处理,在activity中初始化radiogroup以及我们的标题数组:
radioGroup = (RadioGroup)findViewById(R.id.radioGroup); titles = getResources().getStringArray(R.array.titles);
接下来动态创建radiobutton添加到radiogroup中去,需要计算一下每个按钮的宽度:
//计算每个标题的宽度 Display display = getWindowManager().getDefaultDisplay(); DisplayMetrics dm = new DisplayMetrics(); display.getMetrics(dm); titleWidth = dm.widthPixels / titles.length; //动态添加radiobutton RadioButton rb = null; radioGroup.removeAllViews(); LayoutInflater inflater = LayoutInflater.from(this); for (int i = 0; i < titles.length; i++) { //从布局中读取单选按钮布局 rb = (RadioButton)inflater.inflate(R.layout.nav_radiogroup_item, null); //设置显示文字 rb.setText(titles[i]); //设置id。不能丢,区分用 rb.setId(i); rb.setLayoutParams(new LayoutParams(titleWidth,LayoutParams.MATCH_PARENT)); if (i == 0) { rb.setChecked(true); } radioGroup.addView(rb); }
运行一下,我们的标题出来了:
但是和viewpager还不同步,下面开始写单选按钮时间和viewpager的选择事件:
//单选按钮事件 radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { //选中时viewpager联动 viewPager.setCurrentItem(checkedId); } }); //viewpager选中事件 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int index) { //选中时模拟单选按钮的单击事件 ((RadioButton)radioGroup.getChildAt(index)).performClick(); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } });
相关推荐
2:fragment+viewpager 通过对滑动事件的监听、切换视图 3:在2的基础上,进行viewpager嵌套。 并获取不同的监听事件 4:在3的基础上,自定义listview 并获取相应的监听事件 (PS:更大层面上适合初学者学习和了解...
此代码实现Viewpager+Fragment+RadioButton的界面滑动出入
Fragment+ViewPager的使用,项目中的RadioButton主要用于点击每一个模块的时候,都可以显示此模块的信息,而且页面也可以滑动
ViewPager就是一个简单的页面切换组件,我们可以往里面填充多个View,然后我们可以左右滑动,从而切换不同的View,我们可以通过setPageTransformer()方法为我们的ViewPager> 设置切换时的动画效果。和ListView,...
1.标题栏用RadioGroup,RadioButton来实现,下面的展示由viewpager和fragment组合实现,内容为listView。 2.可以点击radiobutton 改变选中状态,进行切换fragment。 3.由于用了viewpager,也可以左右滑动。 4.代码...
Radiobutton 相当于Tab也 游标随viewpager页滑动转到相对应的radiobutton ,viewpager 中每一个页面是一个fragment
ViewPager+RadioGroup+Fragment超高仿微信主界面,可通过左右滑动或点击底部RadioButton切换Fragment http://blog.csdn.net/shenyuanqing/article/details/46670761 开发环境AndroidStudio1.2
使用ViewPager+Fragment+RadioButton实现了Fragment页面的滑动切换,解决了ViewPager的懒加载机制
主界面 android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F0EFF5" > android:id="@+id/sayit_rl_tab" android:layout_width="fill_parent" android:...
demo是三种实现底部导航栏的方式,第一种是LinearLayout+textView+fragment实现,第二种是RadioButton+fragement实现,第三种是使用google开发的ButtonNavigationBar+fragment实现,目前没有加入ViewPager,所以无法滑动...
当滑动下方页面时,标签栏上对应标签会显示出与其他标签不一样的效果。下面就以此为例分析顶部标签栏的基本实现思路及方法,虽然在实际开发中顶部标签栏的效果会有所不同,但实现上都是大同小异。 1.界面分析及实现 ...
仿美团APP的底部滑动菜单Android实现,供大家参考,具体内容如下 在现在的APP的应用中,类似仿美团APP的底部滑动菜单,应用是挺多的,例如QQ,微信,支付宝都应用到。开发流程如下 1. 底部按钮 底部按钮使用...
这是一款由android studio开发的天气预报,由于没有采用数据库与api这些东西,所以非常适合初学者所采用,这个项目基本是在简单框架的基础上采用...2.多个城市的显示,采用左右滑动换页显示 3.具有定时提示功能。