159.n1-点击RadioGroup切换ViewPager

原创 于 2017-05-12 23:32:21 发布 · 450 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种利用ViewPager和RadioGroup实现底部导航栏切换功能的方法。通过监听RadioGroup的点击事件来切换ViewPager中的不同页面，并在每个页面被选中时初始化对应的数据。此外，还讨论了如何避免ViewPager预加载数据导致的状态混淆问题。

ViewPager有滑动的功能，因为需要实现的是点击切换，因此需要吧ViewPager的滑动频闭。初始化每一个按钮对应的ViewPager的时候，是使用的对RadioGroup的监听，当某一个被选中的时候就设置当前页可以看见，同时初始化页面的数据是对ViewPager的监听，判断当前的页面是否被选中，被选中了就初始化当前页面的数据，还有一点需要注意ViewPager的pager.initData()这个方法会预加载数据，也就是显示第一个页面的时候会初始化第二个页面的数据，这样引起了状态的混淆，因此，最好是使用监听ViewPager是否选中来初始化数据。

监听和初始化的方法如下：

		//监听rg_group的点击事件切换屏幕
		rg_group.setOnCheckedChangeListener(new OnCheckedChangeListener() {

			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// 根据checkedId来判断显示哪一个
				switch(checkedId){
				case R.id.rb_home:
					// mViewPager.setCurrentItem(0);// 设置当前页面
					mViewPager.setCurrentItem(0, false);// false参数的作用是去掉切换页面的动画
					break;
				case R.id.rb_news:
					mViewPager.setCurrentItem(1, false);// 设置当前页面
					break;
				case R.id.rb_smart:
					mViewPager.setCurrentItem(2, false);// 设置当前页面
					break;
				case R.id.rb_gov:
					mViewPager.setCurrentItem(3, false);// 设置当前页面
					break;
				case R.id.rb_setting:
					mViewPager.setCurrentItem(4, false);// 设置当前页面
					break;

				default:
					break;
				}
			}
			
		});
		
		//监听mViewPager对象，来切换动画,当前的ViewPager被选中以后，就初始化该页面的数据
		mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				// TODO Auto-generated method stub
				
			}

			@Override
			public void onPageSelected(int position) {
				// 获取当前被选中的页面, 初始化该页面数据
				mPagerList.get(position).initData();
				
			}

			@Override
			public void onPageScrollStateChanged(int state) {
				// TODO Auto-generated method stub
				
			}
			
		});
		// 初始化首页数据，因为页面点击的时候才会初始化数据，因此刚进入的时候，第一页没有初始化，需要手动初始化数据
		mPagerList.get(0).initData();
	}

fragment_content.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" >
    

    <!-- 内容栏 -->
    <!-- 上边的内容栏 -->
    <!-- 继承一个不能滑动的ViewPager -->
	<com.ldw.news.view.NoScrollViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
    	android:layout_height="match_parent"
    	android:layout_weight="1"
        />
	<!-- 下边的点击栏 -->
	<RadioGroup 
	    android:id="@+id/rg_group"
	    android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:background="@drawable/bottom_tab_bg"
    	android:orientation="horizontal"
	    >
	    <RadioButton 
	        android:id="@+id/rb_home"
	        style="@style/BottomTabStyle"
    		android:drawableTop="@drawable/btn_tab_home_selector"
    		android:text="首页"
	        />
		<RadioButton 
		    android:id="@+id/rb_news"
	        style="@style/BottomTabStyle"
    		android:drawableTop="@drawable/btn_tab_news_selector"
    		android:text="新闻中心"
	        />	   
	    <RadioButton 
	        android:id="@+id/rb_smart"
	        style="@style/BottomTabStyle"
    		android:drawableTop="@drawable/btn_tab_smart_selector"
    		android:text="智慧服务"
	        />
	    <RadioButton 
	        android:id="@+id/rb_gov"
	        style="@style/BottomTabStyle"
    		android:drawableTop="@drawable/btn_tab_gov_selector"
    		android:text="政务"
	        />
	    <RadioButton 
	        android:id="@+id/rb_setting"
	        style="@style/BottomTabStyle"
    		android:drawableTop="@drawable/btn_tab_setting_selector"
    		android:text="设置"
	        />  
	</RadioGroup>
</LinearLayout>

base_pager.xml  ViewPager部分的布局的基类

<?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" >
    

    <RelativeLayout 
        android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:background="@drawable/title_red_bg"
        >

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textColor="#ffffff"
            android:textSize="22sp"
            android:text="智慧城市" />
		<ImageButton 
		    android:id="@+id/btn_menu"
		    android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:src="@drawable/img_menu"
		    />
    </RelativeLayout>
    <FrameLayout 
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
 		android:layout_height="0dp"
 		android:layout_weight="1"
        ></FrameLayout>
        
    
</LinearLayout>
BasePager.java基类的逻辑文件，后面的子页面都继承这个 

package com.ldw.news.base;

import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TextView;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.ldw.news.MainActivity;
import com.ldw.news.R;

/**
 * 主页下5个子页面的基类
 * 
 * @author Kevin
 * 
 */
public class BasePager {

	public Activity mActivity;
	public View mRootView;// 布局对象

	public TextView tvTitle;// 标题对象

	public FrameLayout flContent;// 内容

	public ImageButton btnMenu;// 菜单按钮

	public BasePager(Activity activity) {
		mActivity = activity;
		initViews();
	}

