当前位置：移动技术网 > 移动技术>移动开发>Android > Android UI实现底部切换标签fragment

Android UI实现底部切换标签fragment

2019年07月24日 | 移动技术网移动技术 | 我要评论

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

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

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

/bottomtabdemo/res/layout/activity_main.xml

<framelayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <relativelayout 
  android:id="@+id/rl_main" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <!-- 顶部 --> 
 
  <relativelayout 
   android:id="@+id/top_tab" 
   android:layout_width="match_parent" 
   android:layout_height="50dip" 
   android:background="@color/topbar_bg" > 
 
   <imageview 
    android:id="@+id/iv_logo" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerinparent="true" 
    android:focusable="false" 
    android:src="@drawable/zhidao_logo" 
    android:contentdescription="@null" /> 
 
  </relativelayout> 
 
  <!-- 底部tab --> 
 
  <linearlayout 
   android:id="@+id/ll_bottom_tab" 
   android:layout_width="match_parent" 
   android:layout_height="54dp" 
   android:layout_alignparentbottom="true" 
   android:gravity="center_vertical" 
   android:orientation="horizontal" 
   android:baselinealigned="true"> 
 
   <relativelayout 
    android:id="@+id/rl_know" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1.0" > 
 
    <imageview 
     android:id="@+id/iv_know" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerhorizontal="true" 
     android:src="@drawable/btn_know_nor" 
     android:contentdescription="@null"/> 
 
    <textview 
     android:id="@+id/tv_know" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/iv_know" 
     android:layout_centerhorizontal="true" 
     android:text="@string/bottom_tab_know" 
     android:textcolor="@color/bottomtab_normal" 
     android:textsize="12sp" /> 
   </relativelayout> 
 
   <relativelayout 
    android:id="@+id/rl_want_know" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1.0" > 
 
    <imageview 
     android:id="@+id/iv_i_want_know" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerhorizontal="true" 
     android:src="@drawable/btn_wantknow_nor" 
     android:contentdescription="@null" /> 
 
    <textview 
     android:id="@+id/tv_i_want_know" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/iv_i_want_know" 
     android:layout_centerhorizontal="true" 
     android:text="@string/bottom_tab_wantknow" 
     android:textcolor="@color/bottomtab_normal" 
     android:textsize="12sp" /> 
   </relativelayout> 
 
   <relativelayout 
    android:id="@+id/rl_me" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1.0" > 
 
    <imageview 
     android:id="@+id/iv_me" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerhorizontal="true" 
     android:src="@drawable/btn_my_nor" 
     android:contentdescription="@null" /> 
     
 
    <textview 
     android:id="@+id/tv_me" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/iv_me" 
     android:layout_centerhorizontal="true" 
     android:text="@string/bottom_tab_my" 
     android:textcolor="@color/bottomtab_normal" 
     android:textsize="12sp" /> 
   </relativelayout> 
  </linearlayout> 
 
  <!-- 内容部分， fragment切换 --> 
 
  <linearlayout 
   android:id="@+id/content_layout" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:layout_above="@+id/line" 
   android:layout_below="@+id/top_tab" 
   android:orientation="vertical" > 
  </linearlayout> 
 
  <view 
   android:id="@+id/line" 
   android:layout_width="match_parent" 
   android:layout_height="1dp" 
   android:layout_above="@id/ll_bottom_tab" 
   android:background="@color/line" /> 
 </relativelayout> 
  
</framelayout>

以上是布局代码，下面就介绍如何通过点击标签切换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; 
 } 
 
}

源码下载：

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Android 自带的返回键功能

两步实现 Android 自带返回功能和返回图片1. 在layout 中的布局的头部添加下面代码 <an... [阅读全文]
Activity的生命周期

为了更加生动的阐述 Activity 的生命周期，我们采用一个小例子来看看吧创建两个 Activity界面 A ... [阅读全文]
android 打包－－混淆配置详解

为了应用的安全，通常我们将Android项目打包时进行混淆加密。会用无意义的短变量去重命名类、变量、方法，以免代... [阅读全文]
LongClick原理、上下文菜单原理、EditText长按弹窗原理、WebView长按弹窗自定义、修复WebView全选重复bug ———————————————— 版权声明：本文为CSDN博主「

长按事件Android中按住一个View不松手，会触发长按事件。使用的场景1、EditText的长按快捷操作。2... [阅读全文]
ViewPager2，用起来！

一、缘起：ViewPager2推出已经有一段时间了，而且官方推出了稳定版本Version 1.0.0，相比Vie... [阅读全文]
CrashHandler全局异常捕获

应用在日常的开发中，我们经常需要去Logcat测试我们的App，但由于很多原因，Android Monitor会... [阅读全文]
JobScheduler 实现特定时间，特定条件（系统空闲，电池电量，磁盘空间 ……）下执行任务

JobScheduler 用法使用场景应用保活特定时间，特定条件（系统空闲，电池电量，磁盘空间 ……）下运行程序... [阅读全文]
为什么说国际站要做长尾词排名？

首先我们要明白一个点，长尾词越长，他就越精准，而且用的人少，当你一覆盖，你的产品就能在首页出现，这就是自然排名，... [阅读全文]
Android系统启动概览

1.Android启动概览。2.Art与Dalvik区别。. [阅读全文]
温习Android基础知识——《第一行代码（第三版）》读书笔记 Chapter 10 Service

第十章：后台默默的劳动者，探究Service目录第十章：后台默默的劳动者，探究ServiceService是什么... [阅读全文]

网友评论


验证码：

Android UI实现底部切换标签fragment

2019年07月24日 | 移动技术网移动技术 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论