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源码的请点击源码下载，里面有所有图标的资源。