	/**
	 * 初始化布局
	 */
	public void initViews() {
		mRootView = View.inflate(mActivity, R.layout.base_pager, null);

		tvTitle = (TextView) mRootView.findViewById(R.id.tv_title);
		flContent = (FrameLayout) mRootView.findViewById(R.id.fl_content);
		btnMenu = (ImageButton) mRootView.findViewById(R.id.btn_menu);

		btnMenu.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				toggleSlidingMenu();
			}
		});
	}

	/*
	 * 切换SlidingMenu的状态
	 */
	protected void toggleSlidingMenu() {
		MainActivity mainUi = (MainActivity) mActivity;
		SlidingMenu slidingMenu = mainUi.getSlidingMenu();
		slidingMenu.toggle();// 切换状态, 显示时隐藏, 隐藏时显示
	}

	/**
	 * 初始化数据
	 */
	public void initData() {

	}

	/**
	 * 设置侧边栏开启或关闭，左侧边栏在MainActivity中
	 * MainActivity中有SlidingMenu
	 */
	public void setSlidingMenuEnable(boolean enable) {
		//获取到MainActivity，这样可以操作slidingMenu
		MainActivity mainUi = (MainActivity) mActivity;
		//获取到slidingMenu对象
		SlidingMenu slidingMenu = mainUi.getSlidingMenu();
		//设置slidingMenu是否可以点击
		if (enable) {
			slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		} else {
			slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
		}
	}

}

Home子页面 

package com.ldw.news.base.impl;

import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

import com.ldw.news.base.BasePager;

/*
 * home继承基类
 */
public class HomePager extends BasePager {

	public HomePager(Activity activity) {
		super(activity);
	}

	@Override
	public void initData() {
		System.out.println("初始化首页数据....");
		
		// 修改标题
		tvTitle.setText("智慧城市");
		// 隐藏菜单按钮
		btnMenu.setVisibility(View.GONE);
		setSlidingMenuEnable(false);//关闭侧边栏，不显示左侧

		TextView text = new TextView(mActivity);
		text.setText("首页");
		text.setTextColor(Color.RED);
		text.setTextSize(25);
		text.setGravity(Gravity.CENTER);

		// 向FrameLayout中动态添加布局
		flContent.addView(text);
	}

}

ContentFrame.java主页面布局的逻辑文件，创建了ViewPager，然后初始化了ViewPager,同时监听并初始化每一个ViePager的数据，让HomePager等填充了内容 

package com.ldw.news.fragment;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

import com.ldw.news.R;
import com.ldw.news.base.BasePager;
import com.ldw.news.base.impl.GovAffairsPager;
import com.ldw.news.base.impl.HomePager;
import com.ldw.news.base.impl.NewsCenterPager;
import com.ldw.news.base.impl.SettingPager;
import com.ldw.news.base.impl.SmartServicePager;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;

/*
 * 主界面
 */
public class ContentFragment extends BaseFragment{

	@ViewInject(R.id.rg_group)
	private RadioGroup rg_group;
	@ViewInject(R.id.vp_content)
	private ViewPager mViewPager;
	
	private ArrayList<BasePager> mPagerList;
	//初始化布局
	@Override
	public View initViews() {
		View view = View.inflate(mActivity, R.layout.fragment_content, null);
		
		//获取的id注入view
		ViewUtils.inject(this, view);
		
		return view;
	}
	
	//初始化数据
	@Override
	public void initData(){
		//默认勾选home
		rg_group.check(R.id.rb_home);
		
		mPagerList = new ArrayList<BasePager>();
		//初始化5个页面
		/*
		for(int i = 0; i < 5; i++){
			BasePager pager = new BasePager(mActivity);
			mPagerList.add(pager);
		}
		*/
		mPagerList.add(new HomePager(mActivity));
		mPagerList.add(new NewsCenterPager(mActivity));
		mPagerList.add(new SmartServicePager(mActivity));
		mPagerList.add(new GovAffairsPager(mActivity));
		mPagerList.add(new SettingPager(mActivity));
		mViewPager.setAdapter(new ContentAdapter());
		
		//监听rg_group的点击事件切换屏幕
		rg_group.setOnCheckedChangeListener(new OnCheckedChangeListener() {

			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// 根据checkedId来判断显示哪一个
				switch(checkedId){
				case R.id.rb_home:
					// mViewPager.setCurrentItem(0);// 设置当前页面
					mViewPager.setCurrentItem(0, false);// false参数的作用是去掉切换页面的动画
					break;
				case R.id.rb_news:
					mViewPager.setCurrentItem(1, false);// 设置当前页面
					break;
				case R.id.rb_smart:
					mViewPager.setCurrentItem(2, false);// 设置当前页面
					break;
				case R.id.rb_gov:
					mViewPager.setCurrentItem(3, false);// 设置当前页面
					break;
				case R.id.rb_setting:
					mViewPager.setCurrentItem(4, false);// 设置当前页面
					break;

				default:
					break;
				}
			}
			
		});
		
		//监听mViewPager对象，来切换动画,当前的ViewPager被选中以后，就初始化该页面的数据
		mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				// TODO Auto-generated method stub
				
			}

			@Override
			public void onPageSelected(int position) {
				// 获取当前被选中的页面, 初始化该页面数据
				mPagerList.get(position).initData();
				
			}

			@Override
			public void onPageScrollStateChanged(int state) {
				// TODO Auto-generated method stub
				
			}
			
		});
		// 初始化首页数据，因为页面点击的时候才会初始化数据，因此刚进入的时候，第一页没有初始化，需要手动初始化数据
		mPagerList.get(0).initData();
	}
	
	class ContentAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return mPagerList.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			// TODO Auto-generated method stub
			return view == object;
		}
		
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			//获取到某个位置的pager
			BasePager pager = mPagerList.get(position);
			//填充布局对象
			container.addView(pager.mRootView);
			// 初始化数据.... 不要放在此处初始化数据, 否则会预加载下一个页面
			//pager.initData();
			return pager.mRootView;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}
	}

}


评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值