第13天ViewPager之PagerTitleStrip和PagerTabStrip（了解）

PagerTitleStrip和PagerTabStrip

二者都可以实现标题的ViewPager滑动

一.PagerTitleStrip效果

代码：

1.布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <android.support.v4.view.ViewPager
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/view_pager_id"
       >
      <android.support.v4.view.PagerTitleStrip
          android:layout_width="match_parent"
          android:layout_height="50dp"
          android:id="@+id/pager_title_strip_id"
          android:layout_gravity="bottom"
          />
   </android.support.v4.view.ViewPager>

</LinearLayout>

2.Java代码：MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;//控件
    private List<ImageView> data = new ArrayList<>();//数据源
    private int[] images = {R.mipmap.txt_theme26,R.mipmap.txt_theme29,R.mipmap.txt_theme30};

    private MyAdapter adapter;//适配器

    private String[] titles = {"筷子兄弟","多彩世界","单身狗"};

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

        mViewPager = (ViewPager) findViewById(R.id.view_pager_id);

        //构建数据源
        for (int i = 0; i < images.length; i++) {
            ImageView iv = new ImageView(this);
            iv.setImageResource(images[i]);
            data.add(iv);
        }

        //初始化适配器
        adapter = new MyAdapter();
        mViewPager.setAdapter(adapter);
    }

    //TODO 自定义ViewPager 的适配器
    class MyAdapter extends PagerAdapter
    {
        @Override
        public int getCount() {
            return data.size();
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            //1, 加载视图到ViewPager
            container.addView(data.get(position));
            //2, 返回当前加载的视图
            return data.get(position);
        }
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
           // 1, 注释 super.destroyItem(container, position, object);
            //2, 移除数据
            container.removeView(data.get(position));
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view==object;
        }

        //设置标题
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

二.PagerTabStrip效果

代码

1.布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager_id"
        >
        <android.support.v4.view.PagerTabStrip
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/pager_tab_strip_id"/>
    </android.support.v4.view.ViewPager>
</LinearLayout>

2.Java代码：MainActivity.java

public class MainActivity extends AppCompatActivity {


    private ViewPager mViewPager;
    private List<ImageView> data = new ArrayList<>();//数据源
    private int[] images = {R.mipmap.slide1,R.mipmap.slide2,R.mipmap.slide3};
    private String[] titles = {"页面一","页面二","页面三"};
    private  MyAdapter adapter;//适配器
    private PagerTabStrip mPagerTabStrip;


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

        mViewPager = (ViewPager) findViewById(R.id.view_pager_id);
        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_tab_strip_id);

        mPagerTabStrip.setDrawFullUnderline(false);//设置是否显示下划线 , false  不显示
        mPagerTabStrip.setBackgroundColor(Color.YELLOW);//设置PagerTabStrip背景色
        mPagerTabStrip.setTabIndicatorColor(Color.RED);//设置下划线的颜色

        for(int i = 0;i<images.length;i++)
        {
            ImageView iv = new ImageView(this);
            iv.setImageResource(images[i]);
            data.add(iv);
        }

        adapter = new MyAdapter();
        mViewPager.setAdapter(adapter);
    }

    class MyAdapter extends PagerAdapter
    {
        @Override
        public int getCount() {
            return data.size();
        }

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

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

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view==object;
        }
        //设置标题
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }

}

二者的区别

PagerTitleStrip 不能和用户交互, 不能被点击
PagerTabStrip 可以和用户交互, 可以被点击，在导航的下方有下划线, 并且当前对于的下划线是加粗的