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标签的子标签,不然会出错。
下面是一个viewpager的实例
实现功能是 五张图片的左右滑动切换图片和对应的titile,即使
布局文件:
<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" >
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="200dp"
android:id="@+id/viewPager"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewPager"
android:background="#77000000"
android:padding="8dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#ffffff"
android:textSize="18sp"
android:singleLine="true"
android:ellipsize="end"
android:id="@+id/tv_intro"
android:text="我是文本d"/>
<LinearLayout
android:layout_marginTop="3dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/dot_layout"
android:layout_gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</RelativeLayout>
内容:在相对布局里有个 viewpager ,其下面是一个textview,textview下面是一个线性布局,实现的功能是显示图片的点标签
1.先实现图片功能:
list.add(new Ad(R.drawable.a, "巩俐不低俗,我就不能低俗"));
list.add(new Ad(R.drawable.b, "朴树又回来了,再唱经典老歌引百万人同唱啊"));
list.add(new Ad(R.drawable.c, "揭秘北京电影如何升级"));
list.add(new Ad(R.drawable.d, "乐视网TV版大放送"));
list.add(new Ad(R.drawable.e, "热血屌丝的反杀"));
viewPager.setAdapter(new MyAdapter());
2.完成图片功能后,对于点标签(对于正处于显示状态的图片的点标签为深色,未显示的图片的点标签为浅色)进行初始化,完成显示图片个数的点标签
/**
* 初始化 dot 点
*/
private void initDots(){
for (int i = 0; i <list.size(); i++) {
View view = new View(this);
// LayoutParams 有很多的LayoutParams 不能随便选,现在使用的是linealayout的
LayoutParams params = new LayoutParams(8, 8);
if (i!=0) {//如果是第一个点,则不需要边距
params.leftMargin = 5;
}
view.setLayoutParams(params);//相当于在布局文件中设置view的宽和高
view.setBackgroundResource(R.drawable.selector_dot);
dot_Layout.addView(view);//把view传给dotlayout 布局当中
}
}
3.为实现图片可以左右移动而不出现越界现象,实现伪无限轮播的效果:
int centerValue = Integer.MAX_VALUE/2;
int value = centerValue%list.size();//
viewPager.setCurrentItem(centerValue-value);
4.更新文本信息:
/**
* 更新文本信息
*/
private void updateIntro(){
int currentPage = viewPager.getCurrentItem()%list.size();//得到当前的page!
tv_intro.setText(list.get(currentPage).getIntro());
for (int i = 0; i <dot_Layout.getChildCount(); i++) {
dot_Layout.getChildAt(i).setEnabled(i==currentPage);
}
}
具体代码:
package com.example.viewpagertest;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
public class MainActivity extends Activity {
private ViewPager viewPager;
private LinearLayout dot_Layout;
private TextView tv_intro;
private List<Ad> list = new ArrayList<Ad>();
private Handler handler = new Handler(){
public void handleMessage(android.os.Message msg) {
//完成延时
viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
handler.sendEmptyMessageDelayed(0, 2000);//2秒后又发一个消息,完成自动轮播
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initViews();
initListener();//监听器方法
initDatas();
}
private void initListener() {
// TODO Auto-generated method stub
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
/**
* 当page被选择
*/
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
Log.i("wei", "position: "+position);
updateIntro();
}
/**
* 当page被
*/
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
/**
* 当page被选择
*/
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
private void initDatas() {
// TODO Auto-generated method stub
list.add(new Ad(R.drawable.a, "巩俐不低俗,我就不能低俗"));
list.add(new Ad(R.drawable.b, "朴树又回来了,再唱经典老歌引百万人同唱啊"));
list.add(new Ad(R.drawable.c, "揭秘北京电影如何升级"));
list.add(new Ad(R.drawable.d, "乐视网TV版大放送"));
list.add(new Ad(R.drawable.e, "热血屌丝的反杀"));
viewPager.setAdapter(new MyAdapter());
initDots();
int centerValue = Integer.MAX_VALUE/2;
int value = centerValue%list.size();//
viewPager.setCurrentItem(centerValue-value);
updateIntro();
handler.sendEmptyMessageDelayed(0, 2000);
}
private void initViews() {
// TODO Auto-generated method stub
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
dot_Layout = (LinearLayout) findViewById(R.id.dot_layout);
tv_intro = (TextView) findViewById(R.id.tv_intro);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
/**
* 初始化 dot 点
*/
private void initDots(){
for (int i = 0; i <list.size(); i++) {
View view = new View(this);
// LayoutParams 有很多的LayoutParams 不能随便选,现在使用的是linealayout的
LayoutParams params = new LayoutParams(8, 8);
if (i!=0) {//如果是第一个点,则不需要边距
params.leftMargin = 5;
}
view.setLayoutParams(params);//相当于在布局文件中设置view的宽和高
view.setBackgroundResource(R.drawable.selector_dot);
dot_Layout.addView(view);//把view传给dotlayout 布局当中
}
}
/**
* 更新文本信息
*/
private void updateIntro(){
int currentPage = viewPager.getCurrentItem()%list.size();//得到当前的page!
tv_intro.setText(list.get(currentPage).getIntro());
for (int i = 0; i <dot_Layout.getChildCount(); i++) {
dot_Layout.getChildAt(i).setEnabled(i==currentPage);
}
}
//****************************************************
public class MyAdapter extends PagerAdapter
{
@Override
public int getCount() {
// TODO Auto-generated method stub
// return list.size();
return Integer.MAX_VALUE;//将这个数尽可能大,伪无限循环
}
/**
* true: 不去创建view,使用缓存
* false:去创建view
* viewPager 最多缓存三个界面
* object:将要进入的新创建的view,由instantiateItem方法创建
*/
@Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view==object;
}
/**
* container:viewPager本身的引用
* position :当前需要销毁第几个page
* object : 当前需要 销毁的page
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
// super.destroyItem(container, position, object);//本身是抛异常,告知我们这个方法一定需要重写
container.removeView((View) object);
}
/**
* 类似于baseadapter的getView方法
* 用来将数据设置给view
* 由于最多就三个界面,所以不需要viewHolder
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
View view = View.inflate(MainActivity.this, R.layout.adapter_ad, null);
ImageView imageView = (ImageView) view.findViewById(R.id.image);
Ad ad = list.get(position%list.size());//取余使得图片可以循环
imageView.setImageResource(ad.getIcon());
container.addView(view);//一定不能少,将view加入到viewpager中
return view;
}
}
}