原生TabLayout实现ViewPagerIndicator

直接贴代码

• 使用TabLayout控件首先得导入Android下的design包

  compile 'com.android.support:design:23.2.0'
  

• xml布局文件

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">
  
      <android.support.design.widget.TabLayout
          android:id="@+id/tl"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:background="#fff"
          app:tabGravity="fill"
          app:tabIndicatorColor="#0ddcff"
          app:tabMode="fixed" // TAB自适应居中
          app:tabSelectedTextColor="#0ddcff"
          app:tabTextColor="#000" />
  
      <android.support.v4.view.ViewPager
          android:id="@+id/vp"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1" />
  
  </LinearLayout>
  

• Java代码

public class TABTestActivity extends AppCompatActivity {

	// 包：android.support.design.widget.TabLayout;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    private static final int TAB_COUNT = 3; // TAB数量

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

        mTabLayout = (TabLayout) findViewById(R.id.tl);
        mViewPager = (ViewPager) findViewById(R.id.vp);

        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        
            /** 设置各个TAB内容页 */
            @Override public Fragment getItem(int i) {
                switch (i) {
                    case 0:
                        return new Fragment();
                    case 1:
                        return new BbsFragment();
                    case 2:
                        return new NewsFragment();
                    default:
                        return null;
                }
            }

            /** 设置TAB标题 */
            @Override public CharSequence getPageTitle(int position) {
                switch (position) {
                    case 0:
                        return "First";
                    case 1:
                        return "Second";
                    case 2:
                        return "Third";
                    default:
                        return null;
                }
            }

            /** 设置TAB数量 */
            @Override public int getCount() {
                return TAB_COUNT;
            }
        });

        /** 将ViewPager绑定到TabLayout */
        mTabLayout.setupWithViewPager(mViewPager);
    }
}

---

效果

• 

---

以上。如有错误和疑问，欢迎指正提出。 catface.wyh@gmail.com