Question

我有我的PagerTabStrip设置，但标签看起来并不好看。如何使标签看起来正常？（以中间为中心 - 没有双线）

谢谢你能引导我找到解决方案。我觉得我似乎无法找到这个问题的答案

这是XML - 非常简单。

 <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible">

    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary_blue"
        android:textColor="#fff" />

</android.support.v4.view.ViewPager>

Answer 1

在PagerTabStrip

中使用ViewPager

这是我的照片。

你可以这样做。

xml代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@color/colorPrimary"
            android:paddingBottom="20dp"
            android:paddingTop="20dp"/>
    </android.support.v4.view.ViewPager>
</RelativeLayout>

活动代码

public class MainActivity extends AppCompatActivity {
// layouts below the Tab
private View view1, view2, view3;
private List<View> viewList;
private ViewPager viewPager;
private PagerTabStrip mPagerTabStrip;
private List<String> titleList;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    initView();

    initTitle();

    PagerAdapter pagerAdapter = getAdapter();

    viewPager.setAdapter(pagerAdapter);
}

/**
 * init view
 */
private void initView() {
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
    //  Tab Indicator Color setting
    mPagerTabStrip.setTabIndicatorColorResource(R.color.colorAccent);

    LayoutInflater inflater = getLayoutInflater();
    view1 = inflater.inflate(R.layout.layout1, null);
    view2 = inflater.inflate(R.layout.layout2, null);
    view3 = inflater.inflate(R.layout.layout3, null);

    // Add view to the viewList
    viewList = new ArrayList<View>();
    viewList.add(view1);
    viewList.add(view2);
    viewList.add(view3);
}

/**
 * add title to the titleList
 */
private void initTitle() {
    titleList = new ArrayList<String>();
    titleList.add("January, 2017");
    titleList.add("February, 2017");
    titleList.add("July, 2017");
}

@NonNull
private PagerAdapter getAdapter() {
    return new PagerAdapter() {

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == viewList.get((int) Integer.parseInt(arg1.toString()));
        }

        @Override
        public int getCount() {
            return viewList.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(viewList.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(viewList.get(position));
            return position;
        }

        /**
         *  title
         * @param pos
         * @return
         */
        @Override
        public CharSequence getPageTitle(int pos) {
            //  title icon setting ,space added before text for
            SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(" " + titleList.get(pos)); //
            Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher);
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
            ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);

            // text color setting
            ForegroundColorSpan fcs = new ForegroundColorSpan(Color.WHITE);
            // icon setting
            // ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            // text color setting
            spannableStringBuilder.setSpan(fcs, 1, spannableStringBuilder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            spannableStringBuilder.setSpan(new RelativeSizeSpan(1.2f), 1, spannableStringBuilder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return spannableStringBuilder;
        }
    };
}
}

您需要了解setTabIndicatorColorResource和getPageTitle in the PagerAdapter，这些更为重要。

修复PagerTabStrip中的选项卡

1 个答案: