前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3.复杂的viewpager

3.复杂的viewpager

作者头像
六月的雨
发布2018-05-14 10:45:28
7320
发布2018-05-14 10:45:28
举报
文章被收录于专栏:Android开发指南Android开发指南

实现这样的效果:

1.主页面布局

代码语言:javascript
复制
<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" >    <com.itheima.zhbj52.view.NoScrollViewPager        android:id="@+id/vp_content"        android:layout_width="match_parent"        android:layout_height="0dp"        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>

因为不想让侧边栏每个页面都跑出来可以设置它不能滑动,这是一个自定义view,所以写全称。有点页面需要能滑出来,在代码中实现。注意:这俩个构造函数缺一不可

代码语言:javascript
复制
/** * 不能左右划的ViewPager *  * @author Kevin *  */public class NoScrollViewPager extends ViewPager {
	public NoScrollViewPager(Context context, AttributeSet attrs) {		super(context, attrs);	}	public NoScrollViewPager(Context context) {		super(context);	}	// 表示事件是否拦截, 返回false表示不拦截,否则viewpager里面再有一个viewpager就会不能滑动	@Override	public boolean onInterceptTouchEvent(MotionEvent arg0) {		return false;	}	/**	 * 重写onTouchEvent事件,什么都不用做,不滑动	 */	@Override	public boolean onTouchEvent(MotionEvent arg0) {		return false;	}}

底栏RadioButton的样式

代码语言:javascript
复制
    <style name="BottomTabStyle">
        <item name="android:layout_width">wrap_content</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:layout_gravity">center_vertical</item>        <item name="android:button">@null</item>//写成null,RadioButton就没有点只有文字了        <item name="android:drawablePadding">3dp</item>        <item name="android:padding">5dp</item>        <item name="android:textColor">@drawable/btn_tab_text_selector</item>        <item name="android:layout_weight">1</item>        <item name="android:gravity">center</item>    </style>

2.主界面

代码语言:javascript
复制
public class ContentFragment extends BaseFragment {//这是注解,xuils自带这个功能,不需要findviewbyid和写各种监听事件	@ViewInject(R.id.rg_group)	private RadioGroup rgGroup;//不用注解的话,记得要找出控件,找了一天这个问题	@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);		// rgGroup = (RadioGroup) view.findViewById(R.id.rg_group);		ViewUtils.inject(this, view); // 注入view和事件		return view;	}	@Override	public void initData() {// 默认勾选首页。这里没有监听事件就可以显示默认勾选首页
		rgGroup.check(R.id.rb_home);		// 初始化5个子页面		mPagerList = new ArrayList<BasePager>();		// 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());		// 监听RadioGroup的选择事件		rgGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {			@Override			public void onCheckedChanged(RadioGroup group, int checkedId) {				switch (checkedId) {				case R.id.rb_home:					// mViewPager.setCurrentItem(0);// 设置当前页面					mViewPager.setCurrentItem(0, 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.setOnPageChangeListener(new OnPageChangeListener() {			@Override			public void onPageSelected(int arg0) {				mPagerList.get(arg0).initData();// 获取当前被选中的页面, 初始化该页面数据			}			@Override			public void onPageScrolled(int arg0, float arg1, int arg2) {			}			@Override			public void onPageScrollStateChanged(int arg0) {			}		});// 初始化首页数据,得写这一步要不然不显示页面了		mPagerList.get(0).initData();	}	class ContentAdapter extends PagerAdapter {		@Override		public int getCount() {			return mPagerList.size();		}		@Override		public boolean isViewFromObject(View arg0, Object arg1) {			return arg0 == arg1;		}		@Override		public Object instantiateItem(ViewGroup container, int position) {			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);		}	}	/**	 * 获取新闻中心页面	 * 	 * @return	 */	public NewsCenterPager getNewsCenterPager() {		return (NewsCenterPager) mPagerList.get(1);	}}

3.各个子页面

base_pager布局

代码语言:javascript
复制
<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:text="智慧北京"            android:textColor="#fff"            android:textSize="22sp" />        <ImageButton            android:id="@+id/btn_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:layout_marginLeft="5dp"            android:background="@null"//图片就没有背景色了            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>

子页面的共性抽成一个基类,让子页面继承它

代码语言:javascript
复制
public class BasePager {	public Activity mActivity;	public View mRootView;// 布局对象	public TextView tvTitle;// 标题对象	public FrameLayout flContent;// 内容	public ImageButton btnMenu;// 菜单按钮//构造函数,让它一创建出来就Activity ,并且初始化界面
	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的状态	 * 	 * @param b	 */	protected void toggleSlidingMenu() {		MainActivity mainUi = (MainActivity) mActivity;		SlidingMenu slidingMenu = mainUi.getSlidingMenu();		slidingMenu.toggle();// 切换状态, 显示时隐藏, 隐藏时显示	}	/**	 * 初始化数据	 */	public void initData() {	}	/**	 * 设置侧边栏开启或关闭	 * TRUE显示,FALSE隐藏	 * @param enable	 */	public void setSlidingMenuEnable(boolean enable) {		MainActivity mainUi = (MainActivity) mActivity;//获取到MainActivity,然后getSlidingMenu就能获取侧边栏对象
		SlidingMenu slidingMenu = mainUi.getSlidingMenu();		if (enable) {			slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);		} else {			slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);		}	}}

子布局

代码语言:javascript
复制
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中动态添加布局,这个是下面的标题下面的fargment		flContent.addView(text);	}}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-10-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档