实现这样的效果：
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); }}
