学习笔记之——FragmentTabHost实现中间按钮凸出效果

        说起FragmentTabHost，相信小伙伴们用得比较多也比较熟悉的是用其实现类似如下图1所示的效果吧！

                                                  图1

        但是，新启动的项目老大却突发奇想想要设置一个中间按钮凸出效果的FragmentTabHost，如下图2所示，作为还是安卓界菜鸟的我一下子就方了，好像没有思路，好像又有点思路，赶紧上百度，上谷歌，上github上面找找思路，虽然比较菜没找到相关demo，但是找到了实现的思路，并通过询问大神同学最终得以实现如下图2效果，先上图，如果是需要的效果再选择继续往下阅读，大神请忽略此文勿喷~

                                                  图2

图2的原理其实有多种实现方式，在此处我们使用的是：用一个新的图片控件覆盖住原来中间的图片按钮来实现突出效果

忽略图1效果的代码（FragmentTabHost是support v7Demo里面的开源代码），我们直接切入主题上图2效果的代码

1.xml布局文件

2.此处先新建5个片段，或者如果片段页面内容大同小异的，也可以只新建一个复用5个片段，我是各个片段差异比较大，所以新建了5个片段

HomeFragment.class, MessageFragment.class, CenterFragment.class, FinancialFragment.class,MineFragment.class

3.MainActivity的代码如下所示：

public class MainActivity extends FragmentActivity implements OnClickListener
{

	private FragmentTabHost 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 };
	private TextView mBottom_center;
	private ImageView main_image_center;

	@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);
		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切换事件
			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;
		}
	}
}

4.res文件夹下新建一个color文件夹，main_tabtextcolor.xml的代码为：

5.drawable文件夹下的tab_1_selector.xml、tab_2_selector.xml、tab_3_selector.xml、tab_4_selector.xml、tab_5_selector.xml代码

源码下载：http://download.csdn.net/detail/lxlyhm/9849803

 android studio项目在：http://download.csdn.net/download/lxlyhm/10150880

效果就这样实现了，如若有不到位之处还望不吝指点，非常感谢~