自定义 TabLayout 启动中心

Question

我想制作自定义 TabLayout。当 activity 创建时，第一个选项卡必须居中开始。第二个选项卡的前 3 个字母显示在设计中。

滚动标签后，它必须看起来像这样：

我尝试了很多代码来实现这一点，但是当我安装应用程序时，其他 phone 填充正常变化并且设计不起作用。我怎样才能做到这一点？非常感谢。

Answer 1

在ViewPager

中使用PagerTabStrip

这是我的照片。

你可以这样做。

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>

Activity代码

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 启动中心

Custom TabLayout start center

android

android-viewpager

android-tablayout