Question

我想制作自定义TabLayout。创建活动时，第一个选项卡必须以中心开始。第二个标签首先在设计中显示3个字母。

滚动标签后

，它必须如下所示：

我尝试了很多代码来制作这个然而当我安装应用程序其他手机填充正常更改和设计无法正常工作。我怎样才能做到这一点？非常感谢。

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，这些更为重要。

自定义TabLayout启动中心

1 个答案: