FragmentTabHost实现中间按钮凸出效果

目前很多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 要想让中间按钮凸出需根据需求再拉控件覆盖原本中间按钮,其他按钮凸出同理

<?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接下来就是代码部分了,先新建片段(根据自己需求确定新建几个片段)此处我每个片段区别比较大,复用性差,所以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的代码为:

<?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项目是比较早发布的 那个时候手抖点错了积分 没有积分的小伙伴可以下载AS项目或者留言我发项目http://download.csdn.net/detail/lxlyhm/9849803 )

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,373评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,732评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,163评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,700评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,036评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,425评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,737评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,421评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,141评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,398评论 2 243
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,908评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,276评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,907评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,018评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,772评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,448评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,325评论 2 261

推荐阅读更多精彩内容