android学习摘记——TabHost使用代码

一.实现Tab样式布局

现在的app设计多数会采用tab的形式,IOS有TabViewController这个控制器  android有一个TabHost,

以下这种是继承TabActivity的做法:


但是android的TabHost有几个注意点

1.TabHost标签的ID 必须是 :tabhost

2.FrameLayout标签的ID必须是:tabcontent

3. TabWidget标签的ID必须是:tabs

否则会报错

TabHost有顶部和底部展示的 Ta依赖这个属性来设置

android:layout_alignParentBottom="true"

1.创建一个TabHost的Activity :activity_main.xml




    

        

        
    


android学习摘记——TabHost使用代码_第1张图片


(注意以上的ID)TabWidget可以设置分割线 但是似乎不美观  android:showDividers="none"

2,定义TabItem的样式布局 tabitem.xml



    
    


3.接下来就是在Activity里面的操作了

package com.example.apple.tabdemo;

import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends TabActivity {
    private TabHost tabHost;
    private static final String HOME = "主页";
    private static final String REFER = "提及";
    private static final String ABOUT = "关于";
    private static final String SEARCH = "搜索";
    private static final String MORE = "更多";
    //内容Intent
    private Intent homeIntent;
    private Intent referIntent;
    private Intent aboutIntent;
    private Intent searchIntent;
    private Intent moreIntent;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//设置TabHost使用的布局文件

        tabHost=this.getTabHost();
        //构建承载的页面
        prepareIntent();
        setupIntent();

        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                for (int i= 0;i

android学习摘记——TabHost使用代码_第2张图片

和IOS的TabViewController一样 是用Tab承载几个VC页面,里面的 prepareIntent()就是负责VC页面的承载  与IOS的TabItem不一样的是 android的TabHost的Itme选中样式要自己修改  但是这样比IOS更灵活 tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() 兼听tab切换的事件 然后做对应的tab的字体,图片或者背景的修改。

默认显示第几个VC的 使用:

//默认显示第几个VC
        int showIndex = 1;
        tabHost.setCurrentTab(showIndex);
        configTabItemStyle(showIndex,true);

经过以上的3个步骤 Tab的框架页面已经基本完成了

android学习摘记——TabHost使用代码_第3张图片


因为是demo 所以这里的资源比较丑,  选中之后 修改字体颜色和替换icon

二.优化布局样式

以上发现布局特别难看,发现两个问题

1.tab高度太矮

2.内容页面的布局受影响(不能靠着底部)

IOS的Tab固定高度是44,android的tab高度我可以手动设置,在之前的activity_main.xml里面 我们可以修改tab的高度在TabWidget标签里面设置 android:layout_height="50dp"  tab高度改为50dp,对应的tabitme.xml的布局也要做对应的修改,否则,文字和图标不居中也是很丑的,还有就是tabitme高度变化 会挡住内容页的底部,所以在activity_main.xml 的FrameLayout标签里面要加一个间距底部的高度 
            android:paddingBottom="50dp"

修改后的activity_main.xml样式




    

        

        
    



修改后的 tabitem.xml样式



    
    

android学习摘记——TabHost使用代码_第4张图片

完成!



你可能感兴趣的:(android学习摘记——TabHost使用代码)