![827512-20151027211820638-1314383205.png](https://i-blog.csdnimg.cn/blog_migrate/4535b12f7e106f4a136ec16d9acf2080.png)
![827512-20151027211822107-566369043.png](https://i-blog.csdnimg.cn/blog_migrate/23d506a339b326c1592a482d1d2233b4.png)
1.主页面布局
<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,所以写全称。有点页面需要能滑出来,在代码中实现。注意:这俩个构造函数缺一不可
/**
* 不能左右划的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的样式
- <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.主界面
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布局
<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>
子页面的共性抽成一个基类,让子页面继承它
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);
}
}
}
子布局
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);
}
}