PagerSlidingTabStrip creates multi-interface sliding switching with tabs for Android

Here we use two libraries, one is android-support-v4 that comes with the Android SDK, and the other is PagerSlidingTabStrip. The open source project address is https://github.com/astuetz/PagerSlidingTabStrip
Use v4 You need to use its ViewPager and Fragment, and PagerSlidingTabStrip is the label above the application.

Preview of results:

Now, let’s start the work~
Layout

I won’t talk about creating Activity or anything else. If you like ActionBar, just To create an ActionBarActivity, the v7 support package is required.
The layout of this Activity is given directly here:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabstrip"
    android:layout_height="48dp"
    android:layout_width="match_parent" />
  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:overScrollMode="never"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_below="@id/tabstrip" />
</RelativeLayout>

com.astuetz.PagerSlidingTabStrip is the tabs at the top of the interface. Here I specified a height of 48dp, which is also the height of the feedback area strongly recommended in Android Design.
When a colleague was co-developing an app, I saw him using RadioGroup to make these tags, and adding a View to make the movable Indicator below. Not to mention it is easy to make mistakes, and the code complexity is definitely higher than mine. It is much higher to post. It's not that I'm lazy and unwilling to realize it myself, but I feel that there are already so many beautiful things in the world that others have kindly helped you to complete and are waiting for you to use them. It would be a bit confusing if you have to do it yourself. The gain outweighs the loss. Everyone wants to be awesome and make something better than others, but I think it is not easy to perfectly combine some existing good things.

After talking about some irrelevant points, let’s get back to the topic. Very simple upper and lower structural layout, needless to say. As for the android:overScrollMode="never" in ViewPager, it is a small tip. I don't like the out-of-bounds effect of ViewPager (fadingEdge="none" does not take effect). This layout parameter can invalidate the out-of-bounds effect of ViewPager.

Code

As we all know, members in ViewPager must be Fragments, so before configuring ViewPager and PagerSlidingTabStrip, you need to create a simple Fragment for display in ViewPager.

package com.airk.myapplication.viewdemo.app.fragments;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import com.airk.myapplication.simplechat.app.widget.MyTextView; //我自定义的TextView，只是修改了默认字体，最近觉得Roboto-Light/Thin特别好看
/**
 * Simple Fragment which only has one TextView
 */
public class NumberFragment extends Fragment {
  private String content; //Fragment中显示的内容
  public static NumberFragment newInstance(String content) { //对外提供创建实例的方法，你给我需要显示的内容，我给你Fragment实例
    return new NumberFragment(content);
  }
  private NumberFragment(String content) {
    this.content = content;
  }
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    MyTextView tv = new MyTextView(getActivity());
    tv.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT));
    tv.setGravity(Gravity.CENTER);
    tv.setTextSize(26.0f);
    tv.setText(this.content);
    return tv; //只有一个全屏显示、居中的Roboto字体的TextView
  }
}

The Fragment is created, and the comments are written into the code. It is easy to understand and very simple. The following is the Activity code:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main_activity);
  getSupportActionBar().setDisplayShowHomeEnabled(false); //ActionBar不显示应用Icon
  ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager); //获取ViewPager
  viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { //简单创建一个FragmentPagerAdapter
    @Override
    public CharSequence getPageTitle(int position) { //必须复写这个方法，开源控件PagerSlidingTabStrip需要通过它获取标签标题
      return "Title " + (position + 1);
    }
    @Override
    public Fragment getItem(int i) {
      return NumberFragment.newInstance("Content " + (i + 1)); //返回刚刚我们创建的那个Fragment，显示内容为Content X
    }
    @Override
    public int getCount() {
      return 3; //测试只用3个标签
    }
  });
  PagerSlidingTabStrip strip = (PagerSlidingTabStrip) findViewById(R.id.tabstrip); //获取PagerSlidingTabStrip控件对象
  strip.setShouldExpand(true); //设置标签自动扩展——当标签们的总宽度不够屏幕宽度时，自动扩展使每个标签宽度递增匹配屏幕宽度，注意！这一条代码必须在setViewPager前方可生效
  strip.setViewPager(viewpager); //这是其所handle的ViewPager
  strip.setDividerColor(Color.TRANSPARENT); //设置每个标签之间的间隔线颜色 ->透明
  strip.setUnderlineHeight(3); //设置标签栏下边的间隔线高度，单位像素
  strip.setIndicatorHeight(6); //设置Indicator 游标 高度，单位像素
}

PagerSlidingTabStrip This control has many customizable properties, including the color of each label, character color, interval Drawable, etc. If you have needs, you can take a closer look at its github homepage and the official sample to learn about it.

Summary
Combined with the open source control PagerSlidingTabStrip, we can easily develop multiple interfaces with tabs that can be slid. The amount of code is honestly very small, and the logic is also easy to understand. , without even registering any Listener, the interaction between tags and each interface has been realized (click the tag to switch interfaces or slide the interface to switch tags), and the Indicator cursor has also been designed to slide with the user's sliding, saving a lot of development time.

For more articles related to PagerSlidingTabStrip making Android multi-interface sliding switching with labels, please pay attention to the PHP Chinese website!