Chendd's Blog

世界上没有什么事情是一行代码不能解决的。如果有，那就两行。

Android学习日记3--常用控件tabSpec/tabHost

常用控件

7、TabSpec和TabHost

       比较常用的控件，感觉手机QQ的整体布局就是这个，只不过tab放在底部而已。TabSpec相当于浏览器的分页，而TabHost就相当于分页的集合。TabSpec分页可以相当于一个独立的组件，也可以是一个布局，将每个分页装进TabHost里 Activity extends TabActivity 以前都是 继承android.app.Activity 这里为了获得Activity分页菜单，继承它，显然TabActivity和Activity有同个父类。

创建分页菜单对象，将activity_main装进去

1
2

tableHost = this.getTabHost();
LayoutInflater.from(this).inflate(R.layout.activity_main,tableHost.getTabContentView());

通过newTabSpec 来创建分页

1

ts1 = tableHost.newTabSpec("tab1");

设置名称和背景图

1

ts2.setIndicator("tab2", getResources().getDrawable(R.drawable.bg));

添加组件

1

ts2.setContent(R.id.et);

通过addtab加进去

1
2
3

tableHost.addTab(ts1);
tableHost.addTab(ts2);
tableHost.addTab(ts3);

设置监听

1

tableHost.setOnTabChangedListener(this);

arg0 表示传入的tab名称

1
2
3
4
5
6
7
8
9
10

@Override
public void onTabChanged(String arg0) {
　　if (arg0.equals("tab1")) {
　　　　Toast.makeText(this, "分页1", Toast.LENGTH_LONG).show();
　　} else if(arg0.equals("tab2")){
　　　　Toast.makeText(this, "分页2", Toast.LENGTH_LONG).show();
　　}else if(arg0.equals("tab3")){
　　　　Toast.makeText(this, "分页3", Toast.LENGTH_LONG).show();
　　}
}

完整代码和运行效果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

package com.example.tabproject;

import android.os.Bundle;
import android.app.Activity;
import android.app.TabActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.Toast;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity implements OnTabChangeListener{

    private TabSpec ts1,ts2,ts3;
    private TabHost tableHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        tableHost = this.getTabHost();

        LayoutInflater.from(this).inflate(R.layout.activity_main,tableHost.getTabContentView());

        ts1 = tableHost.newTabSpec("tab1");
        ts1.setIndicator("tab1");
        ts1.setContent(R.id.btn);

        ts2 = tableHost.newTabSpec("tab2");
        ts2.setIndicator("tab2", getResources().getDrawable(R.drawable.bg));
        ts2.setContent(R.id.et);

        ts3 = tableHost.newTabSpec("tab3");
        ts3.setContent(R.id.layout);
        ts3.setIndicator("tab3", getResources().getDrawable(R.drawable.pg2));
        ts3.setContent(R.id.et);

        tableHost.addTab(ts1);
        tableHost.addTab(ts2);
        tableHost.addTab(ts3);

        tableHost.setOnTabChangedListener(this);



    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


    @Override
    public void onTabChanged(String arg0) {
        // TODO Auto-generated method stub
        if (arg0.equals("tab1")) {
            Toast.makeText(this, "分页1", Toast.LENGTH_LONG).show();
        } else if(arg0.equals("tab2")){
            Toast.makeText(this, "分页2", Toast.LENGTH_LONG).show();
        }else if(arg0.equals("tab3")){
            Toast.makeText(this, "分页3", Toast.LENGTH_LONG).show();
        }
    }

}

image

关于不同Tab页面的View间如何通信后面再讲。

Comments