ViewPager与PagerTabStrip的基本使用方法

来源：互联网发布：linux ntp客户端编辑：程序博客网时间：2024/06/05 03:44

在android开发中viewpager是一个实用性超强的控件。下面就viewpager与PagerTabStrip的基本使用做一些总结。

Viewpager的基本用法

viewpager的用法与listview差不多都需要下面两个条件

数据源
适配器Adapter
数据源就不多说了，一般情况下就是将视图加到List集合中。然后在adapter中的instantiateItem方法中呈现。基本代码如下：

activity

List<View> list = new ArrayList<>();        LayoutInflater inflater = LayoutInflater.from(this);        list.add(inflater.inflate(R.layout.viewpager_list_1, null));        list.add(inflater.inflate(R.layout.viewpager_list_2, null));        list.add(inflater.inflate(R.layout.viewpager_list_3, null));        list.add(inflater.inflate(R.layout.viewpager_list_4, null));        list.add(inflater.inflate(R.layout.viewpager_list_5, null));        mViewPager.setAdapter(new ViewPagerAdapter(this, list,strings));

PagerAdapter中

    @Override    public int getCount() {        if (null != mVapgerView) {            return mVapgerView.size();        }        return 0;    }    //这个方法用于判断是否由对象生成界面    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    //这个方法，是从ViewGroup中移出当前View    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mVapgerView.get(position));    }    //这个方法实例化的意思,也就是将当前需要呈现的视图呈现。    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = mVapgerView.get(position);        container.addView(view);        return view;    }

pagertabstrip是如何设置的呢？很简单

.xml

<android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v4.view.PagerTabStrip            android:id="@+id/pager_tab"            android:layout_width="wrap_content"            android:layout_height="50dp"/>    </android.support.v4.view.ViewPager>

.java

mPagerTabStrip = (PagerTabStrip)findViewById(R.id.pager_tab);        //设置页眉的基本属性        //取消页眉下的一条线        mPagerTabStrip.setDrawFullUnderline(false);        //设置tab的下划线颜色        mPagerTabStrip.setTabIndicatorColor(Color.RED);

pagertab在页面中是怎样呈现的？

通过PagerAdapter中的

@Override    public CharSequence getPageTitle(int position) {    //这里返回的是页眉的字串内容；        return mTabText.get(position);    }

直接将字串返回给页眉；
是不是很简单；

完整代码如下：
Activity:

package com.example.bankman.view;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import com.example.bankman.R;import com.example.bankman.adapter.ViewPagerAdapter;import java.util.ArrayList;import java.util.List;/** * Created by yuchao on 17/2/18. */public class ViewPagerActivity extends Activity {    private ViewPager mViewPager;    private PagerTabStrip mPagerTabStrip;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_viewpager);        initView();        initData();    }    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.view_pager);        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_tab);        //设置页眉的基本属性        //取消页眉下的一条线        mPagerTabStrip.setDrawFullUnderline(false);        //设置tab的下划线颜色        mPagerTabStrip.setTabIndicatorColor(Color.RED);    }    private void initData() {        List<View> list = new ArrayList<>();        List<String> strings = new ArrayList<>();        LayoutInflater inflater = LayoutInflater.from(this);        list.add(inflater.inflate(R.layout.viewpager_list_1, null));        list.add(inflater.inflate(R.layout.viewpager_list_2, null));        list.add(inflater.inflate(R.layout.viewpager_list_3, null));        list.add(inflater.inflate(R.layout.viewpager_list_4, null));        list.add(inflater.inflate(R.layout.viewpager_list_5, null));        strings.add("海贼王");        strings.add("龙珠超");        strings.add("火影忍者");        strings.add("一拳超人");        strings.add("东京食尸鬼");        mViewPager.setAdapter(new ViewPagerAdapter(this, list,strings));    }}

PagerAdapter

