Android 底部TabActivity（1）——FragmentActivity

来源：互联网发布：消除图片马赛克软件编辑：程序博客网时间：2024/06/06 02:24

先看看效果图：

第一篇Tab系列的文章首先实现这种风格的底部Tab：背景条颜色不变，我们是用了深灰的颜色，图标会发生相应的变化，当选中某个标签后该标签的背板会由正常的颜色变为不正常，哈哈，是变为加深的灰色，更加凸显当前页的效果，所以我比较这种类型。在这里文字的变化我没处理，如果变色使用个selector就解决了，这里不再赘述。

再看一下整个Project的结构，如下

下面逐一介绍一下实现过程，具体实现还是看注释吧，代码也不是很多，就不啰嗦了。

step1：首先是主界面MainTabActivity.java

[java] view plaincopy
package sun.geoffery.fragmenttabhost;  
  
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;  
  
/** 
 * All rights Reserved, Designed By GeofferySun  
 * @Title:  MainTabActivity.java 
 * @Package sun.geoffery.fragmenttabhost 
 * @Description:自定义TabHost 
 * @author: GeofferySun    
 * @date:   2014-9-28 下午11:33:15 
 * @version V1.0 
 */  
public class MainTabActivity extends FragmentActivity {  
    // 定义FragmentTabHost对象  
    private FragmentTabHost mTabHost;  
  
    // 定义一个布局  
    private LayoutInflater mInflater;  
  
    // 定义数组来存放Fragment界面  
    private Class mFragmentAry[] = { FragmentPage0.class, FragmentPage1.class,  
            FragmentPage2.class, FragmentPage3.class, FragmentPage4.class };  
  
    // 定义数组来存放按钮图片  
    private int mImgAry[] = { R.drawable.sl_rbtn_home,  
            R.drawable.sl_rbtn_atme,  
            R.drawable.sl_rbtn_msg,  
            R.drawable.sl_rbtn_square,  
            R.drawable.sl_rbtn_data };  
  
    // Tab选项卡的文字  
    private String mTxtAry[] = { "首页", "@我", "消息", "广场", "资料" };  
  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main_tab_layout);  
  
        initView();  
    }  
  
    /** 
     * 初始化组件 
     */  
    private void initView() {  
        // 实例化布局对象  
        mInflater = LayoutInflater.from(this);  
  
        // 实例化TabHost对象，得到TabHost  
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);  
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);  
  
        // 得到fragment的个数  
        int count = mFragmentAry.length;  
  
        for (int i = 0; i < count; i++) {  
            // 为每一个Tab按钮设置图标、文字和内容  
            TabSpec tabSpec = mTabHost.newTabSpec(mTxtAry[i]).setIndicator(getTabItemView(i));  
            // 将Tab按钮添加进Tab选项卡中  
            mTabHost.addTab(tabSpec, mFragmentAry[i], null);  
            // 设置Tab按钮的背景  
            mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);  
        }  
    }  
  
    /** 
     * 给Tab按钮设置图标和文字 
     * @param index 
     * @return 
     */  
    private View getTabItemView(int index) {  
        View view = mInflater.inflate(R.layout.tab_item_view, null);  
  
        ImageView imageView = (ImageView) view.findViewById(R.id.imageview);  
        imageView.setImageResource(mImgAry[index]);  
  
        TextView textView = (TextView) view.findViewById(R.id.textview);  
        textView.setText(mTxtAry[index]);  
  
        return view;  
    }  
}  

step2：每一个标签页对应的页面FragmentPage0.java

[java] view plaincopy
package sun.geoffery.fragmenttabhost;  
  
import android.os.Bundle;  
import android.support.v4.app.Fragment;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
  
public class FragmentPage0 extends Fragment {  
  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
        return inflater.inflate(R.layout.fragment_0, null);  
    }  
}  

step3：单选标签的背板文件selector_tab_background.xml

[html] view plaincopy
<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
  
    <item android:drawable="@drawable/bg_bottombar_active" android:state_pressed="true"/>  
    <item android:drawable="@drawable/bg_bottombar_active" android:state_selected="true"/>  
  
</selector>  

step4：标签的图标sl_rbtn_atme.xml，有点击效果就要这么搞

[html] view plaincopy
<?xml version="1.0" encoding="utf-8"?><!-- tab栏按钮 -->  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
  
    <item android:drawable="@drawable/sl_rbtn_atme_on" android:state_selected="true" />  
    <item android:drawable="@drawable/sl_rbtn_atme_off" />  
  
</selector>  

step5：主界面布局main_tab_layout.xml

[html] view plaincopy
<?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" >  
  
    <FrameLayout  
        android:id="@+id/realtabcontent"  
        android:layout_width="fill_parent"  
        android:layout_height="0dip"  
        android:layout_weight="1" />  
  
    <android.support.v4.app.FragmentTabHost  
        android:id="@android:id/tabhost"  
        android:layout_width="fill_parent"  
        android:layout_height="60dp"  
        android:background="@drawable/bg_bottombar" >  
  
        <FrameLayout  
            android:id="@android:id/tabcontent"  
            android:layout_width="0dp"  
            android:layout_height="0dp"  
            android:layout_weight="0" />  
    </android.support.v4.app.FragmentTabHost>  
  
</LinearLayout>  

step6：每个标签的布局tab_item_view.xml，上边一个图标，下边一个文字

[html] view plaincopy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:gravity="center"  
    android:orientation="vertical" >  
  
    <ImageView  
        android:id="@+id/imageview"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:contentDescription="@string/app_name"  
        android:focusable="false"  
        android:padding="3dp"  
        android:src="@drawable/ic_launcher" />  
  
    <TextView  
        android:id="@+id/textview"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:paddingBottom="7dp"  
        android:paddingTop="3dp"  
        android:text="@string/app_name"  
        android:textColor="#ffffff"  
        android:textSize="12sp" />  
  
</LinearLayout>  

step7：每个标签对应页面的布局fragment_0.xml

[html] view plaincopy
<?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" >    
        
    <TextView   
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:text="首页"  
        android:gravity="center"  
        android:textSize="20sp"  
        android:textColor="#403901"/>   
        
</LinearLayout>  

0 0