目前很多app主頁都是由幾個(gè)tab頁組成，所以我們開發(fā)app的時(shí)候一般都會(huì)涉及到主頁tab的切換實(shí)現(xiàn)很洋。常用的主頁tab切換實(shí)現(xiàn)可以用viewpage和FragmentActivity組合底哗，用普通Button/TextView/RadioButton等等和FragmentTransaction的add岁诉、replace、remove跋选、hide和show方法組合涕癣，以及Android官方框架FragmentTabHost。前面兩種實(shí)現(xiàn)起來會(huì)比較容易一點(diǎn)前标，但是坠韩，當(dāng)你的底部菜單凹凸不規(guī)則或者 是要嵌入其它標(biāo)簽（比如消息提示功能）的時(shí)候距潘，那 FragmentTabHost 實(shí)現(xiàn)起來就更容易了。
FragmentTabHost 作為 Android 4.0 版本的控件當(dāng)然優(yōu)點(diǎn)多多只搁，已被項(xiàng)目廣泛使用音比，Android 5.0版本又推出TabLayout+ViewPager實(shí)現(xiàn)多頁切換的效果。此處主要講使用FragmentTabHost 實(shí)現(xiàn)中間按鈕凸出效果氢惋，說起FragmentTabHost洞翩，相信小伙伴們用得比較多也比較熟悉的是用其來實(shí)現(xiàn)類似如下圖所示的tab效果吧！
上圖效果實(shí)現(xiàn)起來也是比較簡單的明肮，今天我要記錄的是使用FragmentTabHost 實(shí)現(xiàn)如下圖所示的效果：
可能會(huì)有很多大神看完效果圖 噗呲 一笑菱农，覺得小菜一碟缭付。那么這些大神可以繞道通行啦柿估！
下面直接進(jìn)入正題，上代碼干貨：
1.首先是activity_main.xml布局文件引用v4包的FragmentTabHost控件陷猫，F(xiàn)ragmentTabHost 要想讓中間按鈕凸出需根據(jù)需求再拉控件覆蓋原本中間按鈕秫舌，其他按鈕凸出同理
<?xml version="1.0" encoding="utf-8"?><!--
/* //device/apps/common/assets/res/layout/tab_content.xml
**
** Copyright 2011, The Android Open Source Project
**
** Licensed under the Apache License, Version 2.0 (the "License");
** you may not use this file except in compliance with the License.
** You may obtain a copy of the License at
**
** http://www.apache.org/licenses/LICENSE-2.0
**
** Unless required by applicable law or agreed to in writing, software
** distributed under the License is distributed on an "AS IS" BASIS,
** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
** See the License for the specific language governing permissions and
** limitations under the License.
*/
android:clipToPadding="true"
android:fitsSystemWindows="true"
-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android: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">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="45dp" //tab的高度
android:layout_weight="0"
android:background="#F5F5F5"
android:divider="#00000000"
android:gravity="center"
android:orientation="horizontal" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
<ImageView
android:id="@+id/main_image_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="17dp"
android:src="@drawable/circle" />
<TextView
android:id="@+id/main_tv_final"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_marginBottom="2dp"
android:text="金融圈"
android:textColor="@color/main_tabtextcolor"
android:textSize="12sp" />
</RelativeLayout>
如果tab在頂部，只需要把xml中的TabWidget放在@android:id/tabcontent上即可
2.搞定了xml接下來就是代碼部分了绣檬，先新建片段（根據(jù)自己需求確定新建幾個(gè)片段）此處我每個(gè)片段區(qū)別比較大足陨，復(fù)用性差，所以5個(gè)tab新建了5個(gè)片段
HomeFragment.class, MessageFragment.class, CenterFragment.class, FinancialFragment.class,MineFragment.class
3.接下來最重要的代碼類MainActivity.java：
public class MainActivity extends FragmentActivity implements OnClickListener
{
private FragmentTabHost mTabHost; //mTabHost控件
private Class[] clas = new Class[] { HomeFragment.class, MessageFragment.class, CenterFragment.class, FinancialFragment.class,
MineFragment.class }; //片段
private int images[] = new int[] {R.drawable.tab_1_selector, R.drawable.tab_2_selector,1, R.drawable.tab_4_selector,
R.drawable.tab_5_selector }; //tab按鈕 選中和不選中狀態(tài)
private TextView mBottom_center; //中間按鈕TextView
private ImageView main_image_center; //中間按鈕ImageView
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
}
public void initUI()
{
//底部中間按鈕控件
main_image_center = (ImageView) findViewById(R.id.main_image_center);
main_image_center.setImageResource(R.drawable.nav_button_finance_default);
//底部中間按鈕TextView
mBottom_center = (TextView) findViewById(R.id.main_tv_final);
//設(shè)置監(jiān)聽
main_image_center.setOnClickListener(this);
mBottom_center.setOnClickListener(this);
String[] tabIndicatorArray = getResources().getStringArray(R.array.arr_tab_indicator);
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
LayoutInflater inflater = getLayoutInflater();
for (int i = 0; i < images.length; i++) {
View indicatorView = inflater.inflate(R.layout.g_list_item_viewpagerindicator, null);
TextView tvIndicator = (TextView) indicatorView.findViewById(R.id.tv_title_indicator);
tvIndicator.setText(tabIndicatorArray[i]);
ImageView imageView = (ImageView) indicatorView.findViewById(R.id.ima_indicator);
imageView.setImageResource(images[i]);
//tabhost添加tab切換事件 tab0-tab4
mTabHost.addTab(mTabHost.newTabSpec("tab"+i).setIndicator(indicatorView), clas[i], null);
mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
switch (tabId)
{
case "tab2": //獲取中間按鈕點(diǎn)擊事件 設(shè)置覆蓋控件
main_image_center.setImageResource(R.drawable.nav_button_finance_selected);
mBottom_center.setTextColor(Color.parseColor("#ffd38a"));
break;
default: //其他四個(gè)按鈕
main_image_center.setImageResource(R.drawable.nav_button_finance_default);
mBottom_center.setTextColor(Color.parseColor("#b2b2b2"));
break;
}
}
});
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item)
{
int id = item.getItemId();
if (id == R.id.action_settings)
{
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onClick(View v)
{
switch (v.getId())
{
case R.id.main_image_center:
mTabHost.setCurrentTab(2);
break;
default:
break;
}
}
}
3.res文件夾下新建一個(gè)color文件夾娇未，main_tabtextcolor.xml的代碼為：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#ffd38a"/>
<item android:color="#b2b2b2"/>
</selector>
4.drawable文件夾下的tab_1_selector.xml墨缘、tab_2_selector.xml、tab_3_selector.xml零抬、tab_4_selector.xml镊讼、tab_5_selector.xml代碼
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/nav_button_home_selected" />
<item android:state_pressed="true" android:drawable="@drawable/nav_button_home_selected" />
<item android:state_selected="false" android:drawable="@drawable/nav_button_home_default" />
</selector>
github下載：https://github.com/LXLYHM/Demo_FragmentTabhost
(eclipse項(xiàng)目是比較早發(fā)布的 那個(gè)時(shí)候手抖點(diǎn)錯(cuò)了積分 沒有積分的小伙伴可以下載AS項(xiàng)目或者留言我發(fā)項(xiàng)目http://download.csdn.net/detail/lxlyhm/9849803 )
效果就這樣實(shí)現(xiàn)了，如若有不到位之處還望不吝指點(diǎn)平夜，非常感謝~
