Question

我正在尝试创建如下图所示的导航栏。向左或向右滑动时，文本颜色和图标将相应更改（使其变为蓝色）。

我正在使用ViewPager进行此操作，每个标签项都是：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/app51_button_tab_title"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:maxLines="1" />

FragmentActivity：

package vn.com.vng.app51.lib.activity;

import vn.com.vng.app51.R;
import vn.com.vng.app51.lib.fragment.HomeFragment;
import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.content.res.Resources;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

public class HomeFragmentActivity extends Fragment implements ActionBar.TabListener {

    private static final String TAG = "HomeFragmentActivity";

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide fragments for each of the
     * three primary sections of the app. We use a
     * {@link android.support.v4.app.FragmentPagerAdapter} derivative, which will keep every loaded
     * fragment in memory. If this becomes too memory intensive, it may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    AppSectionsPagerAdapter mAppSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will display the three primary sections of the app, one at a time.
     */
    ViewPager mViewPager;
    View mRootView;
    LinearLayout mNavigationBar;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mRootView = LayoutInflater.from(getActivity()).inflate(R.layout.app51_home_fragment_activity_layout, null, false);

        // Create the adapter that will return a fragment for each of the three primary sections
        // of the app.
        mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getFragmentManager());

        // Set up the action bar.
        final ActionBar actionBar = getActivity().getActionBar();

        // Specify that the Home/Up button should not be enabled, since there is no hierarchical
        // parent.
        actionBar.setHomeButtonEnabled(false);

        // Specify that we will be displaying tabs in the action bar.
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Set up the ViewPager, attaching the adapter and setting up a listener for when the
        // user swipes between sections.
        mViewPager = (ViewPager) mRootView.findViewById(R.id.pager);
        mViewPager.setAdapter(mAppSectionsPagerAdapter);
        mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                // When swiping between different app sections, select the corresponding tab.
                // We can also use ActionBar.Tab#select() to do this if we have a reference to the
                // Tab.
                 actionBar.setSelectedNavigationItem(position);
                 setSelectedTab(position);
            }
        });

        initActionBar();
        // we have 3 tabs so 1 is middle of 0-1-2
        mViewPager.setCurrentItem(1);
        return mRootView;
    }
    private void initActionBar() {
        LayoutInflater inflater = LayoutInflater.from(getActivity());
        ActionBar actionBar = getActivity().getActionBar();
        for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {
            TextView view = (TextView) inflater.inflate(R.layout.app51_home_fragment_activity_action_bar_item, null);
            switch (i) {
            case 0:
                view.setText(R.string.app51_collection);
                break;
            case 1:
                view.setText(R.string.app51_suggestion);
                break;
            case 2:
                view.setText(R.string.app51_ranking);
                break;
            }
            actionBar.addTab(actionBar.newTab().setCustomView(view).setTabListener(this), i);
        }

    }
    void setSelectedTab(int selectedPosition) {
        ActionBar actionBar = getActivity().getActionBar();
        for (int i = 0; i < actionBar.getTabCount(); i++) {
            TextView title = (TextView) actionBar.getTabAt(i).getCustomView();
            Log.d(TAG, "width: " + title.getWidth());
            // Set hiệu ứng cho tab tương ứng
            if (i == selectedPosition) {
                title.setBackgroundResource(R.drawable.app51_home_fragment_activity_action_bar_item_background_focused);
                title.setTextColor(getResources().getColor(R.color.app51_text_blue));
                switch (selectedPosition){
                case 0:
                    title.setCompoundDrawablesWithIntrinsicBounds(R.drawable.app51_icon_collection_active, 0, 0, 0);
                    break;
                case 1:
                    title.setCompoundDrawablesWithIntrinsicBounds(R.drawable.app51_icon_suggest_active, 0, 0, 0);
                    break;
                case 2:
                    title.setCompoundDrawablesWithIntrinsicBounds(R.drawable.app51_icon_ranking_active, 0, 0, 0);
                    break;
                }
            } else {
                switch (i){
                case 0:
                    title.setCompoundDrawablesWithIntrinsicBounds(R.drawable.app51_icon_collection, 0, 0, 0);
                    break;
                case 1:
                    title.setCompoundDrawablesWithIntrinsicBounds(R.drawable.app51_icon_suggest, 0, 0, 0);
                    break;
                case 2:
                    title.setCompoundDrawablesWithIntrinsicBounds(R.drawable.app51_icon_ranking, 0, 0, 0);
                    break;
                }
                title.setBackgroundResource(R.drawable.app51_home_fragment_activity_action_bar_item_background);
                title.setTextColor(getResources().getColor(R.color.app51_text_title_color));
            }
            // Set lại padding cho tab
            int px = (int) convertDpToPixel(1);
            title.setPadding(px, 0, px, (int) convertDpToPixel(1));
        }
    }
    private float convertDpToPixel(float dp) {
        Resources resources = getActivity().getResources();
        DisplayMetrics metrics = resources.getDisplayMetrics();
        float px = dp * (metrics.densityDpi / 160f);
        return px;
    }
    @Override
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
    }

    @Override
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
        // When the given tab is selected, switch to the corresponding page in the ViewPager.
        mViewPager.setCurrentItem(tab.getPosition());
    }

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

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to one of the primary
     * sections of the app.
     */
    public static class AppSectionsPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public Fragment getItem(int i) {
            switch (i) {
            case 0:
                // The first section of the app is the most interesting -- it offers
                // a launchpad into the other demonstrations in this example application.
                return new HomeFragment();

            default:
                return new HomeFragment();
            }
        }

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

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

}

我可以实现我想要的但是它有一个问题：每个标签左右都有宽阔的空间

我尝试了从填充到边缘的所有内容，但没有运气。有什么建议吗？

试图在android上创建带有文本和图标的导航栏

0 个答案: