The important thing in life is to have a great aim , and the determination

常用链接

统计

IT技术链接

保险相关

友情链接

基金知识

生活相关

最新评论

修改TabHost默认样式(文字居中)

修改TabHost默认样式

TabHost是Android提供的一个容器组件,利用它可以轻松地实现TAB界面,如下图所示:

但很多时候,默认的TAB样式并不符合软件的整体风格,这时候该怎么办呢?其实,我们可以编写XML对其样式进行修改。下面修改后的效果图:

1. TabHost布局文件 main.xml

	<TabHost
	    android:id="@+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="30dip"
	            android:background="#a0a0a0"
	            android:layout_weight="0" />
<FrameLayout  
	            android:id="@android:id/tabcontent"  
	            android:layout_width="fill_parent"  
	            android:layout_height="fill_parent"
	            android:layout_weight="1">
<ListView 
				    android:id="@+id/user_list"
				    android:layout_width="fill_parent"
				    android:layout_height="fill_parent" 
				    android:divider="@drawable/divider_line"
				    android:cacheColorHint="#00000000" />
<ListView 
				    android:id="@+id/article_list"
				    android:layout_width="fill_parent"
				    android:layout_height="fill_parent" 
				    android:divider="@drawable/divider_line"
				    android:cacheColorHint="#00000000" />
<ListView 
				    android:id="@+id/feed_list"
				    android:layout_width="fill_parent"
				    android:layout_height="fill_parent" 
				    android:divider="@drawable/divider_line"
				    android:cacheColorHint="#00000000" />
<ListView 
				    android:id="@+id/book_list"
				    android:layout_width="fill_parent"
				    android:layout_height="fill_parent" 
				    android:divider="@drawable/divider_line"
				    android:cacheColorHint="#00000000" />
</FrameLayout>
</LinearLayout>
</TabHost>


FrameLayout里有四个ListView 分别对应用户、文章、频道、图书。
TabWidget和FrameLayout的ID不能自己定义修改。




2. Activity后台代码
RelativeLayout articleTab = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.minitab, null);
            TextView articleTabLabel = (TextView) articleTab.findViewById(R.id.tab_label);
            articleTabLabel.setText("文章");
             
            RelativeLayout feedTab = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.minitab, null);
            TextView feedTabLabel = (TextView) feedTab.findViewById(R.id.tab_label);
            feedTabLabel.setText("频道");
             
            RelativeLayout bookTab = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.minitab, null);
            TextView bookTabLabel = (TextView) bookTab.findViewById(R.id.tab_label);
            bookTabLabel.setText("图书");
             
            TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
            tabHost.setup();
             
            tabHost.addTab(tabHost.newTabSpec("user").setIndicator(userTab).setContent(R.id.user_list));
            tabHost.addTab(tabHost.newTabSpec("article").setIndicator(articleTab).setContent(R.id.article_list));
            tabHost.addTab(tabHost.newTabSpec("feed").setIndicator(feedTab).setContent(R.id.feed_list));
            tabHost.addTab(tabHost.newTabSpec("book").setIndicator(bookTab).setContent(R.id.book_list));


TabHost创建出来以后,必须先setup一下,tabHost.setup();

setIndicator方法设置的View其实就对应了TAB中的一个个选项卡,它们都是通过一个叫minitab的布局文件inflate出来的
3. 选项卡布局文件minitab.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="5dip"
    android:paddingRight="5dip">
 
<TextView android:id="@+id/tab_label"  
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:textColor="#000000"
        android:textStyle="bold"
        android:background="@drawable/minitab" />
</RelativeLayout>

drawable/minitab是一个selector,指定了Tab选项卡的背景颜色。

4. selector文件 minitab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
	xmlns:android="http://schemas.android.com/apk/res/android"
	>
<item
		android:state_selected="false"
		android:drawable="@drawable/minitab_unselected"
		>
</item>
<item
		android:state_selected="true"
		android:drawable="@drawable/minitab_default"
		>
</item>
</selector>


minitab_unselected是一浅蓝色背景图片
minitab_default是一白色背景图片




posted on 2011-02-16 11:28 鸿雁 阅读(5872) 评论(0)  编辑  收藏 所属分类: IT技术相关


只有注册用户登录后才能发表评论。


网站导航: