近期一直在做安卓开发，发现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. 杀掉lampp进程

    #!/bin/sh pid='ps -ef|grep lampp|grep -v grep|awk '{ print $2 }'' echo $pid exit if[ $pid ] then for ...

  2. luogu P1016 旅行家的预算

    题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能行驶的距离D2.出发点每升汽油价格P和沿 ...

  3. [Arc074E] RGB Sequence

    [Arc074E] RGB Sequence Description 今天也在愉快地玩Minecraft!现在MM有一块1?N的空地,每个格子按照顺序标记为1到N.MM想要在这块空地上铺上红石块.绿宝 ...

  4. 【DFS】佳佳的魔法阵

    [vijos1284]佳佳的魔法阵 背景 也许是为了捕捉猎物(捕捉MM?),也许是因为其它原因,总之,佳佳准备设计一个魔法阵.而设计魔法阵涉及到的最关键问题,似乎就是那些带有魔力的宝石的摆放…… 描述 ...

  5. BZOJ 4031 [HEOI2015]小Z的房间（Matrix-Tree定理）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4031 [题目大意] 你突然有了一个大房子,房子里面有一些房间. 事实上,你的房子可以看 ...

  6. BZOJ 4883 [Lydsy2017年5月月赛]棋盘上的守卫（最小生成环套树森林）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4883 [题目大意] 在一个n*m的棋盘上要放置若干个守卫. 对于n行来说,每行必须恰好 ...

  7. 【二分图匹配】BZOJ1562-[NOI2009] 变换序列

    [题目大意] 对于0,1,…,N-1的N个整数,给定一个距离序列D0,D1,…,DN-1,定义一个变换序列T0,T1,…,TN-1使得每个i,Ti的环上距离等于Di.一个合法的变换序列应是0,1,…, ...

  8. Call to undefined function imageftbbox()

    mac自带的php的验证码出现问题,搜索了一下Call to undefined function imageftbbox(),然后根据这个网站https://php-osx.liip.ch/本剧本机 ...

  9. ES6中的一些新特性

    这两个命令是ES6的新语法知识.这两个新的特性解决了ES6中的一些小的"bug"问题.其中包含一些知识:块级作用域.let命令.const命令.全局对象的属性.Google V8引 ...

  10. 使用 Google Code Prettify 实现代码高亮

    今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示. prettify 非常小巧且配置简单,使用 ...