Android ViewPager加载图片效果

目前项目中需要用到ViewPager加载图片，现在在此记录一下。

首先先看布局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.fly.viewpagerbanner.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_above="@+id/ll"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<LinearLayout
android:id="@+id/ll"
android:layout_marginTop="10.0dip"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24.0dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

MainActivity

package com.example.fly.viewpagerbanner;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* 类名：
* 类描述：ViewPager展示图片
* 创建人：fly
* 创建日期： 2017/1/16.
* 版本：V1.0
*/
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,View.OnClickListener {
private ViewPager vp;
private ViewPagerAdapter vpAdapter;
private List<Map<String, Object>> data;
private int lastValue = -1; // 是不是最后一张图片
private ImageView[] dots; //底部小点图片
private int currentIndex; //记录当前选中位置
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//  Intent intent = new Intent();
//  intent.putStringArrayListExtra("GalleryPlusActivity",ArrayList<String>); // 怎么传递集合
ArrayList<String> imageLists = getIntent().getStringArrayListExtra("GalleryPlusActivity"); // 动态获取展示图片的集合
data = getData(imageLists);
vp = (ViewPager) findViewById(R.id.viewpager);
vpAdapter = new ViewPagerAdapter(data,this);
vp.setAdapter(vpAdapter);
vp.addOnPageChangeListener(this);
initDots();//初始化底部小点
}
//这个方法长度是动态的，可以改成你从服务器获取的图片，这样数量就不确定啦
public List<Map<String, Object>> getData(ArrayList<String> imageLists) {
List<Map<String, Object>> mData = new ArrayList<>();
//  if (imageLists != null && imageLists.size() > 0) {
//   for (int i = 0; i < imageLists.size(); i++) {
//    Map<String, Object> map = new HashMap<>();
//    map.put("url", imageLists.get(i));
//    map.put("view", new ImageView(this));
//    mData.add(map);
//   }
//  }
Map<String, Object> map = new HashMap<>();
map.put("url", "http://img2.duitang.com/uploads/item/201207/19/20120719132725_UkzCN.jpeg");
map.put("view", new ImageView(this));
mData.add(map);
Map<String, Object> map1 = new HashMap<>();
map1.put("url", "http://img4.duitang.com/uploads/item/201404/24/20140424195028_vtvZu.jpeg");
map1.put("view", new ImageView(this));
mData.add(map1);
Map<String, Object> map2 = new HashMap<>();
map2.put("url", "http://download.pchome.net/wallpaper/pic-5041-8-240x320.jpg");
map2.put("view", new ImageView(this));
mData.add(map2);
Map<String, Object> map3 = new HashMap<>();
map3.put("url", "http://www.mangowed.com/uploads/allimg/130425/572-130425105311304.jpg");
map3.put("view", new ImageView(this));
mData.add(map3);
return mData;
}
private void initDots() {
LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
mLayoutParams.setMargins(3, 0, 3, 0);
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
dots = new ImageView[data.size()];
//循环取得小点图片
for (int i = 0; i < data.size(); i++) {
dots[i] = new ImageView(this);
dots[i].setLayoutParams(mLayoutParams);
dots[i].setBackgroundResource(R.drawable.dot);
dots[i].setEnabled(true);//都设为灰色
dots[i].setOnClickListener(this);
dots[i].setTag(i);//设置位置tag，方便取出与当前位置对应
ll.addView(dots[i]);
}
currentIndex = 0;
dots[currentIndex].setEnabled(false);//设置为白色，即选中状态
}
private void setCurView(int position) { /**设置当前的引导页*/
if (position < 0 || position >= data.size()) {return;}
vp.setCurrentItem(position);
}
private void setCurDot(int position) { /**设置当前引导小点的选中*/
if (position < 0 || position > data.size() - 1 || currentIndex == position) {return;}
dots[position].setEnabled(false);
dots[currentIndex].setEnabled(true);
currentIndex = position;
}
@Override //当前页面被滑动时调用
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
lastValue = position;
}
@Override
public void onPageSelected(int position) {     //当新的页面被选中时调用
setCurDot(position); //设置底部小点选中状态
}
@Override
public void onPageScrollStateChanged(int state) {   //当滑动状态改变时调用
if(state == 0){
if(lastValue == data.size()-1){
Toast.makeText(this, "已经是最后一张了", Toast.LENGTH_SHORT).show();
}
}
}
@Override
public void onClick(View v) {
int position = (Integer)v.getTag();
setCurView(position);
setCurDot(position);
}
}

ViewPagerAdapter

package com.example.fly.viewpagerbanner;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import java.util.List;
import java.util.Map;
public class ViewPagerAdapter extends PagerAdapter {
Context context;
List<Map<String, Object>> viewLists;
public ViewPagerAdapter(List<Map<String, Object>> lists, Context context) {
this.viewLists = lists;
this.context = context;
}
@Override
public int getCount() {  //获得size
return viewLists.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup view, int position, Object object) { //销毁Item
ImageView x = (ImageView) viewLists.get(position).get("view");
x.setScaleType(ImageView.ScaleType.FIT_CENTER);
view.removeView(x);
}
@Override
public Object instantiateItem(ViewGroup view, int position){ //实例化Item
ImageView imageView = (ImageView) viewLists.get(position).get("view");
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
Glide.with(context)
.load(viewLists.get(position).get("url").toString())
//    .placeholder(R.mipmap.new_default)
.error(R.mipmap.ic_launcher)
.diskCacheStrategy(DiskCacheStrategy.RESULT)
.into(imageView);
view.addView(imageView, 0);
return viewLists.get(position).get("view");
}
}

是不是很简单。
最后附上demo：http://xiazai.jb51.net/201701/yuanma/ViewPager(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• android中ViewPager结合Fragment进行无限滑动
• Android中TabLayout+ViewPager 简单实现app底部Tab导航栏
• Android自定义ViewPagerIndicator实现炫酷导航栏指示器（ViewPager+Fragment）
• Android ViewPager实现轮播图效果
• Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件
• Android中ViewPager获取当前显示的Fragment
• 详解Android_性能优化之ViewPager加载成百上千高清大图oom解决方案
• Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）
• Android画廊效果之ViewPager显示多个图片
• Android使用自定义PageTransformer实现个性的ViewPager动画切换效果