android中ViewPager+Picasso 实现轮播本地和网络图片源码

一、原理
首先，将这些要轮播的图片和一些文本分别放置在不同的数据集合中，程序启动的时候默认显示一组图片和文本数据，然后启动一个定时器，每隔一段时间便替换掉显示的图片和文本数据，同时加入一些动画效果，已达到轮播的特效。同时，我们也要实现手指滑动图片达到轮播的效果。

二、实现
1、程序启动界面MainActivity

我将所有的实现都放在了MainActivity中，下面我们就来分解来看这个类。

1)成员变量

这些成员变量包括界面上显示的控件，存放图片的id数组，存放图片的标题数组，自定义的ViewPagerAdapter适配器，线程池ScheduledExecutorService

具体代码如下:

private ViewPager mViewPaper;
private List<ImageView> images;
private List<View> dots;
private int currentItem;
//记录上一次点的位置
private int oldPosition = 0;
private ScheduledExecutorService scheduledExecutorService;
private ViewPagerAdapter adapter;

private TextView title;

//存放图片的id
private int[] imageIds = new int[]{
R.drawable.ads_one,
R.drawable.ads_two,
R.drawable.ads_three
};
//存放图片的id
private String[] imageTitle = new String[]{
"测试图片1",
"测试图片2",
"测试图片3"
};

2)onCreate方法

这个方法是程序启动创建界面时的回调方法，这个方法中主要实现的功能就是初始化界面，同时为ViewPager设置页面变化监听事件。

具体实现代码如下:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
title = (TextView)findViewById(R.id.title);
title.setText(imageTitle[0]);
mViewPaper = (ViewPager) findViewById(R.id.vp);
mViewPaper.setFocusable(true);
mViewPaper.setFocusableInTouchMode(true);
mViewPaper.requestFocus();
//显示的图片
images = new ArrayList<ImageView>();
for (int i = 0; i < imageIds.length; i++) {

ImageView imageView = new ImageView(this);
//获取本地图片
//imageView.setBackgroundResource(imageIds[i]);
//获取网络图片
//百度首页的网络图片
//https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png
Picasso.with(this).load("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png").into(imageView);
images.add(imageView);
}
//显示的小点
dots = new ArrayList<View>();
dots.add(findViewById(R.id.dot_0));
dots.add(findViewById(R.id.dot_1));
dots.add(findViewById(R.id.dot_2));
/* dots.add(getView().findViewById(R.id.dot_3));
dots.add(getView().findViewById(R.id.dot_4));*/

adapter = new ViewPagerAdapter();
mViewPaper.setAdapter(adapter);

mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override
public void onPageSelected(int position) {

title.setText(imageTitle[position]);

dots.get(position).setBackgroundResource(R.drawable.dot_focused);
dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);

oldPosition = position;
currentItem = position;
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageScrollStateChanged(int arg0) {

}
});

}
3)自定义Adapter类ViewPagerAdapter

这个自定义的Adapter类不同于以往的自定义Adapter类，它继承自PagerAdapter，PagerAdapter中实现了图片切换的动画效果

将具体实现代码如下:

/**
* 自定义Adapter
*
* @author BettyLi
*/
private class ViewPagerAdapter extends PagerAdapter {

@Override
public int getCount() {
return images.size();
}

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

@Override
public void destroyItem(ViewGroup view, int position, Object object) {
// TODO Auto-generated method stub
// super.destroyItem(container, position, object);
// view.removeView(view.getChildAt(position));
// view.removeViewAt(position);
view.removeView(images.get(position));
}

@Override
public Object instantiateItem(ViewGroup view, int position) {
// TODO Auto-generated method stub
view.addView(images.get(position));
return images.get(position);
}

}

4)onStart()方法

这个方法是界面创建完成，启动时的回调方法，我在这个方法中完成的操作是，创建线程池启动定时调度任务，调用自定义的线程任务，实现定时实现图片轮播效果。

具体实现代码如下：

@Override
protected void onStart() {
super.onStart();
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleWithFixedDelay(
new ViewPageTask(),
5,
5,
TimeUnit.SECONDS);
}

5)图片轮播任务ViewPageTask

这个类实现了Runnable接口，在run方法中实现了图片轮播的显示效果，并通过handler通知UI线程，UI线程更新界面显示，这里我们不需要传递任何数据，所以通过handler发送空消息即可。
具体实现代码如下:

private class ViewPageTask implements Runnable {
@Override
public void run() {
currentItem = (currentItem + 1) % imageIds.length;
mHandler.sendEmptyMessage(0);
}
}

6)handler

接收ViewPageTask消息完成UI更新操作

