TabActivity本身繼承自ActivityGroup,主要功能是實現多個activity或者view之間的切換和顯示,要使用該類必須新建一個類來繼承TabActivity,並且該類的xml配置文件中必須包含、、三個視圖(View),其中後面兩個標籤是前面一個標籤的子標籤,表示tab頁的選項卡,相當於菜單頁,表示顯示內容的區域。
1.自定義底部導航欄佈局
由於TabWidget不方便自定義佈局,因此在佈局中將其隱藏,然後自己寫佈局代替TabWidget效果。
注意TabHost TabWidget FrameLayout的id必須是固定的,不能自己定義Id
<?xml version="1.0" encoding="utf-8" ?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#ffffff"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/tab_nearby"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_nearby"
android:layout_width="25dp"
android:layout_height="20dp"
android:background="@drawable/nearby_select"
android:clickable="false" />
<TextView
android:id="@+id/tv_nearby"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="附近"
android:textColor="@color/text30"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_message"
android:layout_width="25dp"
android:layout_height="20dp"
android:background="@drawable/message_no"
android:clickable="false" />
<TextView
android:id="@+id/tv_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="消息"
android:textColor="@color/text30"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_home"
android:layout_width="25dp"
android:layout_height="20dp"
android:background="@drawable/home_no"
android:clickable="false" />
<TextView
android:id="@+id/tv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="首頁"
android:textColor="@color/text30"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_find"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_find"
android:layout_width="25dp"
android:layout_height="20dp"
android:background="@drawable/find_no"
android:clickable="false" />
<TextView
android:id="@+id/tv_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="發現"
android:textColor="@color/text30"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_user"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_user"
android:layout_width="25dp"
android:layout_height="20dp"
android:background="@drawable/user_no"
android:clickable="false" />
<TextView
android:id="@+id/tv_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="我的"
android:textColor="@color/text30"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</TabHost>
2.TabActivity使用
public class MainActivity extends TabActivity implements OnClickListener {
private TabHost tabhost;
public static final String TAB_NEAR = "tabNearby";
public static final String TAB_MESSAGE = "tabMessage";
public static final String TAB_HOME = "tabHome";
public static final String TAB_FIND = "tabFind";
public static final String TAB_USER = "tabUser";
private LinearLayout li_tab_nearby, li_tab_message, li_tab_home,
li_tab_find, li_tab_user;
private ImageView img_nearby, img_message, img_home, img_find, img_user;
private TextView tv_nearby, tv_message, tv_home, tv_find, tv_user;
private Activity ac;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ac = this;
initView();
initEvent();
//重置底部導航攔
resetTab();
//默認選中第一個選項卡
selectTab(1);
}
@Override
protected void onResume() {
// TODO Auto-generated method stub
super.onResume();
}
/**
* 重置底部導航欄,由於每次點擊效果都要改變,先重置成默認的,然後把點擊的特殊處理
*/
private void resetTab() {
// TODO Auto-generated method stub
img_nearby.setBackgroundResource(R.drawable.nearby_no);
img_message.setBackgroundResource(R.drawable.message_no);
img_home.setBackgroundResource(R.drawable.home_no);
img_find.setBackgroundResource(R.drawable.find_no);
img_user.setBackgroundResource(R.drawable.user_no);
tv_nearby.setTextColor(getResources().getColor(R.color.text30));
tv_message.setTextColor(getResources().getColor(R.color.text30));
tv_home.setTextColor(getResources().getColor(R.color.text30));
tv_find.setTextColor(getResources().getColor(R.color.text30));
tv_user.setTextColor(getResources().getColor(R.color.text30));
}
private void initEvent() {
// TODO Auto-generated method stub
li_tab_nearby.setOnClickListener(this);
li_tab_message.setOnClickListener(this);
li_tab_home.setOnClickListener(this);
li_tab_find.setOnClickListener(this);
li_tab_user.setOnClickListener(this);
}
private void initView() {
// TODO Auto-generated method stub
li_tab_nearby = (LinearLayout) findViewById(R.id.tab_nearby);
li_tab_message = (LinearLayout) findViewById(R.id.tab_message);
li_tab_home = (LinearLayout) findViewById(R.id.tab_home);
li_tab_find = (LinearLayout) findViewById(R.id.tab_find);
li_tab_user = (LinearLayout) findViewById(R.id.tab_user);
img_nearby = (ImageView) findViewById(R.id.iv_nearby);
img_message = (ImageView) findViewById(R.id.iv_message);
img_home = (ImageView) findViewById(R.id.iv_home);
img_find = (ImageView) findViewById(R.id.iv_find);
img_user = (ImageView) findViewById(R.id.iv_user);
tv_nearby = (TextView) findViewById(R.id.tv_nearby);
tv_message = (TextView) findViewById(R.id.tv_message);
tv_home = (TextView) findViewById(R.id.tv_home);
tv_find = (TextView) findViewById(R.id.tv_find);
tv_user = (TextView) findViewById(R.id.tv_user);
tabhost = getTabHost();
tabhost.addTab(tabhost.newTabSpec(TAB_NEAR).setIndicator(TAB_NEAR)
.setContent(new Intent(this, NearbyActivity.class)));
tabhost.addTab(tabhost.newTabSpec(TAB_MESSAGE)
.setIndicator(TAB_MESSAGE)
.setContent(new Intent(this, MessageActivity.class)));
tabhost.addTab(tabhost.newTabSpec(TAB_HOME).setIndicator(TAB_HOME)
.setContent(new Intent(this, HomeActivity.class)));
tabhost.addTab(tabhost.newTabSpec(TAB_FIND).setIndicator(TAB_FIND)
.setContent(new Intent(this, FindActivity.class)));
tabhost.addTab(tabhost.newTabSpec(TAB_USER).setIndicator(TAB_USER)
.setContent(new Intent(this, UserActivity.class)));
}
/**
* 選項卡的選擇,同時把選中的選項卡對應的導航欄做特殊處理
*/
private void selectTab(int i) {
switch (i) {
case 1:
resetTab();
tabhost.setCurrentTabByTag(TAB_NEAR);
img_nearby.setBackgroundResource(R.drawable.nearby_select);
tv_nearby
.setTextColor(getResources().getColor(R.color.user_heart1));
break;
case 2:
resetTab();
tabhost.setCurrentTabByTag(TAB_MESSAGE);
img_message.setBackgroundResource(R.drawable.message_select);
tv_message.setTextColor(getResources()
.getColor(R.color.user_heart1));
break;
case 3:
resetTab();
tabhost.setCurrentTabByTag(TAB_HOME);
img_home.setBackgroundResource(R.drawable.home_select);
tv_home.setTextColor(getResources().getColor(R.color.user_heart1));
break;
case 4:
resetTab();
tabhost.setCurrentTabByTag(TAB_FIND);
img_find.setBackgroundResource(R.drawable.find_select);
tv_find.setTextColor(getResources().getColor(R.color.user_heart1));
break;
case 5:
resetTab();
tabhost.setCurrentTabByTag(TAB_USER);
img_user.setBackgroundResource(R.drawable.user_select);
tv_user.setTextColor(getResources().getColor(R.color.user_heart1));
break;
default:
break;
}
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.tab_nearby:
selectTab(1);
break;
case R.id.tab_message:
selectTab(2);
break;
case R.id.tab_home:
selectTab(3);
break;
case R.id.tab_find:
selectTab(4);
break;
case R.id.tab_user:
selectTab(5);
break;
}
}
}