Android之Fragment实现界面切换学习笔记

Android之Fragment实现界面切换学习笔记

　　今天来实现一个简单的界面切换功能，关于页面的切换相信大家都非常熟悉，比如微信、QQ、支付宝等这些常用软件都会有界面切换功能，根据软件的要求不同，我们所设计的页面切换个数也会不同，今天我就写一个四个基本页面切换的小Demo，具体的代码功能都会在注释上写上。
　　
　　PS:如果想和是我一样的效果，记得先把系统默认的ActionBar去掉，在头部添加我们自定义的top_bar，我们只需要在AndroidManifest.xml中修改一下android:theme="@style/AppTheme"为以下代码
　android:theme="@style/Theme.AppCompat.Light.NoActionBar"
　　
　　
　　下面先看看界面效果吧：

BaseFragment.java

/** * 公用的界面，考虑到通用性，就先写一个简单的BaseFragment吧 * 所有子类界面只需要设置简单的界面内容即可 */public abstract class BaseFragment extends Fragment {    //公用内容设置    private TextView mBaseTvTitle;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View view =  inflater.inflate(R.layout.fragment_base, container, false);        mBaseTvTitle = ((TextView) view.findViewById(R.id.BaseTvTitle));        setTitle(mBaseTvTitle);        return view;    }    /**     * 让子类去实现对应的内容     * @param tvTitle     */    protected abstract void setTitle(TextView tvTitle);}

FLFragment .java

/** * 分类Fragment */public class FLFragment extends BaseFragment {    /**     * 设置对应的内容即可     * @param tvTitle     */    @Override    protected void setTitle(TextView tvTitle) {        tvTitle.setText("分类界面");        tvTitle.setTextSize(30);        tvTitle.setTextColor(getResources().getColor(R.color.colorPrimaryDark));    }}

RMFragment .java

/** * 热门Fragment */public class RMFragment extends BaseFragment {    @Override    protected void setTitle(TextView tvTitle) {        tvTitle.setText("热门界面");        tvTitle.setTextSize(30);        tvTitle.setTextColor(getResources().getColor(R.color.colorPrimaryDark));    }}

Fragment.java

/** *  指南Fragment */public class ZNFragment extends BaseFragment {    @Override    protected void setTitle(TextView tvTitle) {        tvTitle.setText("指南界面");        tvTitle.setTextSize(30);        tvTitle.setTextColor(getResources().getColor(R.color.colorPrimaryDark));    }}

WDFragment .java

/** * 我的Fragment */public class WDFragment extends BaseFragment {    @Override    protected void setTitle(TextView tvTitle) {        tvTitle.setText("我的界面");        tvTitle.setTextSize(30);        tvTitle.setTextColor(getResources().getColor(R.color.colorPrimaryDark));    }}

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    //分类页面常量    private final int FL = 1;    //指南页面常量    private final int ZN = 2;    //热门页面常量    private final int RM = 3;    //我的页面常量    private final int WD = 4;    //指南页面布局控件    private LinearLayout mLinZN;    //分类页面布局控件    private LinearLayout mLinFL;    //热门页面布局控件    private LinearLayout mLinRM;    //我的页面布局控件    private LinearLayout mLinWD;    //分类Fragment    private Fragment mFLFragment;    //指南Fragment    private Fragment mZNFragment;    //我的Fragment    private Fragment mWDFragment;    //热门Fragment    private Fragment mRMFragment;    //热门ImageButton控件    private ImageButton mRMIBtn;    //指南ImageButton控件    private ImageButton mZNIBtn;    //分类ImageButton控件    private ImageButton mFLIBtn;    //我的ImageButton控件    private ImageButton mWDIBtn;    //热门文字控件    private TextView mRMTv;    //指南文字控件    private TextView mZNTv;    //分类文字控件    private TextView mFLTv;    //我的文字控件    private TextView mWDTv;    private FragmentManager manager;    private FragmentTransaction transaction;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        event();    }    /**     * 初始化所有控件     */    private void initView() {        mLinZN = (LinearLayout) findViewById(R.id.mLinZN);        mLinFL = (LinearLayout) findViewById(R.id.mLinFenLei);        mLinRM = (LinearLayout) findViewById(R.id.mLinReMen);        mLinWD = (LinearLayout) findViewById(R.id.mLinUser);        mRMIBtn = (ImageButton) findViewById(R.id.mBtnRM);        mZNIBtn = (ImageButton) findViewById(R.id.mBtnZN);        mFLIBtn = (ImageButton) findViewById(R.id.mBtnFL);        mWDIBtn = (ImageButton) findViewById(R.id.mBtnWD);        mRMTv = (TextView) findViewById(R.id.mTvReMen);        mZNTv = (TextView) findViewById(R.id.mTvZhiNan);        mFLTv = (TextView) findViewById(R.id.mTvFenLei);        mWDTv = (TextView) findViewById(R.id.mTvUser);        manager = getSupportFragmentManager();    }    /**     * 初始化事件     */    private void event() {        mLinFL.setOnClickListener(this);        mLinRM.setOnClickListener(this);        mLinWD.setOnClickListener(this);        mLinZN.setOnClickListener(this);    }    /**     * 初始化所有控件状态为原始状态     */    private void initColor() {        mRMTv.setTextColor(getResources().getColor(R.color.normal));        mZNTv.setTextColor(getResources().getColor(R.color.normal));        mFLTv.setTextColor(getResources().getColor(R.color.normal));        mWDTv.setTextColor(getResources().getColor(R.color.normal));        mRMIBtn.setBackgroundResource(R.mipmap.remen_normal);        mZNIBtn.setBackgroundResource(R.mipmap.zhinan_normal);        mFLIBtn.setBackgroundResource(R.mipmap.fenlei_normal);        mWDIBtn.setBackgroundResource(R.mipmap.user_normal);    }    /**     * 隐藏所有已经显示了Fragment     * @param transaction     */    private void hint(FragmentTransaction transaction) {        if(mZNFragment != null){            transaction.hide(mZNFragment);        }        if(mFLFragment != null){            transaction.hide(mFLFragment);        }        if(mWDFragment != null){            transaction.hide(mWDFragment);        }        if(mRMFragment != null){            transaction.hide(mRMFragment);        }    }    @Override    public void onClick(View view) {        initColor();        switch (view.getId()){            case R.id.mLinFenLei:                //添加分类布局的Fragment                addFragment(FL);                break;            case R.id.mLinReMen:                //添加热门布局的Fragment                addFragment(RM);                break;            case R.id.mLinUser:                //添加我的布局的Fragment                addFragment(WD);                break;            case R.id.mLinZN:                //添加指南布局的Fragment                addFragment(ZN);                break;        }    }    /**     * 添加对应的布局，根据传来的ID进行添加     * @param index     */    private void addFragment(int index){        //获取事物        transaction = manager.beginTransaction();        //每次先隐藏所有的Fragment，然后加载当前要显示的Fragment        hint(transaction);        switch (index){            case FL:                //设置当前的文字和ImageButton为橙色                mFLTv.setTextColor(getResources().getColor(R.color.pressed));                mFLIBtn.setBackgroundResource(R.mipmap.fenlei_pressed);                //初次加载Fragment先判断是否为空                if(mFLFragment == null){                    mFLFragment = new FLFragment();                    //第一次添加到Fragment中                    transaction.add(R.id.mFrame,mFLFragment);                }else{                    //以后的每一次只需要显示即可                    transaction.show(mFLFragment);                }                break;            case RM:                mRMTv.setTextColor(getResources().getColor(R.color.pressed));                mRMIBtn.setBackgroundResource(R.mipmap.remen_pressed);                if(mRMFragment == null){                    mRMFragment = new RMFragment();                    transaction.add(R.id.mFrame,mRMFragment);                }else{                    transaction.show(mRMFragment);                }                break;            case WD:                mWDTv.setTextColor(getResources().getColor(R.color.pressed));                mWDIBtn.setBackgroundResource(R.mipmap.user_pressed);                if(mWDFragment == null){                    mWDFragment = new WDFragment();                    transaction.add(R.id.mFrame,mWDFragment);                }else{                    transaction.show(mWDFragment);                }                break;            case ZN:                mZNTv.setTextColor(getResources().getColor(R.color.pressed));                mZNIBtn.setBackgroundResource(R.mipmap.zhinan_pressed);                if(mZNFragment == null){                    mZNFragment = new ZNFragment();                    transaction.add(R.id.mFrame,mZNFragment);                }else{                    transaction.show(mZNFragment);                }                break;        }        //最后记得提交        transaction.commit();    }}

fragment_base.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:id="@+id/BaseTvTitle"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="@string/hello_blank_fragment" /></FrameLayout>

activity_main.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"    >    <include layout="@layout/top_bar" android:id="@+id/mTopBar"/>    <FrameLayout        android:id="@+id/mFrame"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:layout_below="@+id/mTopBar"        >    </FrameLayout>    <include layout="@layout/foot_bar" android:id="@+id/mFootBar"        /></LinearLayout>

foot_bar.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="65dp"    android:orientation="vertical">    <!--线条灰色线条-->    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="@drawable/line" />    <LinearLayout        android:id="@+id/mFootBar"        android:layout_width="match_parent"        android:layout_height="65dp"        android:layout_alignParentBottom="true"        android:gravity="center"        android:orientation="horizontal">        <LinearLayout            android:id="@+id/mLinZN"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageButton                android:id="@+id/mBtnZN"                android:layout_width="25dp"                android:layout_height="25dp"                android:background="@mipmap/zhinan_pressed"                android:button="@null"                android:clickable="false" />            <TextView                android:id="@+id/mTvZhiNan"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="5dp"                android:text="指南"                android:textColor="#eb4f38" />        </LinearLayout>        <LinearLayout            android:id="@+id/mLinReMen"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageButton                android:id="@+id/mBtnRM"                android:layout_width="25dp"                android:layout_height="25dp"                android:background="@mipmap/remen_normal"                android:clickable="false" />            <TextView                android:id="@+id/mTvReMen"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="5dp"                android:text="热门" />        </LinearLayout>        <LinearLayout            android:id="@+id/mLinFenLei"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageButton                android:id="@+id/mBtnFL"                android:layout_width="25dp"                android:layout_height="25dp"                android:background="@mipmap/fenlei_normal"                android:clickable="false" />            <TextView                android:id="@+id/mTvFenLei"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="5dp"                android:text="分类" />        </LinearLayout>        <LinearLayout            android:id="@+id/mLinUser"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageButton                android:id="@+id/mBtnWD"                android:layout_width="25dp"                android:layout_height="25dp"                android:background="@mipmap/user_normal"                android:clickable="false" />            <TextView                android:id="@+id/mTvUser"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="5dp"                android:text="我的" />        </LinearLayout>    </LinearLayout></LinearLayout>

top_bar.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="50dp"    android:orientation="horizontal"    android:background="#FF2D47"    >    <ImageButton        android:layout_width="28dp"        android:layout_height="28dp"        android:background="@mipmap/shape1"        android:layout_gravity="center_vertical"        android:layout_marginLeft="10dp"        />    <TextView        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:text="礼物说"        android:textSize="25sp"        android:textColor="#ffffff"        android:gravity="center"        android:layout_gravity="center"        />    <ImageButton        android:layout_width="30dp"        android:layout_height="30dp"        android:background="@mipmap/search"        android:layout_gravity="center"        android:layout_marginRight="10dp"        /></LinearLayout>

具体的代码就已经完成了，这里的切换只能通过手动点击下面的标签进行切换，在接下来的学习中我们还会实现一个模仿微信的界面切换，他是可以通过点击选择切换，也可以选择滑动界面进行切换点击+滑动切换界面；如果需要该Demo源码的请点击源码下载，里面有所有图标的资源。