主页面布局框架搭建
1 布局方式：
由于在主页面现在内容是一个空的Fragment,现在需要往这个空的Fragment添加有内容的Fragment.
最终的实现效果是：
可以看出
1 下面一排是RadioButton
2 页面切换可以看做变化的Viewpager作为底板
3 ViewPager上使用线性布局的方式，放入不同的标题，以及内容（内容依旧使用Fragment布局方式进行填充）
下面是用于填充空Fragment的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的类：NoScrollViewPager,这个类重写了 onTouchEvent，使其不产生左右滑动的效果-->
<com.example.zhihuibj.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:orientation="horizontal"
android:background="@android:color/darker_gray"
>
<RadioButton
android:id="@+id/rb_home"
style="@style/BottomTab"
android:text="首页"
android:drawableTop="@drawable/btn_tab_home_selector"
/>
<RadioButton
android:id="@+id/rb_news"
style="@style/BottomTab"
android:text="新闻中心"
android:drawableTop="@drawable/btn_tab_news_selcetor"
/>
<RadioButton
android:id="@+id/rb_smart"
style="@style/BottomTab"
android:text="智慧服务"
android:drawableTop="@drawable/btn_tab_smart_selector"
/>
<RadioButton
android:id="@+id/rb_gov"
style="@style/BottomTab"
android:text="政 务"
android:drawableTop="@drawable/btn_tab_gov_selector"
/>
<RadioButton
android:id="@+id/rb_setting"
style="@style/BottomTab"
android:text="设置"
android:drawableTop="@drawable/btn_tab_setting_selector"
/>
</RadioGroup>
</LinearLayout>
下面的XML布局方式是对ViewPager内容进行填充布局，这里可以把ViewPager看做一个底板，在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: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_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="@null"
android:layout_centerHorizontal="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>
2 公共属性布局实现
首先创建一个继承Fragment类的BaseFragment类，用于实现Fragment的依赖的创建以及其他的初始化接口：
public abstract class BaseFragment extends Fragment{
public Activity mActivity;
//fragment创建
@Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
mActivity=getActivity(); //得到当前的Activity即MainActivity
}
//处理fragment布局
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// TODO Auto-generated method stub
return initViews();
}
//依赖的Activity创建完成
@Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
initData();
}
//子类必须实现初始化方法
public abstract View initViews();
//初始化
public void initData(){};
}
在创建一个ContentFragment类，继承BaseFragment, 用来填充数据和更改页面内容：
/*
* 主页面
*/
public class ContentFragment extends BaseFragment{
@ViewInject(R.id.rg_group) //xUtils注解方式查找控件
private RadioGroup rgGroup;
@ViewInject(R.id.vp_content)//得到Viewpager
private ViewPager viewpager;
private ArrayList<BasePager> mPagerList;
@Override
public View initViews() {
/*
* 将XML布局进行实例化
*/
View view= View.inflate(mActivity, R.layout.fragment_content_menu, null);
//rgGroup=(RadioGroup) view.findViewById(R.id.rg_group); //在view中寻找别控件
ViewUtils.inject(this,view);//注解View事件
return view;
}
@Override
public void initData() {
rgGroup.check(R.id.rb_home);
mPagerList=new ArrayList<BasePager>();
/*
*
* 他们都继承了Basepager(自定义)，向mPagerList添加用于显示不同页面的布局对象
* 在适配器（ContentAdapter）中,通过不同布局对象获得最终的布局实例mRootView
*/
mPagerList.add(new Homepager(mActivity));
mPagerList.add(new NewsCenterPager(mActivity));
mPagerList.add(new SmartServicePager(mActivity));
mPagerList.add(new GovAffairPager(mActivity));
mPagerList.add(new SettingPager(mActivity));
viewpager.setAdapter(new ContentAdapter());
/*
* 设置监听RadioGroup事件
*/
rgGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_home:
viewpager.setCurrentItem(0, false); //用于选中显示哪一个viewpager
break;
case R.id.rb_news:
viewpager.setCurrentItem(1, false);
break;
case R.id.rb_smart:
viewpager.setCurrentItem(2, false);
break;
case R.id.rb_gov:
viewpager.setCurrentItem(3, false);
break;
case R.id.rb_setting:
viewpager.setCurrentItem(4, false);
break;
default:
break;
}
}
});
mPagerList.get(0).initData(); //在未被选中时，对第一个页面进行初始化
/*
* 监听ViewPager改变事件，用于监听哪一个页面被选中，并进行数据初始化
*/
viewpager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
mPagerList.get(arg0).initData(); //对于每一个选中的viewpager进行数据初始化
}
@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
}
});
}
/*
* 继承PagerAdapter的适配器，用于ViewPager的设置与显示
*/
class ContentAdapter extends PagerAdapter{
@Override
public int getCount() {
// TODO Auto-generated method stub
return mPagerList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);//销毁view
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
BasePager pager=mPagerList.get(position);
container.addView(pager.mRootView);//获得View ，添加进入的是由falter对R.layout.base_pager实例化的对象
return pager.mRootView; //用于销毁View
}
}
}
3 数据区域布局实现
数据内容的实现：
/*
* 主页下五个子页的基类
*
*/
public class BasePager {
public Activity mAcitivty;
public View mRootView; //布局对象
public TextView tvTitle; //标题
public FrameLayout flcontent; //内容
public ImageButton btnMenu;
public BasePager(Activity activity)
{
mAcitivty=activity;
initViews(); //初始化布局
}
/*
* 布局初始化
*/
public void initViews(){
mRootView=View.inflate(mAcitivty, R.layout.base_pager, null); //获得数据布局XML实例
btnMenu=(ImageButton)mRootView.findViewById(R.id.btn_menu);
tvTitle=(TextView) mRootView.findViewById(R.id.tv_title);
flcontent=(FrameLayout) mRootView.findViewById(R.id.fl_content);
}
/*
* 数据初始化
*/
public void initData(){
}
public void setSlidingMenuEnable(boolean enable)
{
MainActivity MainUi= (MainActivity)mAcitivty;
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() {
tvTitle.setText("智慧北京");
setSlidingMenuEnable(false);
//向flcontent动态加载数据
TextView text=new TextView(mAcitivty);
text.setText("首页");
text.setTextColor(Color.RED);
text.setTextSize(25);
text.setGravity(Gravity.CENTER);
flcontent.addView(text);
}
}