具体实现代码如下：

/**
* 接收子线程传递过来的数据
*/
private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
mViewPaper.setCurrentItem(currentItem);
}
};
7)onStop

我在这个方法中主要实现的操作就是停止线程池的执行，释放线程池资源。

具体代码如下:

@Override
public void onStop() {
super.onStop();
if(scheduledExecutorService != null){
scheduledExecutorService.shutdown();
scheduledExecutorService = null;
}
}

8)MainActivity完整代码如下：

package com.ljm.viewpager;

import android.app.Activity;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class MainActivity extends Activity {

private ViewPager mViewPaper;
private List<ImageView> images;
private List<View> dots;
private int currentItem;
//记录上一次点的位置
private int oldPosition = 0;
private ScheduledExecutorService scheduledExecutorService;
private ViewPagerAdapter adapter;

private TextView title;

//存放图片的id
private int[] imageIds = new int[]{
R.drawable.ads_one,
R.drawable.ads_two,
R.drawable.ads_three
};
//存放图片的id
private String[] imageTitle = new String[]{
"测试图片1",
"测试图片2",
"测试图片3"
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
title = (TextView)findViewById(R.id.title);
title.setText(imageTitle[0]);
mViewPaper = (ViewPager) findViewById(R.id.vp);
mViewPaper.setFocusable(true);
mViewPaper.setFocusableInTouchMode(true);
mViewPaper.requestFocus();
//显示的图片
images = new ArrayList<ImageView>();
for (int i = 0; i < imageIds.length; i++) {

ImageView imageView = new ImageView(this);
//获取本地图片
//imageView.setBackgroundResource(imageIds[i]);
//获取网络图片
//百度首页的网络图片
//https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png
Picasso.with(this).load("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png").into(imageView);
images.add(imageView);
}
//显示的小点
dots = new ArrayList<View>();
dots.add(findViewById(R.id.dot_0));
dots.add(findViewById(R.id.dot_1));
dots.add(findViewById(R.id.dot_2));
/* dots.add(getView().findViewById(R.id.dot_3));
dots.add(getView().findViewById(R.id.dot_4));*/

adapter = new ViewPagerAdapter();
mViewPaper.setAdapter(adapter);

mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override
public void onPageSelected(int position) {

title.setText(imageTitle[position]);

dots.get(position).setBackgroundResource(R.drawable.dot_focused);
dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);

oldPosition = position;
currentItem = position;
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageScrollStateChanged(int arg0) {

}
});

}

/**
* 自定义Adapter
*
* @author BettyLi
*/
private class ViewPagerAdapter extends PagerAdapter {

@Override
public int getCount() {
return images.size();
}

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

@Override
public void destroyItem(ViewGroup view, int position, Object object) {
// TODO Auto-generated method stub
// super.destroyItem(container, position, object);
// view.removeView(view.getChildAt(position));
// view.removeViewAt(position);
view.removeView(images.get(position));
}

@Override
public Object instantiateItem(ViewGroup view, int position) {
// TODO Auto-generated method stub
view.addView(images.get(position));
return images.get(position);
}

}

@Override
protected void onResume() {
super.onResume();
}

@Override
protected void onStart() {
super.onStart();
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleWithFixedDelay(
new ViewPageTask(),
5,
5,
TimeUnit.SECONDS);
}
private class ViewPageTask implements Runnable {
@Override
public void run() {
currentItem = (currentItem + 1) % imageIds.length;
mHandler.sendEmptyMessage(0);
}
}
/**
* 接收子线程传递过来的数据
*/
private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
mViewPaper.setCurrentItem(currentItem);
}
};

@Override
public void onStop() {
super.onStop();
if(scheduledExecutorService != null){
scheduledExecutorService.shutdown();
scheduledExecutorService = null;
}
}
}

布局activity_main.xml

compile 'com.squareup.picasso:picasso:2.5.2'

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="com.ljm.viewpager.MainActivity"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp" >

<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dip"
android:layout_gravity="bottom"
android:background="#33000000"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
/>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dip"
android:orientation="horizontal" >

<View
android:id="@+id/dot_0"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_focused"/>

<View
android:id="@+id/dot_1"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_normal"/>
<View
android:id="@+id/dot_2"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_normal"/>

</LinearLayout>
</LinearLayout>
</LinearLayout>

build.gradle中添加依赖

compile 'com.squareup.picasso:picasso:2.5.2'

AndroidManifest.xml文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ljm.viewpager">

<uses-permission android:name="android.permission.INTERNET"/>

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

android中ViewPager+Picasso 实现轮播本地和网络图片源码

猜你喜欢