现在的位置: 首页 > 综合 > 正文

[Tab选项卡菜单(一)]位于顶部的tab选项卡菜单

2018年04月05日 ⁄ 综合 ⁄ 共 4683字 ⁄ 字号 评论关闭

今天顺利的把TabHost的一些相关的东西都弄清楚了! 在此,和大家分享一下,顺便自我总结一下,加深自己的记忆!

我的逻辑比较强,我会把整个过程和其中遇到的问题的列出来!供小伙伴们参考! 如果发现有任何问题欢迎大家直接提出来交流! 共同进步!吐舌头


OK! 我们开始进入正题!


一、制作一个简单的位于顶部的Tab选项卡菜单:

首先来看看效果图:



这个完成了简单的选项卡布置和实现的内容的跳转,接下来我们来看看具体是怎么实现的!

 1、首先了解一下Tab组件使用的相关顺序:

a.在布局文件中使用FrameLayout列出Tab组件以及Tab中的内容组件

b.Activity要继承TabActivity

c.调用TabActivity的getTabHost( )方法来获得TabHost对象

d.通过TabHost创建Tab选项

2、好现在跟我一步一步的完成:

这是我的所以Activity:

我这里只用了一个xml来进行布局TabActivity,其他Activity都是在代码里动态加载的,为了测试,这个就不多说了

好了,来看看activity_tab.xml里面的内容:

<span style="font-size:12px;"><TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            
        ></TabWidget>
        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            ></FrameLayout>
    </LinearLayout>
    
</TabHost></span><span style="font-size: 14px;">
</span>

大家看到了,最外层是用了一个TabHost的包裹着,然后用一个linearlayout,用垂直的属性来包裹Tabwidget(每个选项卡)和Framelayout(每个选项卡的内容显示之处),对于整个布局来说TabHost是一个根标签,然后在linearlayout里面,orientation的设置是vertical(垂直的),这样的话Tabwidget就在Framelayout的上面;

这个地方有几个需要注意的:

a.TabHost、Tabwidget、Framelayout的id都要用android给定的id来表示,自己定义也可以,但代码里面的写法就会不一样,就要用findviewbyid来获取控件的对象来进行相关的操作,这次暂时不介绍这个,大家就先用规定的id就行

android:id="@android:id/tabhost"

android:id="@android:id/tabs"
android:id="@android:id/tabcontent"

b.若要让选项卡在顶部,那Tabwidget和Framelayout在xml里面的位置就不要改变,后面会讲到有两个方法把选项卡菜单放到底部,此处不在赘述。


3、接下来,让我们看看TabActivity里面的代码是怎样的:

package com.example.tabactivity_test;

import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabActivity extends android.app.TabActivity {
	//建立一个成员变量,方便后面的方法利用
	private TabHost tabhost;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tab);
		//得到tabhost对象
		tabhost = getTabHost();
		//调用自己写的方法来创建选项卡(tab)
		addTabWidget("tab1","第一个选项卡",FirstActivity.class);
		addTabWidget("tab2","第二个选项卡",SecendActivity.class);
		addTabWidget("tab3","第三个选项卡",ThreeActivity.class);
	}
	private void addTabWidget(String TabSpecTag, String Name,
			Class<?> class1) {
		//建立一个intent的对象,用于tab之间的对应的内容跳转
		Intent intent = new Intent(this,class1);
		//构建一个tabspec对象,然后调用tabhost的addTab来加入新的Tab
		TabSpec tabspec = tabhost.newTabSpec(TabSpecTag);//不同tab的标签
		tabspec.setIndicator(Name);//用于显示Tab上面的文字,也可以添加图标,这个后面再说
		tabspec.setContent(intent);//传递一个intent
		tabhost.addTab(tabspec);//将tab加进去
		
		//上面的代码也可以简化为:
		//tabhost.addTab(tabhost.newTabSpec(TabSpecTag).setIndicator(Name).setContent(new Intent(this,class1)));
	}
}


大家注意上面的addTabwidget方法,这是我自己写的一个方法,为了简化一些不必要的操作,这个应该不难理解吧! 代码解释就不多说了,都有注释!还有一点就是我的TabActivity是继承了TabActivity的,其他的Activity就只是继承了Activity。注意:我这里是采用了内容用不同的Activity来实现,同时你也可以通过加载不同的xml布局文件来实现内容的不同,方法灵活,想怎么样都可以! 我简单的说一下:

可以看到setContent是很灵活的,所以我们只需要把intent改成:R.layout.xxxx(xxx是你需要加载的xml名称)  ,大家可以下去试一试! 有什么问题可以提出来!


4、最后,让我们看看其他Activity里面的有什么东西,我为了测试,就简单的加了一点东西,每个都差不多,所以就给大家看一个就行了!

<span style="font-size:12px;">package com.example.tabactivity_test;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class FirstActivity extends Activity{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		//建立一个TextView,用来测试
		TextView textview = new TextView(this);
		//设置文本内容
		textview.setText("这是第一个Tab");
		//在这个activity可以见到这个view
		setContentView(textview);
	}
}</span>

ok! 是不是很简单!  当然,这只是一个非常简单的Tab选项卡,后面我会慢慢给大家讲跟家复杂的,一步步来嘛!


大家想想,是不是还有什么没有写完的?  有人猜到了么?  对了Manifest没有注册其他的Activity!这个应该对于大家不是很困难!那我就大概列出了就行了哦!


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tabactivity_test"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".TabActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
           <activity
            android:name=".FirstActivity"
            android:label="@string/app_name" >
           
        </activity>
           <activity
            android:name=".SecendActivity"
            android:label="@string/app_name" >
           
        </activity>
           <activity
            android:name=".ThreeActivity"
            android:label="@string/app_name" >
        </activity>
        
    </application>

</manifest>

OK,这个就先写到这里,更复杂的以后再慢慢加,如果大家支持的多的话! 就更新快点咯!

先预告一下吧! 后面将会讲到怎么把顶部的tab放到底部去! 我讲会跟大家分享两种方法! 谢谢大家的观赏!

抱歉!评论已关闭.