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属性更改
  • 先上效果图
  • android设置状态栏为标题栏图片 android设置标题栏名称_ViewPager

  • 实现标题栏的自定义,只需要在复写的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方法进行了上面的修改。