【Android基础篇】TabWidget设置背景和字体
在使用TabHost实现底部导航栏时,底部导航栏的三个导航button无法在布局文件中进行定制。比方设置点击时的颜色、字体的大小及颜色等,这里提供了一个解决的方法。就是在代码里进行定制。
思路是在Activity里给TabHost加入了分页后,在给导航栏TabWidget的导航button逐个加入特效(必须先加入分页。然后才干定制button,加入了一个分页,才会生成一个button)。
以下是布局文件activity_main.xml,包括了TabHost,里面有三个仅仅显示了文字的分页
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.plan.MainActivity"
tools:ignore="MergeRootFrame" >
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.8" >
<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_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="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab3" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
</LinearLayout>
</TabHost>
</RelativeLayout>
以下是MainActivity里的代码:
package com.aiplan_03;
import android.app.ActivityGroup;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
public class MainActivity extends ActivityGroup {
TabHost mTabHost = null;
TabWidget mTabWidget = null; //TabWidget控件
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabHost = (TabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this.getLocalActivityManager());
//获取导航button控件
mTabWidget = mTabHost.getTabWidget();
//加入分页1
mTabHost.addTab(mTabHost.newTabSpec("button1").setContent(
R.id.tab1).setIndicator("btn1"));
//加入分页2
mTabHost.addTab(mTabHost.newTabSpec("button2").setContent(
R.id.tab2).setIndicator("btn2"));
//加入分页3
mTabHost.addTab(mTabHost.newTabSpec("button3").setContent(
R.id.tab3).setIndicator("btn3"));
Log.d("button数",Integer.toString(mTabWidget.getChildCount()));
//逐个button加入特效
for(int i=0;i<mTabWidget.getChildCount();i++){
//换字体颜色
TextView tv = (TextView)
mTabWidget.getChildAt(i).findViewById(android.R.id.title);
tv.setTextColor(Color.rgb(255, 255, 255));
//设置背景图
mTabWidget.getChildAt(i).setBackgroundResource(
R.drawable.tabwidget_selector);
}
}
}
把导航button的字体换成了白色,给导航button的背景加入了一个selector选择器。以下是选择器代码:
tabwidget_selector.xml。需放到drawable目录下
<?
xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="false"
android:drawable="@color/tabwidget_unselected"
/>
<item
android:state_selected="true"
android:drawable="@color/tabwidget_selected" />
</selector>
里面用到了两个颜色。以下是color.xml,需放到values目录下
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<color name="tabwidget_selected">#ff2222</color>
<color name="tabwidget_unselected">#000000</color>
</resources>
最后的效果图例如以下: