【问题标题】:Align-Center SlidingTabLayoutAlign-Center SlidingTabLayout
【发布时间】:2015-01-17 22:36:37
【问题描述】:

在我将我的应用程序迁移到 5.0 后,我不得不从基本选项卡迁移到 google 开发人员 provides 所提供的slidingTabLayout。

问题是,我不知道如何让两个按钮都像旧按钮一样居中。顺便说一句,我不是在谈论样式,只是按钮的位置,共享相同数量的宽度空间! 为了清楚起见,我将发布一些图片:

我现在拥有的:

我期望拥有的:

我的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></include>

    <com.maddogs.mymoney.views.SlidingTabLayout
        android:id="@+id/requestSlideTab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.maddogs.mymoney.views.SlidingTabLayout>

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.maddogs.mymoney.RequestActivity" />
</LinearLayout>

非常感谢!

【问题讨论】:

    标签: android android-layout android-tabs android-5.0-lollipop


    【解决方案1】:

    使用 setDistributeEvenly() ,它会做你想做的事。像这样:

    slideTab = (SlidingTabLayout)findViewById(R.id.requestSlideTab);
    slideTab.setDistributeEvenly(true);
    slideTab.setViewPager(viewPager);
    

    编辑:从 Google IO 复制的 SlidingTabLayout

    import android.content.Context;
    import android.graphics.Typeface;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.util.AttributeSet;
    import android.util.SparseArray;
    import android.util.TypedValue;
    import android.view.Gravity;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.HorizontalScrollView;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    
    /**
     * To be used with ViewPager to provide a tab indicator component which give constant feedback as to
     * the user's scroll progress.
     * <p>
     * To use the component, simply add it to your view hierarchy. Then in your
     * {@link android.app.Activity} or {@link android.support.v4.app.Fragment} call
     * {@link #setViewPager(ViewPager)} providing it the ViewPager this layout is being used for.
     * <p>
     * The colors can be customized in two ways. The first and simplest is to provide an array of colors
     * via {@link #setSelectedIndicatorColors(int...)}. The
     * alternative is via the {@link TabColorizer} interface which provides you complete control over
     * which color is used for any individual position.
     * <p>
     * The views used as tabs can be customized by calling {@link #setCustomTabView(int, int)},
     * providing the layout ID of your custom layout.
     */
    public class SlidingTabLayout extends HorizontalScrollView {
        /**
         * Allows complete control over the colors drawn in the tab layout. Set with
         * {@link #setCustomTabColorizer(TabColorizer)}.
         */
        public interface TabColorizer {
    
            /**
             * @return return the color of the indicator used when {@code position} is selected.
             */
            int getIndicatorColor(int position);
    
        }
    
        private static final int TITLE_OFFSET_DIPS = 24;
        private static final int TAB_VIEW_PADDING_DIPS = 16;
        private static final int TAB_VIEW_TEXT_SIZE_SP = 18;
    
        private int mTitleOffset;
    
        private int mTabViewLayoutId;
        private int mTabViewTextViewId;
        private boolean mDistributeEvenly;
    
        private ViewPager mViewPager;
        private SparseArray<String> mContentDescriptions = new SparseArray<String>();
        private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;
    
        private final SlidingTabStrip mTabStrip;
    
        public SlidingTabLayout(Context context) {
            this(context, null);
        }
    
        public SlidingTabLayout(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
    
            // Disable the Scroll Bar
            setHorizontalScrollBarEnabled(false);
            // Make sure that the Tab Strips fills this View
            setFillViewport(true);
    
            mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);
    
            mTabStrip = new SlidingTabStrip(context);
            addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        }
    
        /**
         * Set the custom {@link TabColorizer} to be used.
         *
         * If you only require simple custmisation then you can use
         * {@link #setSelectedIndicatorColors(int...)} to achieve
         * similar effects.
         */
        public void setCustomTabColorizer(TabColorizer tabColorizer) {
            mTabStrip.setCustomTabColorizer(tabColorizer);
        }
    
        public void setDistributeEvenly(boolean distributeEvenly) {
            mDistributeEvenly = distributeEvenly;
        }
    
        /**
         * Sets the colors to be used for indicating the selected tab. These colors are treated as a
         * circular array. Providing one color will mean that all tabs are indicated with the same color.
         */
        public void setSelectedIndicatorColors(int... colors) {
            mTabStrip.setSelectedIndicatorColors(colors);
        }
    
        /**
         * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are
         * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so
         * that the layout can update it's scroll position correctly.
         *
         * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener)
         */
        public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
            mViewPagerPageChangeListener = listener;
        }
    
        /**
         * Set the custom layout to be inflated for the tab views.
         *
         * @param layoutResId Layout id to be inflated
         * @param textViewId id of the {@link TextView} in the inflated view
         */
        public void setCustomTabView(int layoutResId, int textViewId) {
            mTabViewLayoutId = layoutResId;
            mTabViewTextViewId = textViewId;
        }
    
        /**
         * Sets the associated view pager. Note that the assumption here is that the pager content
         * (number of tabs and tab titles) does not change after this call has been made.
         */
        public void setViewPager(ViewPager viewPager) {
            mTabStrip.removeAllViews();
    
            mViewPager = viewPager;
            if (viewPager != null) {
                viewPager.setOnPageChangeListener(new InternalViewPagerListener());
                populateTabStrip();
            }
        }
    
        /**
         * Create a default view to be used for tabs. This is called if a custom tab view is not set via
         * {@link #setCustomTabView(int, int)}.
         */
        protected TextView createDefaultTabView(Context context) {
            TextView textView = new TextView(context);
            textView.setGravity(Gravity.CENTER);
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
            textView.setTypeface(Typeface.DEFAULT_BOLD);
            textView.setLayoutParams(new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    
            TypedValue outValue = new TypedValue();
            getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
                    outValue, true);
            textView.setBackgroundResource(outValue.resourceId);
            textView.setAllCaps(true);
    
            int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
            textView.setPadding(padding, padding, padding, padding);
    
            return textView;
        }
    
        private void populateTabStrip() {
            final PagerAdapter adapter = mViewPager.getAdapter();
            final View.OnClickListener tabClickListener = new TabClickListener();
    
            for (int i = 0; i < adapter.getCount(); i++) {
                View tabView = null;
                TextView tabTitleView = 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 (mDistributeEvenly) {
                    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                    lp.width = 0;
                    lp.weight = 1;
                }
    
                tabTitleView.setText(adapter.getPageTitle(i));
                tabView.setOnClickListener(tabClickListener);
                String desc = mContentDescriptions.get(i, null);
                if (desc != null) {
                    tabView.setContentDescription(desc);
                }
    
                mTabStrip.addView(tabView);
                if (i == mViewPager.getCurrentItem()) {
                    tabView.setSelected(true);
                }
            }
        }
    
        public void setContentDescription(int i, String desc) {
            mContentDescriptions.put(i, desc);
        }
    
        @Override
        protected void onAttachedToWindow() {
            super.onAttachedToWindow();
    
            if (mViewPager != null) {
                scrollToTab(mViewPager.getCurrentItem(), 0);
            }
        }
    
        private void scrollToTab(int tabIndex, int positionOffset) {
            final int tabStripChildCount = mTabStrip.getChildCount();
            if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
                return;
            }
    
            View selectedChild = mTabStrip.getChildAt(tabIndex);
            if (selectedChild != null) {
                int targetScrollX = selectedChild.getLeft() + positionOffset;
    
                if (tabIndex > 0 || positionOffset > 0) {
                    // If we're not at the first child and are mid-scroll, make sure we obey the offset
                    targetScrollX -= mTitleOffset;
                }
    
                scrollTo(targetScrollX, 0);
            }
        }
    
        private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {
            private int mScrollState;
    
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                int tabStripChildCount = mTabStrip.getChildCount();
                if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
                    return;
                }
    
                mTabStrip.onViewPagerPageChanged(position, positionOffset);
    
                View selectedTitle = mTabStrip.getChildAt(position);
                int extraOffset = (selectedTitle != null)
                        ? (int) (positionOffset * selectedTitle.getWidth())
                        : 0;
                scrollToTab(position, extraOffset);
    
                if (mViewPagerPageChangeListener != null) {
                    mViewPagerPageChangeListener.onPageScrolled(position, positionOffset,
                            positionOffsetPixels);
                }
            }
    
            @Override
            public void onPageScrollStateChanged(int state) {
                mScrollState = state;
    
                if (mViewPagerPageChangeListener != null) {
                    mViewPagerPageChangeListener.onPageScrollStateChanged(state);
                }
            }
    
            @Override
            public void onPageSelected(int position) {
                if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
                    mTabStrip.onViewPagerPageChanged(position, 0f);
                    scrollToTab(position, 0);
                }
                for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                    mTabStrip.getChildAt(i).setSelected(position == i);
                }
                if (mViewPagerPageChangeListener != null) {
                    mViewPagerPageChangeListener.onPageSelected(position);
                }
            }
    
        }
    
        private class TabClickListener implements View.OnClickListener {
            @Override
            public void onClick(View v) {
                for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                    if (v == mTabStrip.getChildAt(i)) {
                        mViewPager.setCurrentItem(i);
                        return;
                    }
                }
            }
        }
    
    }
    

    【讨论】:

    • 感谢回复,但是我的SlidingTabLayout没有这个功能。我只是从 Google 示例中复制粘贴。我错过了什么吗?
    • 可能是您使用的是旧代码,我在答案中添加了来自 google io 的最新代码。
    • 在代码中textView.setAllCaps(true);这行需要Api 14,只需注释它以获取较低的api,当前我的是9。
    • 谢谢,成功了!顺便说一句,对于那些使用旧代码的人,您还应该更改SlidingTabStrip,否则会出错。代码可以找到:github.com/google/iosched/blob/…
    • 对于未来的读者,请务必致电setDistributeEvenlybefore setViewPager
    【解决方案2】:

    在类SlidingTabLayout方法populateTabStrip()中添加

    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
            0, LayoutParams.WRAP_CONTENT, 1f);
    tabView.setLayoutParams(lp);
    

    【讨论】:

    • 由于我的 TabLayout 不支持名为“setDistributeEvenly()”的方法,因此您的答案正确解决了问题。感谢分享:)
    • 很好的解决方案,但这会删除当前标签的指示器。有什么解决办法吗?
    【解决方案3】:

    为什么不使用 PagerSlidingTabStrip 库?

    有了这个库,你只需要调用setShouldExpand(true)。如果标签的总宽度不超过屏幕宽度,标签容器将被扩展以匹配屏幕宽度。

    我真的认为你应该使用这个库,它非常好并且非常易于使用。

     protected void onCreate(Bundle savedInstanceState)
        {
            ViewPager viewPager = findViewById(R.id.view_pager, null);
            PagerSlidingTabStrip tabs = findViewById(R.id.tabs, null);
    
            // ...
    
            tabs.setShouldExpand(true);
            tabs.setViewPager(viewPager);
    
            // ...
        }
    

    【讨论】:

    • 首先感谢您的回答。对于如此简单的事情,我不是第三方库的忠实粉丝。而对于 PagerSlidingTabStrip,它似乎不再维护,因为它已经快一年没有更新了,这并不好。
    • SlidingTabLayout 用于所有意图和目的已替换 PagerSlidingTabStrip
    猜你喜欢
    • 2021-05-09
    • 1970-01-01
    • 2018-07-16
    • 2012-03-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-31
    相关资源
    最近更新 更多