安卓天天练练（十四）选项卡

要注意的是tabHost要继承的Activity不是android.app.Activity而是TabActivity

（“升级”成 FragmentActivity）

 在写xml的时候我又遇到了困难，拖来拖去拖不出想要的效果，还得多补补基础

设定一样的weight值来平分布局

后来控制好weight和gravity

有2种方法可以设置TextView文字居中：
一：在xml文件设置：android:gravity="center"
二：在程序中设置：m_TxtTitle.setGravity(Gravity.CENTER);
 
备注：android:gravity和android:layout_gravity的区别在于前者对控件内部操作，后者是对整个控件操作。
例如：android:gravity="center"是对textView中文字居中
            android:layout_gravity="center"是对textview控件在整个布局中居中
其实很容易理解，出现"layout"就是控件对整个布局的操作

最后排出来的tab布局

<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="60dp"
    android:baselineAligned="true"
    android:scaleType="fitXY" >

    <LinearLayout
        android:id="@+id/linearlayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/textview1"
            android:layout_width="fill_parent"
            android:layout_height="60dp"
            android:ellipsize="end"
            android:lineSpacingExtra="3dp"
            android:lineSpacingMultiplier="2"
            android:lines="1"
            android:text="@string/tab_right"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:gravity="center" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearlayout2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textview2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:ellipsize="end"
            android:lineSpacingExtra="60dp"
            android:lineSpacingMultiplier="2"
            android:lines="1"
            android:text="@string/tab_left"
            android:textColor="@color/white"
            android:textSize="14sp" 
            android:gravity="center"/>

    </LinearLayout>

</LinearLayout>

 刚排完上面这些，发现tabAcitivity也已经过期了！现在应该用fragment来做tabHost，xml是这样

java代码是这样

package com.narumi.android_13_2;

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.widget.ImageView;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
import com.narumi.fragment.Fragment1;
import com.narumi.fragment.Fragment2;

public class MainActivity extends FragmentActivity {
    
    private FragmentTabHost mTabHost;
    
    private LayoutInflater mLayoutInflater;

    private Class mFragmentArray[] = { Fragment1.class, Fragment2.class};
    
    private int mImageArray[] = {R.drawable.bill, R.drawable.andy};
    
    private String mTextArray[] = {"bill","andy"};
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        InitView();
    }
    
    private void InitView(){
        mLayoutInflater = LayoutInflater.from(this);
        
        mTabHost = ( FragmentTabHost ) findViewById(android.R.id.tabhost);
        mTabHost.setup(this,getSupportFragmentManager(), R.id.realtabcontent);
        int count = mFragmentArray.length;
        for (int i=0; i < count; i++){
            TabSpec tabSpec = mTabHost.newTabSpec(mTextArray[i]).setIndicator(getTabItemView(i));
            mTabHost.addTab(tabSpec, mFragmentArray[i], null);
            mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.white);
        }
    }
    
    private View getTabItemView(int index) {
        View view = mLayoutInflater.inflate(R.layout.tab_item_view, null);
        
        ImageView img = (ImageView) view.findViewById(R.id.imageview);
        img.setImageResource(mImageArray[index]);
        TextView txtTextView = (TextView) view.findViewById(R.id.textview);
        txtTextView.setText(mTextArray[index]);
        
        return view;
    }
    
}

每个tab做一个fragment，每个fragment的一个xml和一个java文件，java必须有所属的包。

<?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" 
    android:background="#fee55d"
    >

</LinearLayout>

package com.narumi.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.narumi.android_13_2.R;
public class Fragment1 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {    
        return inflater.inflate(R.layout.fragment1, null);        
    }    
}

每个tab按钮也需要一个模板，getTabItemView() 方法 inflate 填进去的 tab_item_view.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="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    tools:ignore="UseCompoundDrawables" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world"
        android:focusable="false"
        android:padding="3dp"
        android:src="@drawable/bill" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:textColor="#ffffff"
        android:textSize="12sp" />

</LinearLayout>

貌似也没多少东西，但是run的时候总是出现错误

这算什么呢。。。虽然有个Error Log说，main.xml中没有已知为null的tab，也不能说明什么。。。

然后，费了好大劲，发现又是我自己坑自己，xml中的id写得不对。

第一

<android.support.v4.app.FragmentTabHost是要用组件内的android:id="@android:id/tabhost"

第二

上面一的内部:

<FrameLayout 也是要用组件内的 android:id="@android:id/tabcontent" 作为id，如下

<?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="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.narumi.android_13_2.MainActivity" >
    
    <FrameLayout 
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:background="@color/white">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

改完这些，总算是能跑起来了，但是tabhost在底部，页面内容在顶部，怎么把他们换个位置呢。

通常FrameLayout都是用layout_gravity和gravity来控制它位置的，默认全部堆在左上角。

然后，一个Linearlayout中对FrameLayout设gravity它根本就不听使唤，必须用RelativeLayout，才能自由调整。

如果relative都治不了它们，就把FrameLayout用LinearLayout包起来(t.t)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="top"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5"
        android:gravity="top" />

</LinearLayout>
<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:gravity="bottom"
    android:orientation="vertical" 
    >

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/red"
        android:gravity="top" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
        
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

</RelativeLayout>

事实证明RelativeLayout可以使不听指挥的FrameLayout改变位置，但<android.support.v4.app.FragmentTabHost>占据了一整屏。。。所以还是用LinearLayout包一包好了。

和css/div一样通过换位和增减布局来测试，即便高手也有排乱了半天搞不定的时候，越熟练成功率越高，不要怕大胆尝试。

关于fragement的神奇方法：

延伸阅读

Android中的View元素体系

通常一个画面中布局元素的使用关系

这几张图画的不错，转了[http://isux.tencent.com/learn-android-from-zero-session2.html]