Android UI-实现底部切换标签（fragment

比眉伴天荒 2022-03-19 17:10 215阅读 0赞

# **Android UI-实现底部切换标签（fragment)** #

## 前言 ##

本篇博客要分享的一个UI效果——实现底部切换标签，想必大家在一些应用上面遇到过这种效果了，最典型的就是微信了，可以左右滑动切换页面，也可以点击标签页滑动页面，它们是如何实现的呢，本篇博客为了简单只介绍如何实现点击底部切换标签页。

先来看看我们想实现的效果图：

![20150312175341956][]

这样的页面实现起来其实很简单的，首先我们从布局入手：

分为三部分

第一部分：顶部导航栏布局

第二部分：中部显示内容布局

第三部分：底部标签布局

/BottomTabDemo/res/layout/activity\_main.xml

以上是布局代码，下面就介绍如何通过点击标签切换Fragment：

我们会发现，初始的时候是选中第一个标签页，图片和字体的颜色区别于另外两个标签页，所以我们要做的就是切换标签的时候，就改变标签的状态

主要改两个内容：

*  图片
 *  文字颜色

然后我们切换标签显示的是不同的Fragment，这里我们有三个Fragment，所以我们定义三个不同的Fragment界面：

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/ZhidaoFragment.java

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/IWantKnowFragment.java

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/MeFragment.java

每个Fragment对应不同的布局文件：

/BottomTabDemo/res/layout/main\_tab1\_fragment.xml

/BottomTabDemo/res/layout/main\_tab2\_fragment.xml

/BottomTabDemo/res/layout/main\_tab3\_fragment.xml

ok，这些定义好之后，我们就在主界面上编写切换的代码了，如何对Fragment进行切换呢，定义以下方法：

/**  * 添加或者显示碎片  *   * @param transaction  * @param fragment  */ private void addOrShowFragment(FragmentTransaction transaction,   Fragment fragment) {  if (currentFragment == fragment)   return;  if (!fragment.isAdded()) { // 如果当前fragment未被添加，则添加到Fragment管理器中   transaction.hide(currentFragment)     .add(R.id.content_layout, fragment).commit();  } else {   transaction.hide(currentFragment).show(fragment).commit();  }  currentFragment = fragment; }

完整代码如下：

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/MainActivity.java

package com.xiaowu.bottomtab.demo;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTransaction;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;/** * 主Activity *  * @author wwj_748 *  */public class MainActivity extends FragmentActivity implements OnClickListener { // 三个tab布局 private RelativeLayout knowLayout, iWantKnowLayout, meLayout; // 底部标签切换的Fragment private Fragment knowFragment, iWantKnowFragment, meFragment,   currentFragment; // 底部标签图片 private ImageView knowImg, iWantKnowImg, meImg; // 底部标签的文本 private TextView knowTv, iWantKnowTv, meTv; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  initUI();  initTab(); } /**  * 初始化UI  */ private void initUI() {  knowLayout = (RelativeLayout) findViewById(R.id.rl_know);  iWantKnowLayout = (RelativeLayout) findViewById(R.id.rl_want_know);  meLayout = (RelativeLayout) findViewById(R.id.rl_me);  knowLayout.setOnClickListener(this);  iWantKnowLayout.setOnClickListener(this);  meLayout.setOnClickListener(this);  knowImg = (ImageView) findViewById(R.id.iv_know);  iWantKnowImg = (ImageView) findViewById(R.id.iv_i_want_know);  meImg = (ImageView) findViewById(R.id.iv_me);  knowTv = (TextView) findViewById(R.id.tv_know);  iWantKnowTv = (TextView) findViewById(R.id.tv_i_want_know);  meTv = (TextView) findViewById(R.id.tv_me); } /**  * 初始化底部标签  */ private void initTab() {  if (knowFragment == null) {   knowFragment = new ZhidaoFragment();  }  if (!knowFragment.isAdded()) {   // 提交事务   getSupportFragmentManager().beginTransaction()     .add(R.id.content_layout, knowFragment).commit();   // 记录当前Fragment   currentFragment = knowFragment;   // 设置图片文本的变化   knowImg.setImageResource(R.drawable.btn_know_pre);   knowTv.setTextColor(getResources()     .getColor(R.color.bottomtab_press));   iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);   iWantKnowTv.setTextColor(getResources().getColor(     R.color.bottomtab_normal));   meImg.setImageResource(R.drawable.btn_my_nor);   meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  } } @Override public void onClick(View view) {  switch (view.getId()) {  case R.id.rl_know: // 知道   clickTab1Layout();   break;  case R.id.rl_want_know: // 我想知道   clickTab2Layout();   break;  case R.id.rl_me: // 我的   clickTab3Layout();   break;  default:   break;  } } /**  * 点击第一个tab  */ private void clickTab1Layout() {  if (knowFragment == null) {   knowFragment = new ZhidaoFragment();  }  addOrShowFragment(getSupportFragmentManager().beginTransaction(), knowFragment);    // 设置底部tab变化  knowImg.setImageResource(R.drawable.btn_know_pre);  knowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));  iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);  iWantKnowTv.setTextColor(getResources().getColor(    R.color.bottomtab_normal));  meImg.setImageResource(R.drawable.btn_my_nor);  meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal)); } /**  * 点击第二个tab  */ private void clickTab2Layout() {  if (iWantKnowFragment == null) {   iWantKnowFragment = new IWantKnowFragment();  }  addOrShowFragment(getSupportFragmentManager().beginTransaction(), iWantKnowFragment);    knowImg.setImageResource(R.drawable.btn_know_nor);  knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  iWantKnowImg.setImageResource(R.drawable.btn_wantknow_pre);  iWantKnowTv.setTextColor(getResources().getColor(    R.color.bottomtab_press));  meImg.setImageResource(R.drawable.btn_my_nor);  meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal)); } /**  * 点击第三个tab  */ private void clickTab3Layout() {  if (meFragment == null) {   meFragment = new MeFragment();  }    addOrShowFragment(getSupportFragmentManager().beginTransaction(), meFragment);  knowImg.setImageResource(R.drawable.btn_know_nor);  knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);  iWantKnowTv.setTextColor(getResources().getColor(    R.color.bottomtab_normal));  meImg.setImageResource(R.drawable.btn_my_pre);  meTv.setTextColor(getResources().getColor(R.color.bottomtab_press));   } /**  * 添加或者显示碎片  *   * @param transaction  * @param fragment  */ private void addOrShowFragment(FragmentTransaction transaction,   Fragment fragment) {  if (currentFragment == fragment)   return;  if (!fragment.isAdded()) { // 如果当前fragment未被添加，则添加到Fragment管理器中   transaction.hide(currentFragment)     .add(R.id.content_layout, fragment).commit();  } else {   transaction.hide(currentFragment).show(fragment).commit();  }  currentFragment = fragment; }}

源码下载： [http://download.csdn.net/detail/wwj\_748/8495621][http_download.csdn.net_detail_wwj_748_8495621]

转载请注明：IT\_xiao小巫

博客地址： [http://blog.csdn.net/wwj\_748][http_blog.csdn.net_wwj_748]  
移动开发狂热者群：299402133

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

[20150312175341956]: /images/20220319/9be7d77a13ff4d4aafaebcc8c9f597e0.png
[http_download.csdn.net_detail_wwj_748_8495621]: http://download.csdn.net/detail/wwj_748/8495621
[http_blog.csdn.net_wwj_748]: http://blog.csdn.net/wwj_748
[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485