viewpager
ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view。
1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类。2)ViewPager类需要一个PagerAdapter适配器类给它提供数据。
3)ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。
在编写ViewPager的应用的使用,还需要使用两个组件类分别是PagerTitleStrip类和PagerTabStrip类,PagerTitleStrip类直接继承自ViewGroup类,而PagerTabStrip类继承PagerTitleStrip类,所以这两个类也是容器类。但是有一点需要注意,在定义XML的layout的时候,这两个类必须是ViewPager标签的子标签,不然会出错。
自己写的例子
效果图:
步骤:
1、我这里写了五个界面,所以要建立5个layout用来放界面
2,写一个主layout,里面放ViewPager,PagerTitleStrip和圆点
3,定义一个ViewPager的适配器MyPagerAdapter类MyPagerAdapter主要重写下面4个方法:
1. public int getCount()
2. public Object instantiateItem(ViewGroup container, int position)
3. public void destroyItem(ViewGroup container, int position, Object object)
4. public boolean isViewFromObject(View view, Object object)4,在oneActivity中将生成的五个界面加入到ViewPager中,并动态添加底部小圆点。
循环界面:
在MyPagerAdapter里重写的getCount()方法里,把返回值改成一个比较大的数,这样就可以伪造一个类似循环界面的情况
@Override //getCount():返回要滑动的VIew的个数,存储在list集合里
public int getCount() {
return Integer.MAX_VALUE;
}
oneAdapter
//把图片的第一张放到总页数的中间 mViewPager.setCurrentItem(Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%views.size());
底部加小圆点:
//循环得到点,这里的5是因为有五个界面
for (int i = 0; i < 5; i++) {
ImageView iv1 = new ImageView(this);
//设置点的宽高,注意宽不能设成match_parent,不然点就会被挤没
iv1.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
iv1.setImageResource(R.mipmap.unchecked);
//设置点的距离
mPoints.add(iv1);//把点都加到数组mPoints
mLinearLayoutContainer.addView(iv1);//把点添加到layout布局中
}
mPoints.get(0).setImageResource(R.mipmap.checked);//把第一个点设成选中状态
vpAdapter = new MyPagerAdapter(titleList, views); // 初始化Adapter
mViewPager.setAdapter(vpAdapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override//当滑动时改变点的状态
public void onPageSelected(int position) {
setBackPoint(position%views.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//改变点的状态的方法
public void setBackPoint(int position){
for(ImageView iv:mPoints){
iv.setImageResource(R.mipmap.unchecked);
}
mPoints.get(position).setImageResource(R.mipmap.checked);
}
加标题:
在activity_main.xml里添加
<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:id="@+id/pagertitle" android:background="#ABABAB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" /> </android.support.v4.view.ViewPager>
在MyPagerAdapter重写
@Override//用来添加标题 public CharSequence getPageTitle(int position) { return titleList.get(position % views.size()); }
在oneActivity加:
// 每个页面的Title数据 titleList = new ArrayList<String>(); titleList.add("春日"); titleList.add("夏花"); titleList.add("秋叶"); titleList.add("冬雪"); titleList.add("云雪"); mPoints = new ArrayList<>();//把点都放到这个集合里
源码:
activity_main.xml
<RelativeLayout 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"
tools:context=".MainActivity">
//这里调用javaV4包需要全名调用
<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:id="@+id/pagertitle"
android:background="#ABABAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/linearlayout_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
view1
其他四个view也这样写,只是图片不同
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/bb" />
</RelativeLayout>
oneActivity.java
package myViewPager;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.example.administrator.mypager.R;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Administrator on 2015/9/4.
*/
public class oneActivity extends Activity {
private ViewPager mViewPager;
private ArrayList<View> views;
private LayoutInflater mInflater;
private MyPagerAdapter vpAdapter;
private List<String> titleList; //标题列表数组
private LinearLayout mLinearLayoutContainer;
private ArrayList<ImageView> mPoints;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mLinearLayoutContainer = (LinearLayout) findViewById(R.id.linearlayout_container);
views = new ArrayList<View>();//用来放图片的集合
mInflater = getLayoutInflater();
// 初始化引导图片列表
views.add(mInflater.inflate(R.layout.view1, null));
views.add(mInflater.inflate(R.layout.view2, null));
views.add(mInflater.inflate(R.layout.view3, null));
views.add(mInflater.inflate(R.layout.view4, null));
views.add(mInflater.inflate(R.layout.view5, null));
// 每个页面的Title数据
titleList = new ArrayList<String>();
titleList.add("春日");
titleList.add("夏花");
titleList.add("秋叶");
titleList.add("冬雪");
titleList.add("云雪");
mPoints = new ArrayList<>();//把点都放到这个集合里
//循环得到点,这里的5是因为有五个界面
for (int i = 0; i < 5; i++) {
ImageView iv1 = new ImageView(this);
//设置点的宽高,注意宽不能设成match_parent,不然点就会被挤没
iv1.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
iv1.setImageResource(R.mipmap.unchecked);
//设置点的距离
mPoints.add(iv1);//把点都加到数组mPoints
mLinearLayoutContainer.addView(iv1);//把点添加到layout布局中
}
mPoints.get(0).setImageResource(R.mipmap.checked);//把第一个点设成选中状态
vpAdapter = new MyPagerAdapter(titleList, views); // 初始化Adapter
mViewPager.setAdapter(vpAdapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override//当滑动时改变点的状态
public void onPageSelected(int position) {
setBackPoint(position%views.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//把图片的第一张放到总页数的中间
mViewPager.setCurrentItem(Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%views.size());
}
//改变点的状态的方法
public void setBackPoint(int position){
for(ImageView iv:mPoints){
iv.setImageResource(R.mipmap.unchecked);
}
mPoints.get(position).setImageResource(R.mipmap.checked);
}
}
MyPagerAdapter.java
package myViewPager;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.example.administrator.mypager.R;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Administrator on 2015/9/4.
*/
public class oneActivity extends Activity {
private ViewPager mViewPager;
private ArrayList<View> views;
private LayoutInflater mInflater;
private MyPagerAdapter vpAdapter;
private List<String> titleList; //标题列表数组
private LinearLayout mLinearLayoutContainer;
private ArrayList<ImageView> mPoints;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mLinearLayoutContainer = (LinearLayout) findViewById(R.id.linearlayout_container);
views = new ArrayList<View>();//用来放图片的集合
mInflater = getLayoutInflater();
// 初始化引导图片列表
views.add(mInflater.inflate(R.layout.view1, null));
views.add(mInflater.inflate(R.layout.view2, null));
views.add(mInflater.inflate(R.layout.view3, null));
views.add(mInflater.inflate(R.layout.view4, null));
views.add(mInflater.inflate(R.layout.view5, null));
// 每个页面的Title数据
titleList = new ArrayList<String>();
titleList.add("春日");
titleList.add("夏花");
titleList.add("秋叶");
titleList.add("冬雪");
titleList.add("云雪");
mPoints = new ArrayList<>();//把点都放到这个集合里
//循环得到点,这里的5是因为有五个界面
for (int i = 0; i < 5; i++) {
ImageView iv1 = new ImageView(this);
//设置点的宽高,注意宽不能设成match_parent,不然点就会被挤没
iv1.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
iv1.setImageResource(R.mipmap.unchecked);
//设置点的距离
mPoints.add(iv1);//把点都加到数组mPoints
mLinearLayoutContainer.addView(iv1);//把点添加到layout布局中
}
mPoints.get(0).setImageResource(R.mipmap.checked);//把第一个点设成选中状态
vpAdapter = new MyPagerAdapter(titleList, views); // 初始化Adapter
mViewPager.setAdapter(vpAdapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override//当滑动时改变点的状态
public void onPageSelected(int position) {
setBackPoint(position%views.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//把图片的第一张放到总页数的中间
mViewPager.setCurrentItem(Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%views.size());
}
//改变点的状态的方法
public void setBackPoint(int position){
for(ImageView iv:mPoints){
iv.setImageResource(R.mipmap.unchecked);
}
mPoints.get(position).setImageResource(R.mipmap.checked);
}
}