在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);
}
}