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

前言

本篇博客要分享的一个UI效果——实现底部切换标签,想必大家在一些应用上面遇到过这样的效果了,最典型的就是微信了,能够左右滑动切换页面。也能够点击标签页滑动页面,它们是怎样实现的呢,本篇博客为了简单仅仅介绍怎样实现点击底部切换标签页。
先来看看我们想实现的效果图:
这样的页面实现起来事实上非常easy的,首先我们从布局入手:
分为三部分
第一部分:顶部导航栏布局
第二部分:中部显示内容布局
第三部分:底部标签布局
/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://download.csdn.net/detail/wwj_748/8495621

转载请注明:IT_xiao小巫
博客地址:http://blog.csdn.net/wwj_748
移动开发狂热者群:299402133

Android UI-实现底部切换标签(fragment)的更多相关文章

  1. Android UI详解之Fragment加载

    使用Fragment的原因: 1. Activity间的切换不流畅 2. 模块化Activity,方便做局部动画(有时为了到达这一点要把多个布局放到一个activity里面,现在可以用多Fragmen ...

  2. 【转】【Android UI设计与开发】第07期:底部菜单栏(二)Fragment的详细介绍和使用方法

    原始地址:http://blog.csdn.net/yangyu20121224/article/category/1431917/1 由于TabActivity在Android4.0以后已经被完全弃 ...

  3. 【Android UI设计与开发】4.底部菜单栏(一)Fragment介绍和简单实现

    TabActivity在Android4.0以后已经被完全弃用,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Acti ...

  4. 【Android UI】:Fragment官方文档

    概述   Fragment表现Activity中UI的一个行为或者一部分.可以将多个fragment组合在一起,放在一个单独的activity中来创建一个多界面区域的UI,并可以在多个activity ...

  5. Android UI开发第三十篇——使用Fragment构建灵活的桌面

    http://www.lupaworld.com/article-222973-1.html 当我们设计应用程序时,希望能够尽最大限度的适配各种设备,包括4寸屏.7寸屏. 10寸屏等等,Android ...

  6. Android UI开发详解之Fragment

    Fragment是Android自从3.0之后新加入的一个组件,我相信很多人都已经听说过这个组件了,但这个组件到底是个什么,如何去使用他呢,且听我讲来. 以下部分资料来自官网(官网才是王道,其他都是浮 ...

  7. android UI:Fragment碎片

    碎片(Fragment) 嵌入与活动中的UI片段,为了合理的分配布局而存在,这是我的简单理解.多用于兼顾手机与平板的UI,也适用于灵活高级的UI制作. Demo 简单的按键切换两片不同的Demo 新建 ...

  8. Android UI开发第二十八篇——Fragment中使用左右滑动菜单

    Fragment实现了Android UI的分片管理,尤其在平板开发中,好处多多.这一篇将借助Android UI开发第二十六篇——Fragment间的通信. Android UI开发第二十七篇——实 ...

  9. Android BottomSheet:底部弹出Fragment面板(4)

     Android BottomSheet:底部弹出Fragment面板(4) BottomSheet不仅可以弹出轻量级的定制好的面板(见附录文章5,6,7),还可以弹出"重"的 ...

随机推荐

  1. java线程的一些基础小知识

    --------------------------------------------------------------------------------------------------线程 ...

  2. POP按钮动画

    POP按钮动画 效果 源码 https://github.com/YouXianMing/Animations // // ButtonPressViewController.m // Faceboo ...

  3. Maven最佳实践:Maven仓库

    什么是Maven仓库 在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下,往往会看到一个名为/lib的子目录,那里存放着各类第三方依赖jar文 件,如log4j.jar,junit. ...

  4. Tengine zabbix 监控

    Tengine 配置 在http 段下新增以下配置 req_status_zone server_stat "$host" 3M; server { listen 9008; lo ...

  5. C# 中使用 RSA加解密算法

    一.什么是RSA RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥推导出解密密钥在计算上是不可行的”密码体制. 在公开密钥密码体制中,加密密钥(即 ...

  6. 两个JS对象怎样才能相等

    在JS中,两个对象如何才能相等?下面的两个 Alert,只有一个输出true.  在JS中如何才能构造出两个JS对象相等? var prop1 = {asd:{def:'abc'}}; var pro ...

  7. BZOJ 3172 Tjoi2013 单词 后缀数组

    题目大意:给定一个n个单词的文章,求每一个单词在文章中的出现次数 文章长度<=10^6(不是单词长度<=10^6,不然读入直接超时) 首先将全部单词用空格连接成一个字符串.记录每一个单词的 ...

  8. 【python】理想论坛帖子爬虫1.06

    昨天认识到在本期同时起一百个回调/线程后程序会崩溃,造成结果不可信. 于是决定用Python单线程操作,因为它理论上就用主线程跑不会有问题,只是时间长点. 写好程序后,测试了一中午,210个主贴,11 ...

  9. 【Tip】如何在chrome浏览器中查看网页的Header

    步骤:打开“开发者工具”,点Network标签,然后刷新网页,选择Name中的第一项,再点右边的Headers,就出来了. 似乎有点复杂,配合下面的图看就一目了然了.

  10. 实现基于DNS的负载均衡

    转自:http://blog.sina.com.cn/s/blog_4e424e2101000c3g.html 如果你有一个很受欢迎的Web站点,你会发现当请求的连接数增加时,服务器的响应延时也会随之 ...