ViewPager+Fragment滑动切换页面(RadioButton底部导航栏)
2017-06-10 18:40
513 查看
[b] Activity要继承FragementActivity,在Activity的布局文件中放入了一个ViewPager,为了效果好看,还做了个导航,使得ViewPager和导航栏能够实现联动,即ViewPager滑动切换页面和点击导航栏切换页面,导航栏我使用的RadioButton,也可以使用其他的。
[/b]
[b] 首先,我们需要在主布局文件中activity_main.xml 放一个
ViewPager,底部导航栏使用RedioButton切换页面,每一个[/b]RadioButton都使用了选择器进行图片与字体的变化。
四个相同选择器文件rabtn_a_selector.xml
四个相同的Fragment文件,对应的xml就放了一个文本就不贴出来了
自定义一个ViewPager的适配器
效果图如下:
[/b]
[b] 首先,我们需要在主布局文件中activity_main.xml 放一个
ViewPager,底部导航栏使用RedioButton切换页面,每一个[/b]RadioButton都使用了选择器进行图片与字体的变化。
<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.lin.ui.MainActivity" android:weightSum="9"> <android.support.v4.view.ViewPager android:id="@+id/vp_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="7.5"/> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.5" android:gr 4000 avity="center" android:orientation="horizontal"> <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <RadioButton android:id="@+id/rb_a" android:layout_width="0dp" android:layout_height="match_parent" android:layout_gravity="right" android:layout_weight="1" android:button="@null" android:checked="true" android:drawableTop="@drawable/rabtn_a_selector" android:textColor="@drawable/rabtn_a_selector" android:gravity="center" android:text="首页"/> <RadioButton android:id="@+id/rb_b" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:checked="false" android:drawableTop="@drawable/rabtn_b_selector" android:textColor="@drawable/rabtn_b_selector" android:gravity="center" android:text="购物车"/> <RadioButton android:checked="false" android:id="@+id/rb_c" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/rabtn_c_selector" android:textColor="@drawable/rabtn_c_selector" android:gravity="center" android:text="消息"/> <RadioButton android:checked="false" android:id="@+id/rb_d" android:layout_width="0dp" android:layout_height="match_parent" android:layout_gravity="center" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/rabtn_d_selector" android:textColor="@drawable/rabtn_d_selector" android:gravity="center" android:text="我的"/> </RadioGroup> </LinearLayout> </LinearLayout>
四个相同选择器文件rabtn_a_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/a_0" android:state_checked="false" android:color="@color/gray"/> <item android:drawable="@drawable/a_1" android:state_checked="true" android:color="@color/bule"/> </selector>然后,在对应的MainActivity.Java文件
package com.lin.ui; import java.util.ArrayList; import com.lin.adapter.MyViewPager; import com.test.fragment.FragmentA; import com.test.fragment.FragmentB; import com.test.fragment.FragmentC; import com.test.fragment.FragmentD; import android.app.Activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.Menu; import android.view.MenuItem; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.RadioGroup.OnCheckedChangeListener; public class MainActivity extends FragmentActivity { /** * 导航按钮 */ private RadioGroup radioGroup; /** * 作为页面容器的ViewPager */ private ViewPager vp_viewpager; /** * 页面集合 */ private ArrayList<Fragment> arrayList; /** * 四个Fragment(页面) */ private FragmentA a; private FragmentB b; private FragmentC c; private FragmentD d; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } @SuppressWarnings("deprecation") private void initView() { arrayList=new ArrayList<Fragment>(); a=new FragmentA(); arrayList.add(a); b=new FragmentB(); arrayList.add(b); c=new FragmentC(); arrayList.add(c); d=new FragmentD(); arrayList.add(d); vp_viewpager=(ViewPager) findViewById(R.id.vp_viewpager); vp_viewpager.setAdapter(new MyViewPager(getSupportFragmentManager(), arrayList)); vp_viewpager.setCurrentItem(0); //设置当前页是第一页.setCurrentItem(0); //设置当前页是第一页 vp_viewpager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { switch (arg0) { case 0: radioGroup.check(R.id.rb_a); break; case 1: radioGroup.check(R.id.rb_b); break; case 2: radioGroup.check(R.id.rb_c); break; case 3: radioGroup.check(R.id.rb_d); break; default: break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); radioGroup=(RadioGroup) findViewById(R.id.radioGroup); radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int arg1) { //遍历RadioGroup 里面所有的子控件。 for (int index = 0; index < group.getChildCount(); index++) { //获取到指定位置的RadioButton RadioButton rb = (RadioButton)group.getChildAt(index); //如果被选中 if (rb.isChecked()) { vp_viewpager.setCurrentItem(index); break; } } } }); } }
四个相同的Fragment文件,对应的xml就放了一个文本就不贴出来了
package com.test.fragment; import com.lin.ui.R; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FragmentA extends Fragment{ private View view; // 单例(方法二) private static FragmentA fa; public static FragmentA getFragmentA() { if (fa == null) { fa = new FragmentA(); } return fa; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { view= inflater.inflate(R.layout.fragment_a, container, false); return view; } }
自定义一个ViewPager的适配器
package com.lin.adapter; import java.util.ArrayList; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class MyViewPager extends FragmentPagerAdapter{ private ArrayList<Fragment> arrayList; private FragmentManager fm; //创建FragmentManager public MyViewPager(FragmentManager fm,ArrayList<Fragment> arrayList) { super(fm); this.arrayList=arrayList; this.fm=fm; } @Override public Fragment getItem(int arg0) { return arrayList.get(arg0); } @Override public int getCount() { return arrayList.size(); } }
效果图如下:
相关文章推荐
- Android例子—Fragment实例讲解—底部导航栏+ViewPager滑动切换页面
- Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面
- Fragment实例精讲——底部导航栏+ViewPager滑动切换页面
- Android基础入门教程——5.2.4 Fragment实例精讲——底部导航栏+ViewPager滑动切换页面
- 底部导航栏实现页面的切换(三):Fragment + RadioGroup + ViewPager
- Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
- Viewpager+Fragment去除页面切换时的滑动翻页效果
- Fragment嵌套Fragment, TabLayout + ViewPager实现页面切换滑动
- 使用ViewPager和Fragment同时实现点击底部Tab切换和手势滑动切换Fragment
- TabLayou+fragment+viewpager实现滑动切换页面
- Android ViewPager加Fragment实现滑动或者点击页面切换
- 顶部动态列表GridView+底部viewpager+fragment切换滑动
- 安卓开发--应用市场的界面制作(一)--viewpager+fragment实现可滑动的底部导航栏
- Fragment嵌套ViewPager加上RadioButton实现微信页面滑动点击效果
- TabLayout+View Pager+Fragment 实现页面左右滑动切换
- 实例—ViewPager+RadioGroup实现底部导航栏和页面的滑动
- Android ViewPager实现滑动切换页面+底部tab点击切换页面(类微信首页)
- FragmentTabHost+ViewPager实现滑动的底部导航栏
- Fragment+viewpager切换滑动页面Demo
- ActionBarSherlock与Fragment及ViewPager结合实现滑动切换页面