近期一直在做安卓开发，发现Tab布局能够用FragmentTabHost来实现，唯一不好的就是不能实现带图标的tabindicator, V4版本号中的尽管API有支持，可是不管怎么设置Drawable对象都不起作用，所以被逼无赖。发现indicator能够支持传进一个View做tabtitle，于是经过一番各种坑之后，我做了一个自己定义的Tab indicator，能够实现切换提示、显示带图标的tabtitle，同一时候支持滑动切换到不同Tab。

首先来看一下效果吧。

我的实现思路是这种：

第一步。当然是建立android V4版本号的FragmentTabHost的布局XML文件，普通情况下是不建议修改的，我是直接copy官网上的。

文件内容例如以下：

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.app.FragmentTabHost

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/tabhost"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical" >

        <TabWidget

            android:id="@android:id/tabs"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="bottom"/>

        <FrameLayout

            android:id="@android:id/tabcontent"

            android:layout_width="fill_parent"

            android:layout_height="0dp"

            android:layout_weight="1" />

    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

第二步，建立自己定义的tab-indicator XML布局文件，实现自己定义tab title View。XML文件内容例如以下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal" >

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical" >

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal" >

            <ImageView

                android:id="@+id/tab_icon_1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_margin="5dp"

                android:contentDescription="icon" />

            <TextView

                android:id="@+id/tab_name_1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:textColor="#000"

                android:textSize="24sp" />

        </LinearLayout>

        <View

            android:id="@+id/tab_border_line_1"

            android:layout_width="fill_parent"

            android:layout_height="3dp"

            android:background="#ff0000" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical" >

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal" >

            <ImageView

                android:id="@+id/tab_icon_2"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_margin="5dp"

                android:contentDescription="icon" />

            <TextView

                android:id="@+id/tab_name_2"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:textColor="#000"

                android:textSize="24sp" />

        </LinearLayout>

        <View

            android:id="@+id/tab_border_line_2"

            android:layout_width="fill_parent"

            android:layout_marginTop="1dp"

            android:layout_height="3dp"

            android:background="#ff0000" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical" >

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal" >

            <ImageView

                android:id="@+id/tab_icon_3"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_margin="5dp"

                android:contentDescription="icon" />

            <TextView

                android:id="@+id/tab_name_3"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:textColor="#000"

                android:textSize="24sp" />

        </LinearLayout>

        <View

            android:id="@+id/tab_border_line_3"

            android:layout_width="fill_parent"

            android:layout_marginTop="0.5dp"

            android:layout_height="3dp"

            android:background="#ff0000" />

    </LinearLayout>

</LinearLayout>

第四步：当然是在MainActivity的onCreate方法中实现FragmentTabHost对象的初始化，建立一个真正的tab布局界面。

代码实现例如以下：

tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

tabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);

第五步：也是最恶搞的一步，就是把View传到V4的每一个tab的indicator中去，这里要特别说明一下。事实上起作用的仅仅有第一个设置进去的View，其他尽管是必须的，可是无需不论什么设置。否则FragmentTabHost将无法正常工作。这个是我吐血得到的教训：代码例如以下：

ImageView piv = (ImageView)llView.findViewById(R.id.tab_icon_1);

TextView ptv = (TextView)llView.findViewById(R.id.tab_name_1);

ptv.setText("找人");

piv.setImageBitmap(personIcon);

piv = (ImageView)llView.findViewById(R.id.tab_icon_2);

ptv = (TextView)llView.findViewById(R.id.tab_name_2);

ptv.setText("圈子");

piv.setImageBitmap(circleIcon);

piv = (ImageView)llView.findViewById(R.id.tab_icon_3);

ptv = (TextView)llView.findViewById(R.id.tab_name_3);

ptv.setText("博客");

piv.setImageBitmap(blogIcon);

// 必须有这个，可是没有鸟用

View view2 = getLayoutInflater().inflate(R.layout.tab_indicator, (ViewGroup) mRoot.findViewById(android.R.id.tabs), false);

View view3 = getLayoutInflater().inflate(R.layout.tab_indicator, (ViewGroup) mRoot.findViewById(android.R.id.tabs), false);

Log.i("my-debug", "go here to setup tab content");

tabHost.addTab(

		tabHost.newTabSpec("找人").setIndicator(llView),

		PersonFragment.class, null);

tabHost.addTab(

		tabHost.newTabSpec("圈子").setIndicator(view2),

		CircleFragment.class, null);

tabHost.addTab(

		tabHost.newTabSpec("博客").setIndicator(view3),

		BlogFragment.class, null);

第六步。加入手势側滑支持与现实默觉得第一个tab上的内容，实现代码例如以下：

// 显示第一tab内容Fragment

tabHost.setCurrentTab(0);

View v = (View)llView.findViewById(R.id.tab_border_line_1);

v.setBackgroundColor(Color.BLUE);

