Android UI实现底部切换标签fragment

本篇博客要分享的一个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;
 } 

} 

源码下载:http://xiazai.jb51.net/201612/yuanma/AndroidBottomTab(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-12-11

Android开发常用标签小结

本文较为详细的总结了Android开发常用标签.分享给大家供大家参考.具体如下: android中inputType android中inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.这也大大的方便的操作.有时需要虚拟键盘只为字符或只为数字.所以inputType尤为重要. android:paddingLeft与android:layout_marginLeft的区别 当按钮分别设置以上两个属性时,得到的效果是不一样的. android:paddingLeft

Android Navigation TabBar控件实现多彩标签栏

先看看效果图: 源码下载:Android Navigation TabBar控件实现多彩标签栏 代码: MainActivity.java package com.bzu.gxs.meunguide; import android.app.Activity; import android.graphics.Color; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; im

Android中使用include标签和merge标签重复使用布局

尽管Android提供了各种组件来实现小而可复用的交互元素,你也可能因为布局需要复用一个大组件.为了高效复用完整布局,你可以使用<include/>和<merge/>标签嵌入另一个布局到当前布局.所以当你通过写一个自定义视图创建独立UI组件,你可以放到一个布局文件里,这样更容易复用. 复用布局因为其允许你创建可复用的复杂布局而显得非常强大.如,一个 是/否 按钮面板,或带描述文本的自定义进度条.这同样意味着,应用里多个布局里共同的元素可以被提取出来,独立管理,然后插入到每个布局里.

Android实现热门标签的流式布局

一.概述: 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出) 类似的自定义布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点: 1.流式布局的特点以及应用场景     特点:当上面一行的空间不够容纳新的TextView时候,     才开辟下一行的空间 原理图:    场景:主要用于关键词搜索或者热门标签等场景 2.自定义ViewGroup,重点重写下面两

解析android中include标签的使用

在一个项目中我们可能会需要用到相同的布局设计,如果都写在一个xml文件中,代码显得很冗余,并且可读性也很差,所以我们可以把相同布局的代码单独写成一个模块,然后用到的时候可以通过<include /> 标签来重用layout代码.app_title.xml: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><RelativeLayout android:id="@+id/titl

解析在Android中为TextView增加自定义HTML标签的实现方法

Android中的TextView,本身就支持部分的Html格式标签.这其中包括常用的字体大小颜色设置,文本链接等.使用起来也比较方便,只需要使用Html类转换一下即可.比如: textView.setText(Html.fromHtml(str)); 然而,有一种场合,默认支持的标签可能不够用.比如,我们需要在textView中点击某种链接,返回到应用中的某个界面,而不仅仅是网络连接,如何实现? 经过几个小时对android中的Html类源代码的研究,找到了解决办法,并且测试通过. 先看Htm

Android开发技巧之在a标签或TextView控件中单击链接弹出Activity(自定义动作)

