DroidWorks: 在ActionBar中嵌入TabBar

時間 2019-12-08

標籤 droidworks actionbar 嵌入 tabbar 简体版

原文原文鏈接

前言

Android中默認的TabBar位於ActionBar的下方，在ActionBar橫屏有足夠空間時，會將TabBar嵌入到ActionBar中，節省縱向空間。一些UI設計強制將TabBar嵌入到ActionBar，並去掉默認的HOME LOGO，起到節省屏幕空間的做用，如網易雲音樂2.1.1中。
html

1. ViewPager+Tabs實現側滑

實現ViewPager

關聯ViewPager與Tabs

這部分代碼在Google官方的Training中有詳細的闡述（Creating Swipe Views with Tabs），這裏就不詳細解釋了，它實現的這個側滑和Tab聯動的交互是上文所述效果的基礎。java

package me.codethink.embeddedtabsactionbar;

import android.app.ActionBar;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v13.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;

import java.lang.reflect.Method;

public class MainActivity extends Activity {
    private TabContentPagerAdapter mTabContentPagerAdapter;
    private ViewPager mViewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        final ActionBar actionBar = getActionBar();
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        mTabContentPagerAdapter = new TabContentPagerAdapter(getFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mTabContentPagerAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
            @Override
            public void onPageSelected(int position) {
                actionBar.setSelectedNavigationItem(position);
            }
        });

        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        ActionBar.TabListener tabListener = new ActionBar.TabListener() {

            @Override
            public void onTabSelected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) {
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) {

            }

            @Override
            public void onTabReselected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) {

            }
        };

        for (int i = 0; i < 3; i++) {
            actionBar.addTab(
                    actionBar.newTab()
                            .setText("Tab " + (i + 1))
                            .setTabListener(tabListener));
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    public static class TabContentPagerAdapter extends FragmentStatePagerAdapter {

        public TabContentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            Fragment fragment = new DemoObjectFragment();
            Bundle args = new Bundle();
            switch (i) {
                case 0:
                    args.putInt(DemoObjectFragment.ARG_OBJECT, Color.RED);
                    break;
                case 1:
                    args.putInt(DemoObjectFragment.ARG_OBJECT, Color.YELLOW);
                    break;
                case 2:
                    args.putInt(DemoObjectFragment.ARG_OBJECT, Color.BLUE);
                    break;
            }

            fragment.setArguments(args);
            return fragment;

        }

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "OBJECT " + (position + 1);
        }

    }

    public static class DemoObjectFragment extends Fragment {
        public static final String ARG_OBJECT = "object";

        @Override
        public View onCreateView(LayoutInflater inflater,
                                 ViewGroup container, Bundle savedInstanceState) {

            View rootView = inflater.inflate(
                    R.layout.fragment_main, container, false);
            Bundle args = getArguments();
            rootView.setBackgroundColor(args.getInt(ARG_OBJECT));
            return rootView;
        }
    }

}

效果以下：android

2. 嵌入TabBar到ActionBar

經過反射機制強制嵌入TabBar是實現這個效果的核心部分，其代碼以下：git

@Override
protected void onCreate(Bundle savedInstanceState) {
    ......

    for (int i = 0; i < 3; i++) {
        actionBar.addTab(
                actionBar.newTab()
                        .setText("Tab " + (i + 1))
                        .setTabListener(tabListener));
    }

    enableEmbeddedTabs(actionBar);
}

private void enableEmbeddedTabs(Object actionBar) {
    try {
        Method setHasEmbeddedTabsMethod = actionBar.getClass().getDeclaredMethod("setHasEmbeddedTabs", boolean.class);
        setHasEmbeddedTabsMethod.setAccessible(true);
        setHasEmbeddedTabsMethod.invoke(actionBar, true);
    } catch (Exception e) {
        Log.v("EmbeddedTabs", e.getMessage().toString());

    }
}

效果以下：github

3. 修改ActionBar樣式

3.1 刪除左側默認的App Logo

經過設置定製的ActionBar style中的displayOptions爲none能夠去掉左側默認的Logosegmentfault

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/EmbeddedActionBar</item>
    </style>

    <style name="EmbeddedActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid">
        <item name="android:displayOptions">none</item>
    </style>


