安卓选项卡的实现方法(TabActivity),自定义TabHost容器

来源:互联网 发布:python图像识别 编辑:程序博客网 时间:2024/04/28 04:54

初学者。

选项卡是安卓常用的一种功能。每个选项对应一个活动。

一般由TabHost实现。
常用的实现方法有两种:

1.继承TabActivity

一般过程:

(1) 在主布局文件中定义框架布局,并在里面加入若干个子布局。每个子布局对应TabHost容器里的一个选项的布局。

(2) 主活动继承TabActivity。用getTabHost()获取TabHost对象。

通过创建对象引用LayoutInflate类中Inflate函数,找到(1)中定义的布局文件,设置为Tab视图。

创建选项,添加选项。

主布局文件activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/tabcontent"    android:layout_width="match_parent"    android:layout_height="match_parent" >       <!-- 布局1 -->    <LinearLayout         android:id="@+id/tab1"        android:layout_width="fill_parent"        android:layout_height="fill_parent">        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="This is tab1"            />    </LinearLayout>        <!-- 布局2 -->    <LinearLayout        android:id="@+id/tab2"        android:layout_width="fill_parent"        android:layout_height="fill_parent">        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="This is tab2"            />    </LinearLayout>"</FrameLayout>


主Java文件MainActivity.java

package com.example.tabhost1;import android.os.Bundle;import android.app.Activity;import android.app.TabActivity;  //android3.0后声明TabActivity过期,不过仍能使用import android.view.LayoutInflater;import android.view.Menu;import android.widget.TabHost;import android.widget.TabHost.TabSpec;public class MainActivity extends TabActivity {TabHost tab;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        tab = this.getTabHost();    //获得TabHost对象        LayoutInflater inf = LayoutInflater.from(this);         inf.inflate(R.layout.activity_main, tab.getTabContentView()); //找到布局文件,设置为Tab视图        TabSpec spc1 = tab.newTabSpec("tab1") //创建一个Tab项        .setIndicator("tab1", null)   //设置Tab标题        .setContent(R.id.tab1); //设置Tab资源Id        TabSpec spc2 = tab.newTabSpec("tab2").setIndicator("tab2", null).setContent(R.id.tab2);                //把Tab项加如到Tab中        tab.addTab(spc1);        tab.addTab(spc2);        }    @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;    }    }

效果图:


2.不继承TabActivity,自定义TabHost容器

一般过程:

(1) 主布局里自定义TabHost容器,初始化容器

(2) 主Activity直接创建TabHost容器的对象

为这个对象创建选项,添加选项

主布局文件activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"       android:orientation="vertical" >       <TabHost          android:id="@+id/tabhost"          android:layout_width="match_parent"          android:layout_height="wrap_content">            <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" >                    <!-- 布局1 -->                  <LinearLayout                      android:id="@+id/tab1"                      android:layout_width="match_parent"                      android:layout_height="match_parent" >                        <TextView                         android:layout_width="wrap_content"                          android:layout_height="wrap_content"                          android:text="This is tab1" />                    </LinearLayout>                    <!-- 布局2 -->                  <LinearLayout                      android:id="@+id/tab2"                      android:layout_width="match_parent"                      android:layout_height="match_parent" >                        <TextView                         android:layout_width="wrap_content"                          android:layout_height="wrap_content"                          android:text="This is tab2" />                    </LinearLayout>                    <!-- 布局3 -->                  <LinearLayout                      android:id="@+id/tab3"                      android:layout_width="match_parent"                      android:layout_height="match_parent" >                        <TextView                        android:layout_width="wrap_content"                          android:layout_height="wrap_content"                          android:text="This is tab3" />                    </LinearLayout>              </FrameLayout>          </LinearLayout>      </TabHost>         </LinearLayout>  

主Java文件MainActivity.java

package com.example.tabhost2;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.widget.TabHost;public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                TabHost tab=(TabHost)findViewById(R.id.tabhost);          tab.setup();            //初始化TabHost容器                    //匿名对象方式,添加Tab项        tab.addTab(tab.newTabSpec("tab1").setIndicator("标签1",null).setContent(R.id.tab1));          tab.addTab(tab.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));          tab.addTab(tab.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));                     }          @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;    }    }

效果图:



其实,可以把主布局里的两个子布局独立出来,成为两个独立的布局xml文件。


主布局文件activity_main.xml

<?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" >        <TabHost          android:id="@+id/tabhost"                   android:layout_width="match_parent"          android:layout_height="match_parent" >            <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" >                                </FrameLayout>          </LinearLayout>      </TabHost>    </LinearLayout>  


两个独立出来的子布局tab1.xml和tab2.xml

tab1.xml

<?xml version="1.0" encoding="UTF-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/tab1"          android:layout_width="wrap_content"         android:layout_height="wrap_content">         <TextView               android:text="This is tab1"             android:layout_width="wrap_content"              android:layout_height="wrap_content">         </TextView>   </LinearLayout> 

tab2.xml

<?xml version="1.0" encoding="UTF-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/tab1"          android:layout_width="wrap_content"         android:layout_height="wrap_content">         <TextView               android:text="This is tab1"             android:layout_width="wrap_content"              android:layout_height="wrap_content">         </TextView>   </LinearLayout> 

主Java文件MainActivity.java

package com.example.tabhost3;import android.os.Bundle;import android.app.Activity;import android.view.LayoutInflater;import android.view.Menu;import android.widget.TabHost;public class MainActivity extends Activity {        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);                    TabHost tab = (TabHost)findViewById(R.id.tabhost);          tab.setup();  //初始化TabHost容器                  LayoutInflater i=LayoutInflater.from(this);          i.inflate(R.layout.tab1, tab.getTabContentView());  //找到tab1布局,设置为Tab视图        i.inflate(R.layout.tab2, tab.getTabContentView());  //找到tab2布局,设置为Tab视图                  tab.addTab(tab.newTabSpec("tab1").setIndicator("选项1").setContent(R.id.tab1));            tab.addTab(tab.newTabSpec("tab2").setIndicator("选项2").setContent(R.id.tab2));         }  }

效果图






0 0
原创粉丝点击