在5.2.1节和5.2.2节介绍了<a>标签以及TextView自动识别的特殊文本(网址.电话号.Email等),这些都可以通过单击来触发不同的动作.虽然这些单击动作已经可以满足大多数需要了,但如果读者想在单击链接时执行任意自定义的动作,那么本节的内容非看不可. 现在让我们使用5.2.1节介绍的方法重新查看Html.java文件的内容,随便找一个处理Html标签的方法,例 如,endA方法.该方法用于处理</a>标签.我们会发现在该方法中如下的语句. text.setSpan(ne

android配合viewpager实现可滑动的标签栏示例分享

复制代码 代码如下: package com.example.playtabtest.view; import com.example.playtabtest.R; import android.app.Activity;import android.content.Context;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;impor

Android TextView显示Html类解析的网页和图片及自定义标签用法示例

本文实例讲述了Android TextView显示Html类解析的网页和图片及自定义标签.分享给大家供大家参考,具体如下: Android系统显示HTML网页的最佳控件为WebView,有时候为了满足特定需求,需要在TextView中显示HTML网页.图片及解析自定义标签. 1.TextView显示Html类解析的网页 CharSequence richText = Html.fromHtml("<strong>萝卜白菜的博客</strong>--<a href='

Android入门之ActivityGroup+GridView实现Tab分页标签的方法

在Android程序中很多客户端软件和浏览器软件都喜欢用Tab分页标签来搭建界面框架.读者也许会马上想到使用TabHost 与 TabActivity的组合,其实最常用的不是它们,而是由GridView与ActivityGroup的组合.每当用户在GridView选中一项,ActivityGroup就把该项对应的Activity的Window作为View添加到ActivityGroup所指定的容器(LinearLayout)中. 先来贴出本例运行的效果图如下: ImageAdapter是本实例的

Android入门之使用eclipse进行源码开发的方法

本文实例讲述了Android入门之使用eclipse进行源码开发的方法.分享给大家供大家参考,具体如下: 一.版本说明: 1. eclipse for javaEE 3.5.2 2. jdk1.6 3. adt12.0 4. linux/Ubuntu10.04 或者 linux/ubuntu10.10 二.准备工作: 1. 下载 Android2.3.7 源码 欲了解具体内容可以参看 android 官网. 2. 编译源码 必须编译源码,否则会引发很多问题.记住:如果下载没问题的话,编译只是时间

基于GridView和ActivityGroup实现的TAB分页(附源码)

分页大家都会用Android的TabHost和TabActivity的组合,今天我这里实现的是GridView和ActivityGroup实现的分页,这里需要将Activity转换成Window,然后再换成成View添加到容器中,效果如下  1.布局文件底部放一个GridView,然后一个LinearLayout容器在GridView之上,LinearLayout用于装载Activity的,这里布局位置错误,运行程序会抛异常,修改在下面 复制代码 代码如下: <RelativeLayout xm

Android入门之源码开发基础教程

本文讲述了Android入门之源码开发基础教程.分享给大家供大家参考,具体如下: 下载 Android 源码之后,接下来就是学习或者进行开发. 在开发之前,谈一些开发必备知识或者工具,工欲善其事必先利其器嘛! 在前面一篇<Android入门之使用eclipse进行源码开发的方法>中基本上说了开发使用工具. 但是我们如何使用模拟器开发呢?! 当然你去删除或者增加app到模拟器就不可以按常规来操作了,花 5 -10 分钟了解一下,如果你有需要. 0. 编译源码 直接在下载的源码根目录下面,执行:

NET Core TagHelper实现分页标签

这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.jb51.net/article/89272.htm,今天分享的是net core的另外一种能写分页标签的方法具体是继承TagHelper,如下将讲述实现一个简单分页和总要注意步奏. 1.继承父类TagHelper并重写Process方法(这里还有一个异步的方法ProcessAsync各位可以自己尝试下) 2.注意:怎么在试图页面使用自定

Android实现基于滑动的SQLite数据分页加载技术(附demo源码下载)

本文实例讲述了Android实现基于滑动的SQLite数据分页加载技术.分享给大家供大家参考,具体如下: main.xml如下: <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_settings" android:orderInCategory="100" android:showAs

Android提高之SQLite分页读取实现方法

一般来说,Android自身就包含了常用于嵌入式系统的SQLite,这样就免去了开发者自己移植安装的功夫.SQLite 支持多数SQL92标准,很多常用的SQL命令都能在SQLite上面使用,除此之外Android还提供了一系列自定义的方法去简化对SQLite数据库的操作.不过有跨平台需求的程序还是建议使用标准的SQL语句,毕竟这样容易在多个平台之间进行移植. 先来贴出本文程序运行的结果图: 本文实例程序主要讲解了SQLite的基本用法,如:创建数据库,使用SQL命令查询数据表.插入数据,关闭数

Android App中使用ViewPager实现滑动分页的要点解析

以前如果要做 Tab 分页的话,必须要用一个很难用的 TabActivity,而且做出来的效果很差,弹性也很小 忘了从什么时候开始,Google release 了 ViewPager 这好东西取代了以前难用的 Gallery 元件,加上从 Honeycomb 导入的 Fragment 之后终于能够简单做出好看又好用的 Layout 了! 这里我们采用PagerTabStrip ,做出来的效果如下 特色就是使用简单,出来的效果则是目前显示的分页 Tab 的文字会自动置中,然后分别在左右显示上一个

Android实现为Tab添加Menu的方法

本文实例讲述了Android实现为Tab添加Menu的方法.分享给大家供大家参考,具体如下: 在Android中,TabActivity类中没有与Menu有关的方法,所以如果单独使用TabActivity进行开发时,是无法创建菜单项的.为了给Tab增加菜单,有如下两种方法: 1. 主事件继承Activity.这样就可以在主事件中直接重写OnCreateOptionsMenu方法,为程序添加Menu.如果每个Tab需要有不同的Menu,可以为TabHost添加一个OnTabChangedListe

Android开发之组件GridView简单使用方法示例

本文实例讲述了Android开发之组件GridView简单使用方法.分享给大家供大家参考,具体如下: 案例:简单的图片浏览器,保存图片到相册 保存图片到相册 方法代码:https://www.jb51.net/article/158668.htm 废话不多说先上效果: 具体实现: 首先是布局文件: 1.一个GridView(展示所有的图片) 2.一个ImageView(放选中的图片) <?xml version="1.0" encoding="utf-8"?&