我的长大app开发教程第三弹：实现四个子页面绑定RadioButton

在开始之前先上一张图

在上一节中我们实现了底部Button，这一弹我们要实现点击四个按钮分别切换到不同页面，我们可以把页面分为两部分，顶部栏和中间内容部分，我们可以通过线性布局包裹两部分内容，顶部栏又是一个线性布局：一个TextView，一个ImageButton，中间内容采用帧布局。

1、项目结构：

2、四个页面的基类BasePager

package com.vitoyan.myangtzeu.base;

import android.content.Context;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TextView;

import com.vitoyan.myangtzeu.R;
import com.vitoyan.myangtzeu.activity.MainActivity;

/**
 * 作者：Vito-Yan
 * 作用：基类或者说公共类
 * HomePager,TopicPager,FindPager,MyPager都继承BasePager
 */
public class BasePager {

    /**
     * 上下文
     */
    public final Context context;//MainActivity

    /**
     * 视图，代表各个不同的页面
     */
    public View rootView;
    /**
     * 显示标题
     */
    public TextView tv_title;

    /**
     * 点击侧滑的
     */
    public ImageButton ib_menu;

    /**
     * 加载各个子页面
     */
    public FrameLayout fl_content;

    public BasePager(Context context) {
        this.context = context;
        //构造方法一执行，视图就被初始化了
        rootView = initView();
    }

    /**
     * 用于初始化公共部分视图，并且初始化加载子视图的FrameLayout
     * @return
     */
    private View initView() {
        //基类的页面
        View view = View.inflate(context, R.layout.base_pager,null);
        tv_title = (TextView) view.findViewById(R.id.tv_title);
        ib_menu = (ImageButton) view.findViewById(R.id.ib_menu);
        fl_content = (FrameLayout) view.findViewById(R.id.fl_content);
        ib_menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MainActivity mainActivity = (MainActivity) context;
                mainActivity.getSlidingMenu().toggle();//关<->开
            }
        });
        return view;
    }

    /**
     * 初始化数据;当孩子需要初始化数据;或者绑定数据;联网请求数据并且绑定的时候，重写该方法
     */
    public void initData(){

    }
}

3、首页HomePager继承BasePager，重写initData方法，加载数据

package com.vitoyan.myangtzeu.pager;

import android.content.Context;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

import com.vitoyan.myangtzeu.base.BasePager;
import com.vitoyan.myangtzeu.utils.LogUtil;

/**
 * 作者：Vito-Yan
 * 作用：首页页面
 */
public class HomePager extends BasePager {
    public HomePager(Context context) {
        super(context);
    }

    @Override
    public void initData() {
        super.initData();
        LogUtil.e("首页页面数据被初始化了..");
        ib_menu.setVisibility(View.VISIBLE);
        //1.设置标题
        tv_title.setText("资讯");
        //2.联网请求，得到数据，创建视图
        TextView textView = new TextView(context);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.BLACK);
        textView.setTextSize(25);
        //3.把子视图添加到BasePager的FrameLayout中
        fl_content.addView(textView);
        //4.绑定数据
        textView.setText("首页页面内容");

    }
}

4、titlebar.xml：顶部栏布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/top_tab_bg">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="资讯"
        android:textColor="@android:color/black"
        android:textSize="23sp" />

    <ImageButton
        android:id="@+id/ib_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:background="@android:color/transparent"
        android:src="@drawable/menu_black"
        android:visibility="gone" />

</RelativeLayout>

5、base_pager.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">

    <!--标题栏-titlebar-->
   <include layout="@layout/titlebar"/>
    <!--各个页面的视图，都是添加到FrameLayout里面，addView-->
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

6、ContentFragment：

在ContentFragment中，设置了ViewPager的适配器，增加了两个内部类和一个私有方法

ContentFragmentAdapter：初始化各个页面的实例

MyOnCheckedChangeListener：把四个页面放入ArrayList集合中，通过绑定各个页面的id，达到切换的效果

MyOnPageChangeListener：通过监听某个具体的页面，返回选中页面的位置，在适配器中只用初始化一个单独页面而不是几个页面，优化资源，提高效率。isEnableSlidingMenu：是否可以左侧滑动的方法

package com.vitoyan.myangtzeu.fragment;

import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.RadioGroup;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.vitoyan.myangtzeu.R;
import com.vitoyan.myangtzeu.activity.MainActivity;
import com.vitoyan.myangtzeu.adapter.ContentFragmentAdapter;
import com.vitoyan.myangtzeu.base.BaseFragment;
import com.vitoyan.myangtzeu.base.BasePager;
import com.vitoyan.myangtzeu.pager.FindPager;
import com.vitoyan.myangtzeu.pager.HomePager;
import com.vitoyan.myangtzeu.pager.MyPager;
import com.vitoyan.myangtzeu.pager.TopicPager;
import com.vitoyan.myangtzeu.utils.LogUtil;
import com.vitoyan.myangtzeu.view.NoScrollViewPager;

