TabHost布局容器
博客专区 > chuiyuan 的博客 > 博客详情
TabHost布局容器
chuiyuan 发表于4年前
TabHost布局容器
  • 发表于 4年前
  • 阅读 154
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

   一。理论

 标签页主要 由两个部分组成 :

  --  TabActivity 

  -- TabHost -------->TabSpec (标签名和显示内容)

每一个标签 的内容 可以由XML产生,也可以由 TabFactory产生。标签页的布局使用 FrameLayout 。

布局文件如下:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:id="@+id/tabcontent">

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab1" />

    </LinearLayout>

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

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab2" />

        <AnalogClock
            android:id="@+id/analogClock1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</FrameLayout>

    使用TabActivity要下面的几个步骤:

(1)继承TabActivity

(2)获得 TabHost  对象 

     在TabActivity 父类  中已经完成 了TabHost  的创建 ,我们只用

this.getTabHost();

得到 TabHost 对象 ;

(3)实例 化布局对象 

我们对布局的实例化,两步完成

1 .获得  LayoutInfalter 

使用  LayoutInflater.from(this )获得  inflater 对象 

LayoutInflater  inflater = LayoutInflater.from (this );

2. 使用 LayoutInflater 实例 化布局

    实例 化布局 在每个 Activity 中都要进行,这些 工作都一般是由  setContentView() 完成 的,但是在TabActivity 中,

我们不要调用 这个 方法,所以要自己来实例 化布局。我们用

LayoutInflater.inflater (int resource ,ViewGroup root);

root: 视图容器类,ViewGroup  对象 。这里为  TabHost.getTabContentView();

(4)创建并设置 TabSpec对象 

首先创建 一个新的 TabSpec 对象 

TabHost.newTabSpec (String tag);

其中tag 是 TabSpec   的标签 ,在显示 的时候 没有什么用。

再设置标签头,如果只要用文字 ,则可以 用

TabSpec .setIndicator (CharSequence label );

如果 同时 用文字 和图片,则用

TabSpec.setIndicator (CharSequence label , Drawable icon );

    最后,设置要显示 的内容 。如果 是xml 定义 的视图,则用

TabSpec.setContent (int viewId);

如果 使用 TabContentFactory ,则用

TabSpec.setContent (TabContentFactory contentFactory );

(5)向TabHost 中添加 TabSpec  完成 标签 页的使用

    添加 TabSpec 的工作类似 于 setContentView() ,只有向TabHost 中添加 了  TabHost  才能正确显示内容 。

TabHost.addTab (TabSpec tabSpec );

还可以设置程序 打开时显示的页面,

TabHost.setCurrentTab(int index);

setCurrentTab(); 故明思意,就是设置当前tab指向哪个Tab的意思.

clearAllTabs();故明思意,就是清空Tab的意思.

这两个合起来应用可以实现很有趣的效果.就是实现,tab的动态更新.

一般setCurrentTab()会用两次,第一次默认用setCurrentTab(0);第二次用自己的INDEX;

二。java  程序 

public class TabDemo extends TabActivity {
	TabHost mTabHost ;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//setContentView(R.layout.tab_demo);
		mTabHost = this.getTabHost();
		
		LayoutInflater inflater = LayoutInflater.from(this);   //获得  inflater 对象 
		inflater.inflate(R.layout.tab_demo, mTabHost.getTabContentView());  //实例 化布局
		
		TabSpec spec1 =mTabHost.newTabSpec("tab1").setIndicator("tab1").setContent(R.id.tab1);
		//创建 TabSpec 对象 
		TabSpec spec2 = mTabHost.newTabSpec("tab2").
				setIndicator("tab2",getResources().getDrawable(R.drawable.a))
				.setContent(R.id.tab1);
		TabSpec spec3 =mTabHost.newTabSpec("tab3").setIndicator("tab3").setContent(R.id.tab2);
		TabSpec spec4 =mTabHost.newTabSpec("tab4")
				.setIndicator("tab4", getResources().getDrawable(R.drawable.a1))
				.setContent(R.id.tab2);
		
		mTabHost.addTab(spec1);
		mTabHost.addTab(spec2);
		mTabHost.addTab(spec3);
		mTabHost.addTab(spec4);
		
	}





                 接下来是自定义 TabHost  

