FragmentTabHost的基本使用（二）

本章记录为FragmentTabHost加上自定义图标和主题的步骤。

效果图如下：

 

 

程序机构图：

 

和第一篇差不多，只是增加了一些和图标

 

一、主布局文件 layout_main.xml

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

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#282828"

    android:orientation="vertical" >

    

<!-- android.support.v4.app.FragmentTabHost 来自android.support.v4.jar的扩展包-->

    <android.support.v4.app.FragmentTabHost

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

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >



        <FrameLayout

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

            android:layout_width="0dp"

            android:layout_height="0dp"

            android:layout_weight="0" />

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



    

    

    <!-- 这个 FrameLayou和上一个 FragmentTabHost 在 xml的位置决定了  界面里 Tab的位置是在上面的 -->

    <FrameLayout

        android:id="@+id/realtabcontent"

        android:layout_width="match_parent"

        android:layout_height="0dip"

        android:layout_weight="1" />



</LinearLayout>

 

二、每个Fragment的布局文件（只贴出一个，另外三个和这个类似）

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >



    <TextView

        android:id="@+id/textview"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="第一个Fragment"

        android:textSize="30sp" />



</LinearLayout>

 

三、增加一个Tab按钮的布局文件，tab_view.xml

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >



    <ImageView

        android:id="@+id/imageview"

        android:layout_width="30dp"

        android:layout_height="30dp"

        android:layout_gravity="center"

        android:focusable="false"

        android:padding="3dp" >

    </ImageView>



    <TextView

        android:id="@+id/textview_tab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:textColor="@drawable/tab_textview_color"

        android:textSize="10sp" >

    </TextView>



</LinearLayout>

 

四、Tab上的图标和文字的颜色，激活时和非激活时的两中状态。

tab_textview_color.xml

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

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



    <item android:state_selected="true" android:color="#ffcc00"/>

    <item android:color="#966400"/>



</selector>

tab_alarmclock_btn.xml

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

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



    <!-- alarmclock_sel,alarmclock_nor，做好并且放在drawable里的的图标 -->

    <item android:drawable="@drawable/alarmclock_sel" android:state_selected="true"/>

    <item android:drawable="@drawable/alarmclock_nor"/>



</selector>

 

五、MainActivity

package com.example.thealarmclock;



import com.example.tabhost.AlarmclockFragment;

import com.example.tabhost.CountdowntimerFragment;

import com.example.tabhost.WorldclockFragment;

import com.example.tabhost.StopwatchFragment;

import android.annotation.SuppressLint;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentTabHost;

import android.view.LayoutInflater;

import android.view.View;

import android.view.Window;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.TabHost.TabSpec;



/**

 * 功能描述：自定义TabHost

 */

public class MainActivity extends FragmentActivity

{



    // 定义FragmentTabHost对象

    private FragmentTabHost mTabHost = null;



    // 定义一个布局

    private LayoutInflater layoutInflater;



    // 定义数组来存放Fragment界面

    private Class fragmentArray[] = { AlarmclockFragment.class, WorldclockFragment.class, StopwatchFragment.class,

            CountdowntimerFragment.class };



    // 定义数组来存放按钮图片

    private int mImageViewArray[] = { R.drawable.tab_alarmclock_btn, R.drawable.tab_worldclock_btn,

            R.drawable.tab_stopwatch_btn, R.drawable.tab_countdowntimer_btn };



    // Tab选项卡的文字

    private String mTextviewArray[] = { "闹钟", "世界时间", "秒表", "计时器" };



    protected void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.layout_main);



        // FragmentTabHost的setup方法

        // public void setup (Context context, FragmentManager manager, int

        // containerId)

        initView();



    }



    private void initView()

    {

        // 实例化布局对象

        layoutInflater = LayoutInflater.from(this);

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

        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent); // 这里需要传人的是是Fragment对应的id,getSupportFragmentManager()的方法返回一个FragmentManager



        for (int i = 0; i < fragmentArray.length; i++)

        {

            // 为每一个Tab按钮设置图标、文字和内容

            TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));

            // 将Tab按钮添加进Tab选项卡中

            mTabHost.addTab(tabSpec, fragmentArray[i], null);

        }

    }



    private View getTabItemView(int index)

    {



        // inflate 传人参数 为 tab的布局

        View view = layoutInflater.inflate(R.layout.tab_view, null);



        ImageView imageView = (ImageView) view.findViewById(R.id.imageview);

        imageView.setImageResource(mImageViewArray[index]);



        TextView textView = (TextView) view.findViewById(R.id.textview_tab);

        textView.setText(mTextviewArray[index]);



        return view;

    }



    protected void onDestroy()

    {

        super.onDestroy();



        // 把mTabHost赋值为null。

        mTabHost = null;

    }



}

 

六、AlarmclockFragment.java，Fragment对应的java，另外三个和这个类似。

package com.example.tabhost;



import com.example.thealarmclock.R;



import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;



public class AlarmclockFragment extends Fragment

{

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

    {



        return inflater.inflate(R.layout.fragment_alarmclock, null);

    }

}