Android UI实现底部切换标签fragment

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

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

这样的页面实现起来其实很简单的，首先我们从布局入手：
 分为三部分
 第一部分：顶部导航栏布局
 第二部分：中部显示内容布局
 第三部分：底部标签布局

 /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进行切换呢，定义以下方法：

 
 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; 
 
 
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(); 
 } 
 
  
 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; 
  } 
 } 
 
  
 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)); 
 } 
 
  
 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)); 
 
 } 
 
  
 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)); 
   
 } 
 
  
 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://xiazai.jb51.net/201612/yuanma/AndroidBottomTab(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。