效果图:
左右滑动展示图片,页面底部的小点表示当前图片的位置,浅蓝色的小点表示当前正在查看的图片。
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
></android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/tipsBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="36dp"
android:orientation="horizontal"
>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
使用ViewPager需要引入android.support.v4包,用来向后兼容api 4(android 1.6).
上面的布局文件使用FrameLayout(帧)布局方式,帧布局UI元素会层层折叠,上述布局的效果是表示图片索引的小圆点在图片的上方显示。
JAVA程序:
自定义类继承Activity
public class MyViewPager1 extends Activity
下面定义一些私有属性:
private ViewPager viewPager;
private ImageView[] tips;//提示性点点数组
private int[] images;//图片ID数组
private int currentPage=0;//当前展示的页码
在onCreate方法中初始化这些属性。
viewPager=(ViewPager)findViewById(R.id.viewpager1);
//图片ID数组
images=new int[]{R.drawable.images1,R.drawable.images2,R.drawable.images3,R.drawable.images4,R.drawable.images5};
//存放点点的容器
LinearLayout tipsBox=(LinearLayout)findViewById(R.id.tipsBox);
//初始化 提示点点
tips=new ImageView[5];
for(int i=0;i<tips.length;i++){
ImageView img=new ImageView(this); //实例化一个点点
img.setLayoutParams(new LayoutParams(10,10));
tips[i]=img;
if(i==0)
{
img.setBackgroundResource(R.drawable.page_now);//蓝色背景
}
else{
img.setBackgroundResource(R.drawable.page);//黑色背景
}
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
params.leftMargin=5;
params.rightMargin=5;
tipsBox.addView(img, params); //把点点添加到容器中
}
属性初始化完成之后,我们需要给ViewPager设置adapter对象。ViewPager如同ListView一般需要设置适配器,ViewPager的adapter是PagerAdapter。
PagerAdapter adapter=new PagerAdapter(){
@Override
public int getCount() {
// TODO Auto-generated method stub
return images.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container,int position,Object o){
//container.removeViewAt(position);
}
//设置ViewPager指定位置要显示的view
@Override
public Object instantiateItem(ViewGroup container,int position){
ImageView im=new ImageView(MyViewPager1.this);
im.setImageResource(images[position]);
container.addView(im);
return im;
}
};
viewPager.setAdapter(adapter);
完成了这些操作我们已经可以实现图片的左右滚动,但是底部的小圆点的背景色并没有随着查看的图片不同而有所改变,这时需要给ViewPager绑定一个事件处理函数,currentPage保存的是当前查看的图片的索引,当向左或向右滚动时currentPage需要重新赋值,设置旧值表示的小圆点的背景为黑色,设置新值表示的小圆点的背景为蓝色。
//更改当前tip
viewPager.setOnPageChangeListener(new OnPageChangeListener(){
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
Log.e("rf",String.valueOf(position));
tips[currentPage].setBackgroundResource(R.drawable.page);
currentPage=position;
tips[position].setBackgroundResource(R.drawable.page_now);
}
});
--------------------------------------------------------------------------------------------------------------------------------------------
下面是完整程序:
package li.example.myfriend;
import android.util.Log;
import android.view.*;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.app.*;
import android.content.*;
import android.os.*;
import android.support.v4.*;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
public class MyViewPager1 extends Activity{
private ViewPager viewPager;
private ImageView[] tips;//提示性点点数组
private int[] images;//图片ID数组
private int currentPage=0;//当前展示的页码
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_myviewpager_1);
viewPager=(ViewPager)findViewById(R.id.viewpager1);
//存放点点的容器
LinearLayout tipsBox=(LinearLayout)findViewById(R.id.tipsBox);
//初始化图片资源
images=new int[]{R.drawable.images1,R.drawable.images2,R.drawable.images3,R.drawable.images4,R.drawable.images5};
//初始化 提示点点
tips=new ImageView[5];
for(int i=0;i<tips.length;i++){
ImageView img=new ImageView(this);
img.setLayoutParams(new LayoutParams(10,10));
tips[i]=img;
if(i==0)
{
img.setBackgroundResource(R.drawable.page_now);
}
else{
img.setBackgroundResource(R.drawable.page);
}
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
params.leftMargin=5;
params.rightMargin=5;
tipsBox.addView(img, params);
}
//-----初始化PagerAdapter------
PagerAdapter adapter=new PagerAdapter(){
@Override
public int getCount() {
// TODO Auto-generated method stub
return images.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container,int position,Object o){
//container.removeViewAt(position);
}
@Override
public Object instantiateItem(ViewGroup container,int position){
ImageView im=new ImageView(MyViewPager1.this);
im.setImageResource(images[position]);
container.addView(im);
return im;
}
};
viewPager.setAdapter(adapter);
//更改当前tip
viewPager.setOnPageChangeListener(new OnPageChangeListener(){
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
Log.e("rf",String.valueOf(position));
tips[currentPage].setBackgroundResource(R.drawable.page);
currentPage=position;
tips[position].setBackgroundResource(R.drawable.page_now);
}
});
}
}