android TabHost 导航标签

最新推荐文章于 2024-09-18 11:19:13 发布

溪橼

最新推荐文章于 2024-09-18 11:19:13 发布

阅读量745

点赞数

分类专栏： android 控件整理文章标签： tabhost 导航 android

本文链接：https://blog.csdn.net/u011169725/article/details/27233515

版权

android 控件整理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现导航方式有2种：

一、继承TabActivity

此方法简单，但只能显示文字。

主要代码：

public class MyTabHost extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		TabHost th=getTabHost();
		th.addTab(th.newTabSpec("my").setIndicator("1").setContent(new Intent(this,Tab1Activity.class)));
		th.addTab(th.newTabSpec("you").setIndicator("2").setContent(new Intent(this,Tab2Activity.class)));
	}
}

效果：

Android 4.1.1：在3.0及以上的设备上运行自行变为ActionBar（新特性）的效果

但不知道为什么图片的右边会留下一列空白？求大神指教。。。。。。

Android 2.3.7：

一、自定义TabHost

主要代码：

public class MyTabHost extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		TabHost th=(TabHost) findViewById(R.id.tabHost);
		LayoutInflater inflater=getLayoutInflater();
		th.setup();
		TabSpec spec1=th.newTabSpec("me");
		spec1.setIndicator(inflater.inflate(R.layout.activity1, null));
		spec1.setContent(R.id.tab1);
		th.addTab(spec1);
		TabSpec spec2=th.newTabSpec("you");
		spec2.setIndicator(inflater.inflate(R.layout.activity2, null));
		spec2.setContent(R.id.tab2);
		th.addTab(spec2);
	}
}

xml布局文件：activity_main

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabHost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <RelativeLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    android:src="@drawable/first" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    android:src="@drawable/second" />
            </RelativeLayout>
        </FrameLayout>
    </LinearLayout>

</TabHost>

效果：

此方法虽然能自行安排标签的样式，但它显示的内容永远在framellayout中，如若需要动态获取信息显示，那么在标签比较多的时候就会在一个java文件中写很多的代码，这样一点都不利于代码的维护。下面介绍一种现在比较流行也实用的方法，此方法可以对不同的标签对应的内容用不同的界面实现。

其实此方法是自定义了界面中的布局，用控件的点击事件代替了Tabhost自带的导航。

Xml布局：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <RelativeLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/selector"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/blue" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/imageView1"
                    android:layout_centerInParent="true"
                    android:text="xi" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/orange" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/imageView2"
                    android:layout_centerInParent="true"
                    android:text="yuan" />
            </RelativeLayout>
        </LinearLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="0dp" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </FrameLayout>
    </LinearLayout>
</TabHost>

主界面代码：

public class MyTabHost extends TabActivity implements OnClickListener{

	TabHost th;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		th=getTabHost();
		Intent intent1=new Intent(this,Tab1Activity.class);
		Intent intent2=new Intent(this,Tab2Activity.class);
		findViewById(R.id.tab1).setOnClickListener(this);
		findViewById(R.id.tab2).setOnClickListener(this);
		th.addTab(createSpec("1", "me",R.drawable.orange, intent1));
		th.addTab(createSpec("2", "you",R.drawable.blue, intent2));
	}
	
	public TabSpec createSpec(String tag,String name,int icon, Intent intent){
		return th.newTabSpec(tag).setIndicator(name,getResources().getDrawable(icon)).setContent(intent);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.tab1:
			th.setCurrentTabByTag("1");
			r1.setBackgroundColor(Color.GREEN);
			r2.setBackgroundColor(Color.GRAY);
			break;
		case R.id.tab2:
			th.setCurrentTabByTag("2");
			r1.setBackgroundColor(Color.GRAY);
			r2.setBackgroundColor(Color.GREEN);
			break;
		default:
			break;
		}
		
	}
}

这样就可以对每个界面分别进行各自的操作

效果：