一。XML  文件写法

步骤:

(1)在  xml 文件中创建 TabHost 节点 ,其 id 设置一定是 tabhost ,这个 是系统 定义 的,下同。

(2)创建 TabWidget 子节点 ,设置 id 为  tabs

(3)创建 FrameLayout 子节点 ,用于显示内容 ,其 id 为 tabcontent .

二。java 文件的步骤 

    使用 TabHost 与TabActivity 时比较相似,不同的只有开始 的两个步骤 :

(1)使用  setContentView( )方法显示界面 。

(2)TabHost 对象 的获得,并设置。

mTabHost =(TabHost) findViewById(android.R.id.tabhost);

注意的是,在之后还要

TabHost.setup();

    这样 才设置完成 ,可以使用。这个 步骤 在TabActivity 中不用,因为在getTabHost() 中已经完成 设置的工作。

(3)创建 并设置 TabSpec 对象 

(4)向TabHost 中添加 TabSpec。

与使用 TabActivity  相比 ,自定义 TbHost时,不用再继承 TabActivity了。

但是要实现 TabCotentFactory 接口,里面的一个方法是

public View createTabContent (String args0);


三。例子

   (1)XML文件

 TabHost 中,tab 默认是在最上面 ,如果 想放在最下面,则如下图的结构 

其中,TabWidget 与 FrameLayout是同级的。这个 时候 ,tab 是在最下面,只在调换位子 ,就是默认的情况 。

但是当 tab 在最下面的时候 ,我们一定要给FrameLayout 设定 android:layout_weight="1"。要不然标签 就不能正确 的显示。

图中tab4没的出现 ,因为我们准备动态实现 、

(2)  java 程序 

public class TabDemo extends Activity implements TabContentFactory {
	private TabHost mTabHost ;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tabdemo);
		
		mTabHost=(TabHost)findViewById(android.R.id.tabhost);
		mTabHost.setup();
		
		TabSpec spec1 = mTabHost.newTabSpec("tab1").setIndicator("tab1").setContent(R.id.tab1);
		TabSpec spec2= mTabHost.newTabSpec("tab2").setIndicator("tab2").setContent(R.id.tab2);
		TabSpec spec3=mTabHost.newTabSpec("tab3").setIndicator("tab3").setContent(R.id.tab3);
		TabSpec spec4= mTabHost.newTabSpec("tab4").setIndicator("tab4").setContent(this);
		
		mTabHost.addTab(spec1);
		mTabHost.addTab(spec2);
		mTabHost.addTab(spec3);
		mTabHost.addTab(spec4);
		
		mTabHost.setCurrentTab(1);
	}

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

	@Override
	public View createTabContent(String tag) {
		// TODO Auto-generated method stub
		TextView tv= new TextView(this);
		tv.setText("from tabcontentFactory");
		tv.setTextSize(25);
		LinearLayout ll = new LinearLayout(this);
		ll.addView(tv);
		return ll;
	}

}


(3)如果 我们的标签 显示 是一个Activity  

    则此时我们要TabHost 中要继承 GroupActivity 。跳转的Activyt 还是继承 Activity .同时 ,加入 

mTabHost.setup(this.getLocalActivityManager());


TabSpec spec3=mTabHost.newTabSpec("tab3").setIndicator("tab3").setContent(new Intent(this, tab3.class));


(4)更改tab 的高度

在onCreate()中调用 setParams ()方法

private void setParam() {
		// TODO Auto-generated method stub
		int count=0;
		TabWidget tabWidget =mTabHost.getTabWidget();  //得到TabWidget对象 
		count= tabWidget.getChildCount();
		DisplayMetrics dm = new DisplayMetrics ();
		getWindowManager().getDefaultDisplay().getMetrics(dm);  //获得屏幕参数 
		
		int screenWidth = dm.widthPixels;
		int screenHeight= dm.heightPixels;
		
		if (count>0){
			for(int i=0;i<count;i++){
				tabWidget.getChildTabViewAt(i).getLayoutParams().width=screenWidth/4;
				tabWidget.getChildTabViewAt(i).getLayoutParams().height=(screenHeight-40)/12;
			}
		}

	}



共有 人打赏支持
粉丝 10
博文 91
码字总数 40993
×
chuiyuan
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: