ViewPager+Fragment滑动切换页面(RadioButton底部导航栏)

最新推荐文章于 2021-07-26 14:32:57 发布

落雨敏

最新推荐文章于 2021-07-26 14:32:57 发布

阅读量1k

点赞数 1

分类专栏： Android 文章标签： viewpager Fragment radio button 导航栏点击切换 viewpager滑动

本文链接：https://blog.csdn.net/lin857/article/details/73001294

版权

Android 专栏收录该内容

16 篇文章 5 订阅

订阅专栏

Activity要继承FragementActivity，在Activity的布局文件中放入了一个ViewPager，为了效果好看，还做了个导航，使得ViewPager和导航栏能够实现联动，即ViewPager滑动切换页面和点击导航栏切换页面，导航栏我使用的RadioButton，也可以使用其他的。

首先，我们需要在主布局文件中activity_main.xml 放一个 ViewPager，底部导航栏使用RedioButton切换页面，每一个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:gravity="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();
	}



}

效果图如下: