UI控件--ViewPager详解添加标题栏（3）

PagerTitleStrip标题栏

• 先上所有代码，在进行细节说明

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lingzhuo.testviewpager.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.PagerTitleStrip
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"></android.support.v4.view.PagerTitleStrip>

    </android.support.v4.view.ViewPager>

</LinearLayout>

• 首先必须在布局文件中添加PagerTitleStrip作为ViewPager的子控件，并设置bottom/top，
• 注意PagerTitleStrip是ViewPager的子控件
• 三个滑动页面的布局就是上一篇博客的代码，这里就不在进行介绍了，并无改动。

public class MainActivity extends AppCompatActivity {

    private List<View> list_view =new ArrayList<>();
    private List<String> list_title =new ArrayList<>();
    private ViewPager viewPager;
    private View view1,view2,view3;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        LayoutInflater inflater=getLayoutInflater();
        view1=inflater.inflate(R.layout.layout_pager1,null);
        view2=inflater.inflate(R.layout.layout_pager2,null);
        view3=inflater.inflate(R.layout.layout_pager3,null);
        list_view.add(view1);
        list_view.add(view2);
        list_view.add(view3);
        list_title.add("星期一");
        list_title.add("星期二");
        list_title.add("星期三");
        PagerAdapter pagerAdapter=new PagerAdapter() {
            @Override
            public CharSequence getPageTitle(int position) {
                return list_title.get(position);
            }

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

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

            @Override
            public int getCount() {
                return list_view.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view== list_view.get(Integer.parseInt(object.toString()));
            }
        };
        viewPager.setAdapter(pagerAdapter);

    }

    private void init() {
        viewPager= (ViewPager) findViewById(R.id.viewPager);
    }
}

这里相比较上一篇博客就做了以下更改

    private List<String> list_title =new ArrayList<>();

    list_title.add("星期一");
    list_title.add("星期二");
    list_title.add("星期三");

• 只是在变量声明阶段增加了一个list_title的list声明，在代码中添加了滑动页面相应个数的名称，其实对应位置的名称，就是对应页面的标题

            @Override
            public CharSequence getPageTitle(int position) {
                return list_title.get(position);
            }

• 在PagerAdapter中复写了getPageTitle这个方法，更具当前位置返回页面的标题
• 效果图如下
  

PagerTabStrip标题栏

• 这个标题栏的设置与除了布局文件里添加的控件不同之外，其它的代码编写与PagerTitleStrip完全相同

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.PagerTabStrip
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"></android.support.v4.view.PagerTabStrip>

    </android.support.v4.view.ViewPager>

</LinearLayout>

• 首先必须在布局文件中添加PagerTabStrip作为ViewPager的子控件，并设置bottom/top，
• 注意PagerTabStrip是ViewPager的子控件
• 其它的代码设置与上面的PagerTitleStrip完全一致，这里就不在一一赘述。
  

两种方式的区别

• 通过效果图，我们可以发现这两种实现方式的两点不同之处
  

  1、PagerTabStrip在当前页面下，会有一个下划线条来提示当前页面的Tab是哪个。
  2、PagerTabStrip的Tab是可以点击的，当用户点击某一个Tab时，当前页面就会跳转到这个页面，而PagerTitleStrip则没这个功能。

扩展：PagerTabStrip属性更改

• 先上效果图
  

• 实现标题栏的自定义，只需要在复写的getPageTitle方法返回值进行自定义就可以了，这里应用了富文本的使用，富文本的使用可以参见我的博客 UI控件–TextView

• 具体代码如下

                public CharSequence getPageTitle(int position) {
                String picHtml="<img src='ic_launcher'><font color='#ff0000'>"+list_title.get(position)+"</font>";
                Spanned spanned= Html.fromHtml(picHtml, new Html.ImageGetter() {
                    //通过反射获取文件
                    Class clazz=R.mipmap.class;
                    Drawable drawable=null;
                    public Drawable getDrawable(String source) {
                        try {
                            //通过反射通过传进来的source也就是图片名称，获取图片的属性实例
                            Field field=clazz.getDeclaredField(source);
                            //通过图片属性获取图片的id
                            int id=field.getInt(null);
                            drawable=getResources().getDrawable(id,null);
                            //注意一定要对图片设置坐标点和相应的宽和高，否则图片没设置大小，会不显示
                            drawable.setBounds(0,0,drawable.getMinimumWidth(),drawable.getMinimumHeight());
                        } catch (NoSuchFieldException e) {
                            e.printStackTrace();
                        } catch (IllegalAccessException e) {
                            e.printStackTrace();
                        }
                        return drawable;
                    }
                },null);

                return spanned;
            }

• 其它的代码设置，与上面贴的代码完全一致，仅仅对getPageTitle方法进行了上面的修改。