Android ViewPager相册横向移动

当我们第一次下载QQ并且打开的时候,会有一个新手引导,引导是几张图片,再加上一些文字说明,向右滑动,直到结束,今天一大早起来研究了一下关于此种效果的实现之ViewPager控件。

下面这个例子将用ViewPager实现横向移动相册,ViewPager有一个对应的PagerAdapter,用于绑定数据;我们需要继承此类并实现自己的功能。

1、首先定义一个显示项所需要使用的数据对象ImageItem

public class ImageItem {
    private int id;// 资源id
    private String name;// 显示的名称
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public ImageItem(int id, String name) {
        super();
        this.id = id;
        this.name = name;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
}

2、ViewPager中每一面为一个Item,所以在layout目录下定义一个ViewPager的每一页的Item,名为pageritem.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <ImageView
    android:id="@+id/imgview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:contentDescription="@string/app_name"
    android:scaleType="fitXY" />

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal" />

</FrameLayout>

3、新建一个java文件,对应ViewPager的每一项Item

public class ViewpagerItem extends FrameLayout {
    private ImageView imageview;// 显示图片的ImageView
    private TextView textview;
    private Bitmap bitmap;// 图片对应的Bitmap
    private ImageItem imageitem;// 每一个图片项对象

    public ViewpagerItem(Context context) {
        super(context);
        setViews();
    }
    public ViewpagerItem(Context context, AttributeSet attrs) {
        super(context, attrs);
        setViews();
    }

    public void setData(ImageItem item) {// 用ImageItem填充数据
        this.imageitem = item;
        int resid = item.getId();
        String name = item.getName();
        imageview.setImageResource(resid);
        textview.setText(name);
    }

    public void reload() {// 重新载入数据
        int resid = imageitem.getId();
        imageview.setImageResource(resid);
    }

    public void recycle() {// 回收数据
        imageview.setImageBitmap(null);
        if (this.bitmap == null || this.bitmap.isRecycled()) {
            return;
        }
        this.bitmap.recycle();
        this.bitmap = null;
    }

    public void setViews() {
        LayoutInflater infalter = LayoutInflater.from(getContext());
        View view = infalter.inflate(R.layout.pageritem, null);
        textview = (TextView) view.findViewById(R.id.textView);
        imageview = (ImageView) view.findViewById(R.id.imgview);

        addView(view);
    }
}

 4、新建一个数据填充器PagerItemAdapter,继承自PagerAdapter

public class PagerItemAdapter extends PagerAdapter {
    private Context context;
    private ImageItem[] image;

    public PagerItemAdapter(Context context, ImageItem[] image) {
        this.context = context;
        this.image = image;
        hashMap = new HashMap<Integer, ViewpagerItem>();
    }

    private HashMap<Integer, ViewpagerItem> hashMap;// 保存相片的id以及对应的ViewpagerItem

    @Override
    public int getCount() {
        return image.length;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public void finishUpdate(ViewGroup container) {
        super.finishUpdate(container);
    }

    @Override// 初始化一个ViewpagerItem,如果已经存在就重新载入,没有的话new一个
    public Object instantiateItem(ViewGroup container, int position) {
        ViewpagerItem item;
        if (hashMap.containsKey(position)) {
            item = hashMap.get(position);
            item.reload();
        } else {
            item = new ViewpagerItem(context);
            ImageItem itemimg = image[position];
            item.setData(itemimg);
            hashMap.put(position, item);
            ((ViewPager) container).addView(item);
        }
        return item;
    }

    @Override// 当我们左右滑动图片的时候会将图片回收掉
    public void destroyItem(View container, int position, Object object) {
        ViewpagerItem item = (ViewpagerItem) object;
        item.recycle();
    }
}

 5、在main.xml文件中添加一个ViewPager控件

<android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" />

 6、修改MainActivity如下:

public class MainActivity extends Activity {
    private final static int RES[] = { R.drawable.p1, R.drawable.p2 };// p1,p2为drawable文件夹下的两张图片
    private ViewPager viewpager;
    private PagerItemAdapter adapter;
    private ImageItem[] item;

    private void setView(){
        item = new ImageItem[2];
        item[0] = new ImageItem(RES[0], "page1");
        item[1] = new ImageItem(RES[1], "page2");
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        adapter = new PagerItemAdapter(getApplicationContext(), item);
        viewpager.setAdapter(adapter);
    }
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setView();
    }
}

 运行程序,左右滑动屏幕出现如下效果!

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值