SlidingTabLayout仅带图标

时间:2015-01-24 13:10:37

标签: android android-layout

this示例后,我能够创建一个仅带图标的SlidingTabLayout,但我想将它们居中。我是否需要创建自定义视图或是否有其他解决方案?

任何帮助都将不胜感激。

enter image description here

1 个答案:

答案 0 :(得分:25)

最后我想出来了。这是我的代码示例......

为我创建的每个标签创建一个drawable store_tab.xmlcart_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_store_white_24dp" android:state_selected="true" />
    <item android:drawable="@drawable/ic_store_grey600_24dp" />
</selector>

创建自己的寻呼机适配器,从FragmentPageAdapter

延伸
public class HomePagerAdapter extends FragmentPagerAdapter {

    private static int[] ICONS = new int[] {
        R.drawable.store_tab,
        R.drawable.cart_tab
    };

    // ...

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

    @Override
    public int getCount() {
        return ICONS.length;
    }

    public int getDrawableId(int position) {
        return ICONS[position];
    }

}

SlidingTabLayout

中创建以下新方法
protected ImageView createDefaultImageView(Context context) {
    ImageView imageView = new ImageView(context);

    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
    imageView.setPadding(padding, padding, padding, padding);

    int width = (int) (getResources().getDisplayMetrics().widthPixels / mViewPager.getAdapter().getCount());
    imageView.setMinimumWidth(width);

    return imageView;
}

然后更改populateTabStrip

中的方法SlidingTabLayout
private void populateTabStrip() {
    final HomePagerAdapter adapter = (HomePagerAdapter) mViewPager.getAdapter();
    final View.OnClickListener tabClickListener = new TabClickListener();

    for (int i = 0; i < adapter.getCount(); i++) {
        View tabView = null;
        //TextView tabTitleView = null;
        ImageView tabIconView = null;

        /*if (mTabViewLayoutId != 0) {
            // If there is a custom tab view layout id set, try and inflate it
            tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                    false);
            tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
        }

        if (tabView == null) {
            tabView = createDefaultTabView(getContext());
        }

        if (tabTitleView == null && TextView.class.isInstance(tabView)) {
            tabTitleView = (TextView) tabView;
        }*/

        if (tabView == null) {
            tabView = createDefaultImageView(getContext());
        }

        if (tabIconView == null && ImageView.class.isInstance(tabView)) {
            tabIconView = (ImageView) tabView;
        }

        tabIconView.setImageDrawable(getResources().getDrawable(adapter.getDrawableId(i))); 
        if (mViewPager.getCurrentItem() == i) {
            tabIconView.setSelected(true);
        }
        //tabTitleView.setText(adapter.getPageTitle(i));
        tabView.setOnClickListener(tabClickListener);

        mTabStrip.addView(tabView);
    }
}

最后在onPageSelected

中更改InternalViewPageListener
@Override
public void onPageSelected(int position) {
    for (int i = 0; i < mTabStrip.getChildCount(); i++) {
        mTabStrip.getChildAt(i).setSelected(false);
    }
    mTabStrip.getChildAt(position).setSelected(true);

    if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
        mTabStrip.onViewPagerPageChanged(position, 0f);
        scrollToTab(position, 0);
    }

    if (mViewPagerPageChangeListener != null) {
        mViewPagerPageChangeListener.onPageSelected(position);
    }
}

最终结果

enter image description here