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

最新推荐文章于 2023-03-11 11:20:42 发布

LXLYHM

最新推荐文章于 2023-03-11 11:20:42 发布

阅读量5.8k

点赞数 1

分类专栏：自定义控件 Android学习记录文章标签： android

本文链接：https://blog.youkuaiyun.com/LXLYHM/article/details/52098839

版权

Android学习记录同时被 2 个专栏收录

25 篇文章

订阅专栏

自定义控件

11 篇文章

订阅专栏

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

图1

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

图2

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

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

1.xml布局文件

<?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.
*/
-->

<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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <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:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:divider="#00000000"
            android:background="#eaeaea"
            android:layout_weight="0"/>

    </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_marginBottom="35dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_button_finance_default" />

    <TextView
        android:id="@+id/main_tv_final"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="15dp"
        android:layout_centerInParent="true"
        android:text="金融圈"
        android:textColor="@color/main_tabtextcolor" />
    
</RelativeLayout>

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的代码为：

<?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>

5.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>

源码下载：http://download.youkuaiyun.com/detail/lxlyhm/9849803

android studio项目在：http://download.youkuaiyun.com/download/lxlyhm/10150880

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