import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import java.util.ArrayList;

/**
 * 作者：Vito-Yan
 * 作用：正文Fragment
 */
public class ContentFragment extends BaseFragment {

    //2.初始化控件
    @ViewInject(R.id.viewpager)
    private NoScrollViewPager viewpager;

    @ViewInject(R.id.rg_main)
    private RadioGroup rg_main;

    /**
     * 装五个页面的集合
     */
    private ArrayList<BasePager> basePagers;

    @Override
    public View initView() {
        LogUtil.e("正文视图被初始化了");
        View view = View.inflate(context, R.layout.content_fragment,null);
//        viewpager = view.findViewById(R.id.viewpager);
//        rg_main = view.findViewById(R.id.rg_main);
        //1.把视图注入到框架中，让ContentFragment.this和View关联起来
        x.view().inject(ContentFragment.this,view);
        return view;
    }

    @Override
    public void initData() {
        super.initData();
        LogUtil.e("正文数据被初始化了");

        //初始化四个页面，并且放入集合中
        basePagers = new ArrayList<>();
        basePagers.add(new HomePager(context));//首页页面
        basePagers.add(new TopicPager(context));//话题页面
        basePagers.add(new FindPager(context));//发现页面
        basePagers.add(new MyPager(context));//我的页面

        //设置ViewPager的适配器
        viewpager.setAdapter(new ContentFragmentAdapter(basePagers));

        //设置RadioGroup的选中状态改变的监听
        rg_main.setOnCheckedChangeListener(new MyOnCheckedChangeListener());

        //监听某个页面被选中，初始对应的页面的数据
        viewpager.addOnPageChangeListener(new MyOnPageChangeListener());

        basePagers.get(0).initData();

        //设置默认选中首页
        rg_main.check(R.id.rb_home);

        //设置模式SlidingMenu不可以滑动
        isEnableSlidingMenu(SlidingMenu.TOUCHMODE_NONE);
    }

    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        /**
         * 当某个页面被选中的时候回调这个方法
         * @param position 被选中页面的位置
         */
        @Override
        public void onPageSelected(int position) {
            //            BasePager basePager = basePagers.get(position);
            //调用被选中的页面的initData方法
            basePagers.get(position).initData();
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    class MyOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener {

        /**
         *
         * @param group RadioGroup
         * @param checkedId 被选中的RadioButton的id
         */
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.rb_home://首页radioButton的id
                    viewpager.setCurrentItem(0,false);
                    isEnableSlidingMenu(SlidingMenu.TOUCHMODE_FULLSCREEN);
                    break;
                case R.id.rb_topic://话题radioButton的id
                    viewpager.setCurrentItem(1,false);
                    isEnableSlidingMenu(SlidingMenu.TOUCHMODE_NONE);
                    break;
                case R.id.rb_find://发现radioButton的id
                    viewpager.setCurrentItem(2,false);
                    isEnableSlidingMenu(SlidingMenu.TOUCHMODE_NONE);
                    break;
                case R.id.rb_my://我的RadioButton的id
                    viewpager.setCurrentItem(3,false);
                    isEnableSlidingMenu(SlidingMenu.TOUCHMODE_NONE);
                    break;
            }

        }
    }

    /**
     根据传人的参数设置是否让SlidingMenu可以滑动
     */
    private void isEnableSlidingMenu(int touchmodeFullscreen) {
        MainActivity mainActivity = (MainActivity) context;
        mainActivity.getSlidingMenu().setTouchModeAbove(touchmodeFullscreen);
    }

}

7、ContentFragmentAdapter

package com.vitoyan.myangtzeu.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import com.vitoyan.myangtzeu.base.BasePager;

import java.util.ArrayList;

/**
 * 作者：Vito-Yan
 * 作用：ContentFragmentAdapter
 */
public class ContentFragmentAdapter extends PagerAdapter {

    private final ArrayList<BasePager> basePagers;

    public ContentFragmentAdapter(ArrayList<BasePager> basePagers){
        this.basePagers = basePagers;
    }

    @Override
    public int getCount() {
        return basePagers.size();
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        BasePager basePager = basePagers.get(position);//各个页面的实例
        View rootView = basePager.rootView;//各个子页面
        //调用各个页面的initData()
//            basePager.initData();//初始化数据
        container.addView(rootView);
        return rootView;
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view ==object;
    }

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

具体源代码可以在我的github上查看：https://github.com/Vito-Yan/MYangtzeu