ViewPager+Fragment布局框架

分析

1. 先UI布局，顶部为菜单栏，中间为ViewPager，底部为RadioGroup
2. ViewPager+Fragment
   
   1. MyAadapter继承FragmentPagerAdapter
   2. MyActivity继承自FragmentActivity
   3. BaseFragment，于继承自它的其它Fragment
3. 根据选择不同的RadioGroup插入不同Fragment

具体详情，请看XML布局与代码实现

---

Java代码

public class MainActivity extends FragmentActivity {
    @ViewInject(R.id.rg)
    RadioGroup rg;
    @ViewInject(R.id.vp)
    ViewPager vp;
    @ViewInject(R.id.tv_title)
    TextView tvTitle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewUtils.inject(this);
        // 开始进入主界面，RadioGroup 先选中 第一个；
        rg.check(R.id.rb_1);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb_1:
                        vp.setCurrentItem(0);
                        tvTitle.setText("看书");
                        break;
                    case R.id.rb_2:
                        vp.setCurrentItem(1);
                        tvTitle.setText("书城");
                        break;
                    case R.id.rb_3:
                        vp.setCurrentItem(2);
                        tvTitle.setText("发现");
                        break;
                }
            }
        });
        fl.addView(left);
        // 需要获得支持Fragment的管理器，所以需要继承至FragmentActiviy；
        vp.setAdapter(new MyAdapter(getSupportFragmentManager()));

    }
    class MyAdapter extends FragmentPagerAdapter{

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
           return  FragmentUtils.getFragment(position);
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

/**
*   基类
*/
public abstract class BaseFragment extends Fragment {
    public FrameLayout fl;
    public View view;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        if(fl==null){
            fl = new FrameLayout(UIUtils.getContext());
            initView();
            fl.addView(view);
        }else{
            // 这一步不是特别理解，等有机会再慢慢领会
            ViewUtils.remove(fl);
        }
        return fl;
    }
    // 初始化每个Fragment的view
    public abstract void initView();
}

public class ViewUtils {
    public static void remove(View v){
        ViewParent parent = v.getParent();
        if (parent instanceof ViewGroup){
            ((ViewGroup) parent).removeView(v);
        }
    }
}

/**
*   书架fragment
*/
public class ShelfFragment extends BaseFragment {

    @Override
    public void initView() {
        // UIUtils.getContext()主要是获得上下文
         view = new TextView(UIUtils.getContext());
        ((TextView)view).setText("我在看书页面哦...");
        ((TextView)view).setTextSize(50);
        ((TextView)view).setTextColor(Color.BLUE);
    }

}

/**
*   书城fragment
*/
public class CityFragment extends BaseFragment {
    @Override
    public void initView() {
        view = new TextView(UIUtils.getContext());
        ((TextView)view).setText("我在书城页面哦...");
        ((TextView)view).setTextSize(50);
        ((TextView)view).setTextColor(Color.GREEN);
    }

}

/**
*   发现fragment
*/
public class FindFragment extends BaseFragment {
    @Override
    public void initView() {
        view = new TextView(UIUtils.getContext());
        ((TextView)view).setText("我在发现页面哦...");
        ((TextView)view).setTextSize(50);
        ((TextView)view).setTextColor(Color.RED);
    }
}

public class UIUtils {
    // 获得上下文
    public static Context getContext(){
        return BaseApplication.getApplication();
    }
}

/**
*   单例模式，获得上下文，其中需要在配置里填写
*     <application
*       android:name=".BaseApplication"
*     </application>
*   
*/
public class BaseApplication extends Application{
    private static BaseApplication application;

    @Override
    public void onCreate() {
        super.onCreate();
        // 获得上下文
        application = this;
    }
    public static Context getApplication(){
        return application;
    }
}

/**
*   重写ViewPager里的onTouchEvent（）和onInterceptTouchEvent（），只能
*   通过点击下边RadioButton移动页面
*/
public class NoScrollViewPager extends ViewPager {
    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NoScrollViewPager(Context context) {
        super(context);
    }

    /**
     * 任何触摸操作都无效
     * @param ev
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }

}

---

XML代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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"
    tools:context="com.example.myreader.MainActivity"
    android:id="@+id/dl">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- 头部布局 -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#617da2"
            android:gravity="center_vertical">
            <ImageView
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_marginLeft="15dp"
                android:background="@drawable/face"
                android:id="@+id/iv_face"/>
            <ImageView
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_marginRight="20dp"
                android:background="@drawable/search"
                android:id="@+id/iv_search"
                android:layout_alignParentRight="true" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:layout_toRightOf="@id/iv_face"
                android:layout_toLeftOf="@id/iv_search"
                android:text="看书"
                android:textColor="#ffffff"
                android:gravity="center"
                android:textSize="20sp"
                android:id="@+id/tv_title" />
        </RelativeLayout>
        <!-- 中间布局 -->
        <!-- 注意这地方，已经重写了ViewPager -->
        <com.example.myreader.view.NoScrollViewPager
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@+id/vp">
        </com.example.myreader.view.NoScrollViewPager>
        <!-- 底部布局 -->
        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/rg"
            android:background="#f2f2f2">
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:button="@null"
                android:gravity="center"
                android:layout_weight="1"
                android:drawableTop="@drawable/rb_1_selector"
                android:id="@+id/rb_1"
                android:text="看书"
                android:textSize="10sp"
                android:textColor="@drawable/rb_color"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:button="@null"
                android:gravity="center"
                android:layout_weight="1"
                android:drawableTop="@drawable/rb_2_selector"
                android:id="@+id/rb_2"
                android:text="书城"
                android:textSize="10sp"
                android:textColor="@drawable/rb_color"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:button="@null"
                android:gravity="center"
                android:layout_weight="1"
                android:drawableTop="@drawable/rb_3_selector"
                android:id="@+id/rb_3"
                android:text="发现"
                android:textSize="10sp"
                android:textColor="@drawable/rb_color"
                />
        </RadioGroup>

    </LinearLayout>


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "left"
        android:background="#f2f5f2"
        android:id="@+id/fl_menu">
    </FrameLayout>
</android.support.v4.widget.DrawerLayout>

---

执行效果图