mDetector = new GestureDetectorCompat(this, new MyGestureListener());

当中手势側滑支持基于SimpleOnGestureListener类实现，同一时候要重载onTouchEvent方法才干够工作。

完整的MainActivity的代码例如以下：

package com.example.gesturedemo;

import android.annotation.SuppressLint;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Color;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentTabHost;

import android.support.v4.view.GestureDetectorCompat;

import android.util.Log;

import android.view.GestureDetector;

import android.view.MotionEvent;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

@SuppressLint("NewApi")

public class MainActivity extends FragmentActivity {

	private FragmentTabHost tabHost;

	private GestureDetectorCompat mDetector;

	private View llView;

	private static int tabIndex = 0;

	@Override

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		// get tabhost and setup it

		tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

		tabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);

		// load icons

		Bitmap personIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.person);

		Bitmap circleIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.circle);

		Bitmap blogIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.blog);

		// add tabs

		Log.i("my-debug", "go here to setup tab header");

		View mRoot = getLayoutInflater().inflate(R.layout.activity_main, null);

		llView = getLayoutInflater().inflate(R.layout.tab_indicator, (ViewGroup) mRoot.findViewById(android.R.id.tabs), false);

		ImageView piv = (ImageView)llView.findViewById(R.id.tab_icon_1);

		TextView ptv = (TextView)llView.findViewById(R.id.tab_name_1);

		ptv.setText("找人");

		piv.setImageBitmap(personIcon);

		piv = (ImageView)llView.findViewById(R.id.tab_icon_2);

		ptv = (TextView)llView.findViewById(R.id.tab_name_2);

		ptv.setText("圈子");

		piv.setImageBitmap(circleIcon);

		piv = (ImageView)llView.findViewById(R.id.tab_icon_3);

		ptv = (TextView)llView.findViewById(R.id.tab_name_3);

		ptv.setText("博客");

		piv.setImageBitmap(blogIcon);

		// 必须有这个。可是没有鸟用

		View view2 = getLayoutInflater().inflate(R.layout.tab_indicator, (ViewGroup) mRoot.findViewById(android.R.id.tabs), false);

		View view3 = getLayoutInflater().inflate(R.layout.tab_indicator, (ViewGroup) mRoot.findViewById(android.R.id.tabs), false);

		Log.i("my-debug", "go here to setup tab content");

		tabHost.addTab(

				tabHost.newTabSpec("找人").setIndicator(llView),

				PersonFragment.class, null);

		tabHost.addTab(

				tabHost.newTabSpec("圈子").setIndicator(view2),

				CircleFragment.class, null);

		tabHost.addTab(

				tabHost.newTabSpec("博客").setIndicator(view3),

				BlogFragment.class, null);

		// 显示第一tab内容Fragment

		tabHost.setCurrentTab(0);

		View v = (View)llView.findViewById(R.id.tab_border_line_1);

		v.setBackgroundColor(Color.BLUE);

		mDetector = new GestureDetectorCompat(this, new MyGestureListener());

	}

	@Override

	public boolean onTouchEvent(MotionEvent event) {

		this.mDetector.onTouchEvent(event);

		return super.onTouchEvent(event);

	}

	public void showNextTab()

	{

		tabIndex++;

		if(tabIndex >= 3)

		{

			tabIndex = 0;

		}

		tabHost.setCurrentTab(tabIndex);

		View v1 = (View)llView.findViewById(R.id.tab_border_line_1);

		View v2 = (View)llView.findViewById(R.id.tab_border_line_2);

		View v3 = (View)llView.findViewById(R.id.tab_border_line_3);

		v1.setBackgroundColor(Color.RED);

		v2.setBackgroundColor(Color.RED);

		v3.setBackgroundColor(Color.RED);

		if(tabIndex == 0) {

			v1.setBackgroundColor(Color.BLUE);

		}

		else if(tabIndex == 1) {

			v2.setBackgroundColor(Color.BLUE);

		}

		else if(tabIndex == 2) {

			v3.setBackgroundColor(Color.BLUE);

		}

	}

	class MyGestureListener extends GestureDetector.SimpleOnGestureListener {

		private static final String DEBUG_TAG = "Gestures";

		@Override

		public boolean onDown(MotionEvent event) {

			Log.d(DEBUG_TAG, "onDown: " + event.getX());

			return true;

		}

		@Override

		public boolean onFling(MotionEvent event1, MotionEvent event2, float velocityX, float velocityY) {

			Log.d(DEBUG_TAG, "onFling: " + event1.getX());

			float deltaX = event1.getX() - event2.getX();

			Log.i("gesture", "deltaX : " + deltaX);

			if(deltaX > 20) {

				showNextTab();

			}

			else {

				Toast.makeText(getApplicationContext(), "从右向左滑动開始应用...", Toast.LENGTH_SHORT).show();

			}

			return true;

		}

	}

}