package com.example.bankman.adapter;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * Created by yuchao on 17/2/18. */public class ViewPagerAdapter extends PagerAdapter {    private static final String TAG = ViewPagerAdapter.class.getSimpleName();    private Context mContext;    private List<View> mVapgerView;    private List<String> mTabText;    private int mI;    public ViewPagerAdapter(Context context, List<View> data, List<String> text) {        mContext = context;        mVapgerView = data;        mTabText = text;    }    @Override    public int getCount() {        if (null != mVapgerView) {            return mVapgerView.size();        }        return 0;    }    //这个方法用于判断是否由对象生成界面    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    //这个方法，是从ViewGroup中移出当前View    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mVapgerView.get(position));    }    //这个方法实例化的意思,也就是将当前需要呈现的视图呈现。    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = mVapgerView.get(position);        container.addView(view);        return view;    }    //得到tab的字串;    @Override    public CharSequence getPageTitle(int position) {        return mTabText.get(position);    }}

这里只是对ViewPager的一些最基本的使用方法做了一些介绍，在实际开发中是很少会用到PagerTabStrip这个的，因为效果实在是太差。下面我们再介绍一种简单，并且效果比PagerTabStrip要好上许多的控件。

用最简单的方法实现app菜单页面的切换。

在上一章中我们介绍了PagerTabStrip与ViewPager结合使用，发现虽然功能实现了但是效果很难看。
在这里我们再介绍一个ViewPager连用的控件TabLayout.

TabLayout使用方法

添加jar包

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

.xml与PagerTabStrip有所不同。如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/pager_tab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/>    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent"/></LinearLayout>

在java代码中与PagerTabStrip差不多。如下：

 mViewPager.setAdapter(adapter); mTabLayout.setSelectedTabIndicatorColor(Color.RED); mTabLayout.setSelectedTabIndicatorHeight(10); //关联ViewPager mTabLayout.setupWithViewPager(mViewPager); mTabLayout.setTabsFromPagerAdapter(adapter);

完整代码如下：
activity

package com.example.bankman.view;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import com.example.bankman.R;import com.example.bankman.adapter.ViewPagerAdapter;import java.util.ArrayList;import java.util.List;/** * Created by yuchao on 17/2/21. */public class ViewPagerTab extends Activity {    private ViewPager mViewPager;    private TabLayout mTabLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_viewpager_tab);        initView();        initData();    }    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.view_pager);        mTabLayout = (TabLayout) findViewById(R.id.pager_tab);    }    private void initData() {        List<View> list = new ArrayList<>();        List<String> strings = new ArrayList<>();        LayoutInflater inflater = LayoutInflater.from(this);        list.add(inflater.inflate(R.layout.viewpager_list_1, null));        list.add(inflater.inflate(R.layout.viewpager_list_2, null));        list.add(inflater.inflate(R.layout.viewpager_list_3, null));        list.add(inflater.inflate(R.layout.viewpager_list_4, null));        list.add(inflater.inflate(R.layout.viewpager_list_5, null));        strings.add("海贼王");        strings.add("龙珠超");        strings.add("火影忍者");        strings.add("一拳超人");        strings.add("东京食尸鬼");        ViewPagerAdapter adapter = new ViewPagerAdapter(this, list, strings);        mViewPager.setAdapter(adapter);        mTabLayout.setSelectedTabIndicatorColor(Color.RED);        mTabLayout.setSelectedTabIndicatorHeight(10);        //关联ViewPager        mTabLayout.setupWithViewPager(mViewPager);        mTabLayout.setTabsFromPagerAdapter(adapter);    }}

adapter

package com.example.bankman.adapter;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * Created by yuchao on 17/2/21. */public class ViewPagerTabAdapter extends PagerAdapter {    private Context mContext;    private List<View> mViews;    private List<String> mTitle;    public ViewPagerTabAdapter(Context context, List<View> view, List<String> title) {        mContext = context;        mViews = view;        mTitle = title;    }    @Override    public int getCount() {        if (null != mViews) {            return mViews.size();        }        return 0;    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mViews.get(position));    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = mViews.get(position);        container.addView(view);        return view;    }    @Override    public CharSequence getPageTitle(int position) {        return mTitle.get(position);    }}

0 0