本文共 5505 字，大约阅读时间需要 18 分钟。
目前很多app主页都是由几个tab页组成，所以我们开发app的时候一般都会涉及到主页tab的切换实现。常用的主页tab切换实现可以用viewpage和FragmentActivity组合，用普通Button/TextView/RadioButton等等和FragmentTransaction的add、replace、remove、hide和show方法组合，以及Android官方框架FragmentTabHost。前面两种实现起来会比较容易一点，但是，当你的底部菜单凹凸不规则或者 是要嵌入其它标签(比如消息提示功能)的时候，那 FragmentTabHost 实现起来就更容易了。
FragmentTabHost 作为 Android 4.0 版本的控件当然优点多多，已被项目广泛使用，Android 5.0版本又推出TabLayout+ViewPager实现多页切换的效果。此处主要讲使用FragmentTabHost 实现中间按钮凸出效果，说起FragmentTabHost，相信小伙伴们用得比较多也比较熟悉的是用其来实现类似如下图所示的tab效果吧！
image
上图效果实现起来也是比较简单的，今天我要记录的是使用FragmentTabHost 实现如下图所示的效果：
image
可能会有很多大神看完效果图 噗呲 一笑，觉得小菜一碟。那么这些大神可以绕道通行啦！
下面直接进入正题，上代码干货：
1.首先是activity_main.xml布局文件引用v4包的FragmentTabHost控件，FragmentTabHost 要想让中间按钮凸出需根据需求再拉控件覆盖原本中间按钮，其他按钮凸出同理
android:layout_width="match_parent"
android:layout_height="match_parent">
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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
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" />
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" />
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" />
如果tab在顶部，只需要把xml中的TabWidget放在@android:id/tabcontent上即可
2.搞定了xml接下来就是代码部分了，先新建片段(根据自己需求确定新建几个片段)此处我每个片段区别比较大，复用性差，所以5个tab新建了5个片段
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按钮 选中和不选中状态
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);
//设置监听
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": //获取中间按钮点击事件 设置覆盖控件
main_image_center.setImageResource(R.drawable.nav_button_finance_selected);
mBottom_center.setTextColor(Color.parseColor("#ffd38a"));
break;
default: //其他四个按钮
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文件夹下新建一个color文件夹，main_tabtextcolor.xml的代码为：
4.drawable文件夹下的tab_1_selector.xml、tab_2_selector.xml、tab_3_selector.xml、tab_4_selector.xml、tab_5_selector.xml代码
xmlns:android="http://schemas.android.com/apk/res/android">
(eclipse项目是比较早发布的 那个时候手抖点错了积分 没有积分的小伙伴可以下载AS项目或者留言我发项目http://download.csdn.net/detail/lxlyhm/9849803 )
效果就这样实现了，如若有不到位之处还望不吝指点，非常感谢~
转载地址：https://blog.csdn.net/weixin_34185033/article/details/116078851 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