使用的三个Fragment程序代码基本一样，无需一一给出，这里仅仅给出PersonFragment类的实现代码例如以下： 

package com.example.gesturedemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

public class PersonFragment extends Fragment {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.common_content, container, false);

        TextView tv = (TextView) v.findViewById(R.id.textView1);

        tv.setText("相逢未必曾相识");

        return v;

    }

}

使用的布局文件XML内容例如以下：

<?xml version="1.0" encoding="utf-8"?

>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textSize="36sp"

        android:gravity="center"

        android:text="tabhost" />

</LinearLayout>

android上FragmentTabHost实现自己定义Tab Indicator的更多相关文章

  1. Android 上的 制表符（tab） —— 一个奇妙的字符 (cocos2dx crash)

    今天測试发现了游戏的一个问题,系统邮件,假设发了tab,在android上一打开邮件内容就会crash.并且他们非常确定是tab的问题. 凭我多个月的经验(确实没多年. . .)来看.从来没听说在an ...

  2. Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

    一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...

  3. 怎样 TabHostFragment自己定义 tab键(indicator)

    1 获得 tabHostFragment: ActionBarActivity activity2 = (ActionBarActivity) activity; mTabHost = new Fra ...

  4. [Android] Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单

    Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单 利用FragmentTabHost实现底部菜单,在该底部菜单中,包括了4个TabSpec,每个TabS ...

  5. android FragmentActivity+FragmentTabHost+Fragment框架布局

    这周比较闲,计划系统的学习一下android开发,我本是一名IOS程序员,对手机开发还是有自己的一套思路的, 固这套思路用到我当前学android上了,先选择从Main页面的tabbar部分代码入手, ...

  6. Android 上使用 iconfont 的一种便捷方案

    最近在学习 AIOSO(Alibaba Internal Open Source Organization,即阿里巴巴内部开源组织) 的一个子项目MMCherryUI,这是一个流式布局,可以在运行时做 ...

  7. 【Android Developers Training】 8. 定义Action Bar风格

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  8. Android上dip、dp、px、sp等单位说明(转)

    dip  device independent pixels(设备独立像素). 不同设备不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素. 在 ...

  9. Android上dip、dp、px、sp等单位说明

    Android上dip.dp.px.sp等单位说明 dip  device independent pixels(设备独立像素). 不同设备不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA ...

随机推荐

  1. Mybatis 使用Mybatis时实体类属性名和表中的字段名不一致

    开发中,实体类中的属性名和对应的表中的字段名不一定都是完全相同的,这样可能会导致用实体类接收返回的结果时导致查询到的结果无法映射到实体类的属性中,那么该如何解决这种字段名和实体类属性名不相同的冲突呢? ...

  2. 【BZOJ 1998】 1998: [Hnoi2010]Fsk物品调度（双向链表+并查集+置换）

    1998: [Hnoi2010]Fsk物品调度 Description 现在找工作不容易,Lostmonkey费了好大劲才得到fsk公司基层流水线操作员的职位.流水线上有n个位置,从0到n-1依次编号 ...

  3. 【其它算法】Face The Right Way

    Face The Right Way Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5278   Accepted: 246 ...

  4. 【Trie模板】HDU1251-统计难题

    [题意] n统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). [思路] 裸题,不过G++好像会超内存,C++就不会. #include<iostream> #include& ...

  5. 探究Activity(1)--Activity的基本用法

    一.Activity是什么 Activity(活动)是最容易吸引用户的地方,它是一种可以包含用户界面的组件,主要用于和用户进行交互.一个应用程序中应该包括零个或多个Activity. 二.Activi ...

  6. Leveldb源码解析之Bloom Filter

    Bloom Filter,即布隆过滤器,是一种空间效率很高的随机数据结构. 原理:开辟m个bit位数组的空间,并全部置零,使用k个哈希函数将元素映射到数组中,相应位置1.如下图,元素K通过哈希函数h1 ...

  7. Codeforces Round #345 (Div. 1) A - Watchmen 容斥

    C. Watchmen 题目连接: http://www.codeforces.com/contest/651/problem/C Description Watchmen are in a dang ...

  8. CentOS6安装NodeJS（非编译）

    由于编译安装需要各种依赖库,会远远高于生产环境下的默认版本,强行升级会产生很多不必要的问题,所以一般用官网编译好的安装 下载nodejs并安装 wget https://nodejs.org/dist ...

  9. IE主页被篡改为360导航终极处理办法

    不得不吐槽360真他妈是流氓至极,在不被用户许可的情况下直接修改用户浏览器默认主页,还不容易找到修改的地方. 以IE为例:我们将其首页设置为百度https://www.baidu.com/,终极处理办 ...

  10. ArcGIS10.1如何将数据库注册到ARCSERVER服务器

    原文链接:http://www.cnblogs.com/hanchan/archive/2013/09/24/3337034.html 一.了解ArcGIS Server以及如何利用ArcServer ...