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

短命女 2023-10-17 13:42 14阅读 0赞

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

**首先，我们需要在主布局文件中activity\_main.xml 放一个 ViewPager，底部导航栏使用RedioButton切换页面，每一个****RadioButton都使用了选择器进行图片与字体的变化****。**

四个相同选择器文件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();
    	}
    
    
    
    }

效果图如下:

**![Center][]![Center 1][]**

[Java]: http://lib.csdn.net/base/java
[Center]: https://img-blog.csdn.net/20170610185728894?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluODU3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20170610185917991?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluODU3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center