</resources>

3.2 修改TabBar樣式

這一部分主要包括三個步驟數組

1.修改Tab前景app

2.修改Tab背景ide

3.去掉TabBar的divider函數

3.2.1 修改Tab前景

Tab前景主要是icon被選中時候顏色的改變，這裏icon在選中的時候爲綠色，未選中爲白色，經過selector創建對應的Tab前景樣式以下（這裏以tag這個標籤爲例）：
actionbar_tag.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Selected states -->
    <item android:drawable="@drawable/actionbar_tag_green" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
    <!-- Focused states -->
    <item android:drawable="@drawable/actionbar_tag_green" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/actionbar_tag_green" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
    <!-- Pressed -->
    <item android:drawable="@drawable/actionbar_tag_green" android:state_pressed="true"/>

    <item android:drawable="@drawable/actionbar_tag_white" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
</selector>

將三個前景圖做爲數組寫到arrays.xml
arrays.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="actionbar_icons">
        <item>@drawable/actionbar_home</item>
        <item>@drawable/actionbar_tag</item>
        <item>@drawable/actionbar_account</item>
    </string-array>
</resources>

在onCreate函數中設置Tab的前景：
MainActivity.java

......

        TypedArray iconIds = getResources().obtainTypedArray(R.array.actionbar_icons);
        for (int i = 0; i < 3; i++) {
            View view = getLayoutInflater().inflate(R.layout.actionbar_tab_layout, null);
            ImageView imageView = (ImageView) view.findViewById(R.id.icon);
            imageView.setImageResource(iconIds.getResourceId(i, -1));

            actionBar.addTab(
                    actionBar.newTab()
                            .setCustomView(view)
                            .setTabListener(tabListener));
        }

        enableEmbeddedTabs(actionBar);
......

這裏的action_tab_layout以下
action_tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
        >
    <ImageView android:id="@+id/icon"
               android:layout_gravity="center"
               android:layout_width="50dp"
               android:layout_height="50dp"/>

</LinearLayout>

在styles.xml中設置Tab的padding和gravity
styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/EmbeddedActionBar</item>
        <item name="android:actionBarTabStyle">@style/EmbeddedTabStyle</item>
    </style>

    <style name="EmbeddedActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid">
        <item name="android:displayOptions">none</item>
    </style>

    <style name="EmbeddedTabStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
        <item name="android:padding">0dp</item>
        <item name="android:gravity">center</item>
    </style>
</resources>

修改後的樣式以下：

3.2.2 設置Tab背景

Tab的背景是指Tab選中時，背景色隨之改變的樣式，一樣經過selector實現，實現xml以下：

actionbar_tabs_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Selected states -->
    <item android:drawable="@color/actionbar_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
    <!-- Focused states -->
    <item android:drawable="@color/actionbar_selected" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@color/actionbar_selected" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
    <!-- Pressed -->
    <item android:drawable="@color/actionbar_selected" android:state_pressed="true"/>

    <item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>

</selector>

在Tab的樣式中指定background爲actionbar_tags_bg.xml

<resources>
......
    <style name="EmbeddedTabStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
        <item name="android:background">@drawable/actionbar_tabs_bg</item>
        <item name="android:padding">0dp</item>
        <item name="android:gravity">center</item>
    </style>

......
</resources>

3.2.3刪除TabBar的divider

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/EmbeddedActionBar</item>
        <item name="android:actionBarTabStyle">@style/EmbeddedTabStyle</item>
        <item name="android:actionBarTabBarStyle">@style/customActionBarTabBarStyle</item>
    </style>
......
    <style name="customActionBarTabBarStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabBar">
        <item name="android:divider">@null</item>
    </style>
</resources>

3.2.4 修改ActionBar顏色

......
    <style name="EmbeddedActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid">
        <item name="android:displayOptions">none</item>
        <item name="android:background">@color/actionbar_dark_grey</item>
    </style>
......

最終完成後效果以下：

代碼地址：
EmbeddedTabsActionBar

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。