【声明】
欢迎转载，但请保留文章原始出处→_→
生命壹号：http://www.cnblogs.com/smyhvae/
文章来源：http://www.cnblogs.com/smyhvae/p/4488049.html
联系方式：smyhvae@163.com
效果图：（gif图太大了，有点卡，建议将图片保存到本地查看或者直接本文末尾的源码查看gif图）
加载网络图片我们用universal-image-loader，然后实现ListView的上拉下拉刷新我们用PullToRefresh。下面开始写代码。
整个代码的工程文件结构如下：
- libs文件夹下是需要用到的一些库和开源框架（这里有个picasso框架，是用来加载网络图片的，暂时不用哈，留着以后备用，现在这个项目用的是universal-image-loader）。
- adapter文件夹下是listView的自定义适配器（本文的重点）
- entities是从网络获取到json数据，解析之后，用来存放这些数据的实体
- utils文件夹下是url的常量
- MainActivity.java是主程序的入口
- MyApplication才是真正的app的第一个入口，这个不多解释，都懂得。
一、开始写代码：
（1）activity_main.xml（MainActvity的布局）
<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"> <com.handmark.pulltorefresh.library.PullToRefreshListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent"> </com.handmark.pulltorefresh.library.PullToRefreshListView>
</RelativeLayout>
这里就放了个PullToRefreshListView，其实本质上还是个ListView
（2）item_listview.xml（ListView中单个item的布局）
<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"
android:orientation="vertical"
> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingTop="28dp"> <!--作者头像-->
<ImageButton
android:id="@+id/mVideoAvatarBtn"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="@mipmap/defaultimg"/> <!--昵称-->
<TextView
android:id="@+id/mVideoNicknameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="13dp"
android:layout_toRightOf="@+id/mVideoAvatarIv"
android:singleLine="true"
android:text="张三"
android:textSize="16sp"/> </LinearLayout> <!--视频缩略图-->
<ImageButton
android:id="@+id/mVideoImgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /> </LinearLayout>
单个item中，一个是头像，一个是文本，一个是图片（包裹内容），其布局效果如下：
（3）MyApplication.java:
package com.smyhvae.pulltorefreshdemo; import android.app.Application; import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration; /**
* Created by smyhvae on 2015/5/8.
*/
public class MyApplication extends Application { @Override
public void onCreate() {
super.onCreate(); //创建默认的ImageLoader配置参数
ImageLoaderConfiguration configuration = new ImageLoaderConfiguration.Builder(this)
.writeDebugLogs() //打印log信息
.build(); //Initialize ImageLoader with configuration.
ImageLoader.getInstance().init(configuration);
} }
主程序一进来，我们就在onCreate()中创建ImageLoader的配置参数，并初始化到ImageLoader中。
（4）JavaBean的实体：
这个其实就是下面的这些实体：
这个不需要赘述，代码略，在本文最后有源码下载链接。
（5）ViewHolder.java:(ListView的万能模板，嘿嘿)
package com.smyhvae.pulltorefreshdemo.adapter; import android.content.Context;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; /**
* Created by smyhvae on 2015/5/4.
* 通用的viewHolder类
*/
public class ViewHolder { private SparseArray<View> mViews;
private int mPosition;
private View mConvertView; public ViewHolder(Context context, ViewGroup parent, int layoutId, int position) {
this.mPosition = position;
this.mViews = new SparseArray<View>(); mConvertView = LayoutInflater.from(context).inflate(layoutId, parent, false); mConvertView.setTag(this); } public static ViewHolder get(Context context, View convertView, ViewGroup parent, int layoutId, int position) {
if (convertView == null) {
return new ViewHolder(context, parent, layoutId, position);
} else {
ViewHolder holder = (ViewHolder) convertView.getTag();
holder.mPosition = position; //即时ViewHolder是复用的，但是position记得更新一下
return holder;
}
} /*
通过viewId获取控件
*/
//使用的是泛型T,返回的是View的子类
public <T extends View> T getView(int viewId) {
View view = mViews.get(viewId); if (view == null) {
view = mConvertView.findViewById(viewId);
mViews.put(viewId, view);
} return (T) view;
} public View getConvertView() {
return mConvertView;
} }
（6）ListViewAdapter.java:（同样是ListView的万能模板）
package com.smyhvae.pulltorefreshdemo.adapter; import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter; import java.util.List; /**
* Created by smyhvae on 2015/5/4.
* 通用的ListView的BaseAdapter，所有的ListView的自定义adapter都可以继承这个类哦
*/
public abstract class ListViewAdapter<T> extends BaseAdapter { //为了让子类访问，于是将属性设置为protected
protected Context mContext;
protected List<T> mDatas;
protected LayoutInflater mInflater;
private int layoutId; //不同的ListView的item布局肯能不同，所以要把布局单独提取出来 public ListViewAdapter(Context context, List<T> datas, int layoutId) {
this.mContext = context;
mInflater = LayoutInflater.from(context);
this.mDatas = datas;
this.layoutId = layoutId;
} @Override
public int getCount() {
return mDatas.size();
} @Override
public T getItem(int position) {
return mDatas.get(position);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
//初始化ViewHolder,使用通用的ViewHolder，一样代码就搞定ViewHolder的初始化咯
ViewHolder holder = ViewHolder.get(mContext, convertView, parent, layoutId, position);//layoutId就是单个item的布局 convert(holder, getItem(position));
return holder.getConvertView(); //这一行的代码要注意了
} //将convert方法公布出去
public abstract void convert(ViewHolder holder, T t); }
（7）【非常非常重要】VideoListViewAdapter.java:
这个才是我们的这个ListView的自定义适配器哦：
package com.smyhvae.pulltorefreshdemo.adapter; import android.content.Context;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView; import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.smyhvae.pulltorefreshdemo.R;
import com.smyhvae.pulltorefreshdemo.entities.Video;
import com.smyhvae.pulltorefreshdemo.utils.Constants; import java.util.List; /**
* Created by smyhvae on 2015/5/5.
*/ public class VideoListViewAdapter extends ListViewAdapter<Video> { DisplayImageOptions options; // DisplayImageOptions是用于设置图片显示的类 //MyAdapter需要一个Context，通过Context获得Layout.inflater，然后通过inflater加载item的布局
public VideoListViewAdapter(Context context, List<Video> datas) {
super(context, datas, R.layout.item_listview);
} /* @Override
public void convert(ViewHolder holder, Bean bean) { ((TextView) holder.getView(R.id.titleTv)).setText(bean.getTitle());
((TextView) holder.getView(R.id.descTv)).setText(bean.getDesc());
((TextView) holder.getView(R.id.timeTv)).setText(bean.getTime());
((TextView) holder.getView(R.id.phoneTv)).setText(bean.getPhone()); *//*
TextView tv = holder.getView(R.id.titleTv);
tv.setText(...); ImageView view = getView(viewId);
Imageloader.getInstance().loadImag(view.url);
/*//*
}*/ @Override
public void convert(ViewHolder holder, final Video video) { //1、作者的头像
ImageButton mVideoAvatarBtn = holder.getView(R.id.mVideoAvatarBtn);
//如果用的是开源框架Picasso获取网络图片，那就按照下面注释掉这一行代码来做。
// load方法里的参数是请求的图片的url。placeholder方法中的参数是说，加载图片成功之前默认显示的图片
//Picasso.with(mContext).load(Constants.CONTENT_HOST + video.getUserAvatarUrl()).placeholder(R.mipmap.ic_launcher).into(mVideoAvatarBtn);
String imageUrl = Constants.CONTENT_HOST + video.getUserAvatarUrl(); /*
下面的加载网络图片中，用到了Android-Universal-Image-Loader框架
*/
//显示图片的配置
// 使用DisplayImageOptions.Builder()创建DisplayImageOptions
options = new DisplayImageOptions.Builder()
.showStubImage(R.mipmap.phone) // 设置图片下载期间显示的图片
.showImageForEmptyUri(R.mipmap.ic_launcher) // 设置图片Uri为空或是错误的时候显示的图片
.showImageOnFail(R.drawable.default_ptr_flip) // 设置图片加载或解码过程中发生错误显示的图片
.cacheInMemory(true) // 设置下载的图片是否缓存在内存中
.cacheOnDisc(true) // 设置下载的图片是否缓存在SD卡中
.imageScaleType(ImageScaleType.EXACTLY_STRETCHED) //图片会缩放到目标大小完全。非常重要，也就是说，这个view有多大，图片就会缩放到多大
.build(); ImageLoader.getInstance().displayImage(imageUrl, mVideoAvatarBtn, options); //2、作者的昵称
TextView mVideoNicknameTv = holder.getView(R.id.mVideoNicknameTv);
mVideoNicknameTv.setText(video.getUserNickName()); //3、视频的缩略图
ImageButton mVideoImgBtn = holder.getView(R.id.mVideoImgBtn); //让缩略图的宽度为手机屏幕的宽度，高度为手机屏幕宽度的一半。说白了，就是让 图片的尺寸为2:1
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
(int) (Constants.displayWidth * 0.5f + 0.5f));
mVideoImgBtn.setLayoutParams(params); String PicUrl = Constants.CONTENT_HOST + video.getPicUrl(); //Picasso.with(mContext).load(Constants.CONTENT_HOST + video.getPicUrl()).placeholder(R.mipmap.defaultimg).into(mVideoImgBtn);
ImageLoader.getInstance().displayImage(PicUrl, mVideoImgBtn, options); System.out.println("---->" + video.getPicUrl()); //跳转到具体是哪一个视频（即item的详情页）
/* mVideoImgBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int id = video.getVideoUrl();
mContext.startActivity(new Intent());
}
});*/
}
}
尤其要注意第75行的属性哦，这样可以让图片缩放到当前控件的大小。（如果没有这一行，图片大小就是包裹内容；如果加了这一行，图片大小就是匹配当前控件的大小，因为我在第88行设置了这个ImageButton的宽度是手机屏幕的宽度，高度是手机屏幕宽度的一半，这样的话，不管网络上的 图片是多大，都能够保证显示出来的图片比例是2:1）
（8）MainActivity.java:
package com.smyhvae.pulltorefreshdemo; import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ListView;
import android.widget.Toast; import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshListView;
import com.lidroid.xutils.HttpUtils;
import com.lidroid.xutils.exception.HttpException;
import com.lidroid.xutils.http.RequestParams;
import com.lidroid.xutils.http.ResponseInfo;
import com.lidroid.xutils.http.callback.RequestCallBack;
import com.lidroid.xutils.http.client.HttpRequest;
import com.smyhvae.pulltorefreshdemo.adapter.VideoListViewAdapter;
import com.smyhvae.pulltorefreshdemo.entities.ResponseObject;
import com.smyhvae.pulltorefreshdemo.entities.Video;
import com.smyhvae.pulltorefreshdemo.entities.VideoResponse;
import com.smyhvae.pulltorefreshdemo.utils.Constants; import java.util.List; public class MainActivity extends Activity { private PullToRefreshListView lv;
private Context mContext; private List<Video> videoList; //用来存放视频列表的集合 private int page = 0; //当前页码
private int size = 10; //每页显示10个
private int count = 0; //当前页面有多少个视频 private VideoListViewAdapter videoListViewAdapter; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//第一个Activity加载进来时，我们就获取屏幕的宽度和高度
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
Constants.displayWidth = displayMetrics.widthPixels;
Constants.displayHeight = displayMetrics.heightPixels; initView(); } private void initView() {
lv = (PullToRefreshListView) findViewById(R.id.lv); /*
设置刷新的模式：
可选值为：disabled（禁用下拉刷新），
pullFromStart（仅支持下拉刷新），
pullFromEnd（仅支持上拉刷新），
both（二者都支持），
manualOnly（只允许手动触发）
*/
lv.setMode(PullToRefreshBase.Mode.BOTH); //让这个Listview支持上拉加载更多，下拉刷新
lv.setScrollingWhileRefreshingEnabled(true);//滚动的时候不允许刷新，要不然么会很乱
//很重要，刷新时做回调
lv.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener<ListView>() {
@Override
public void onRefresh(PullToRefreshBase<ListView> refreshView) {
//在这里做数据加载的操作
loadData(refreshView.getScrollY() < 0);
}
}); //首次打开页面时，延时200ms后自动加载数据
new Handler (new Handler.Callback(){
@Override
public boolean handleMessage(Message msg) {
lv.setRefreshing();
return true;
}
}).sendEmptyMessageDelayed(0,200);
} //如果是true表示下拉刷新，false表示上拉加载更多（如果y值小于0，说明是下拉操作）
private void loadData(final boolean direction) {
//http://172.24.1.49:8081/video/getVideos?apikey= &typeid=1&page=1
RequestParams params = new RequestParams(); if (direction) { //如果是上拉，那应该将page变为第一页
page = 1; } else {
page++; //如果是下拉，就让page加1 } params.addQueryStringParameter("page", String.valueOf(page)); //默认显示第一页
// params.addQueryStringParameter("size", "10"); //每页显示10个 new HttpUtils().send(HttpRequest.HttpMethod.GET, Constants.VIDEO_LIST + "typeid=1&", params, new RequestCallBack<String>() {
@Override
public void onSuccess(ResponseInfo<String> responseInfo) {
lv.onRefreshComplete();
Log.d("json", "---video的json数据>" + responseInfo.result); //解析服务器端的json数据
Gson gson = new GsonBuilder().create();
ResponseObject<VideoResponse> object = gson.fromJson(responseInfo.result, new TypeToken<ResponseObject<VideoResponse>>() {
}.getType());
/* ResponseObject<VideoResponse> object = new GsonBuilder().create().fromJson(responseInfo.result, new TypeToken<VideoResponse>() {
}.getType());*/
page = Integer.parseInt(object.getResult().getPage()); //获取服务器端返回来的当前页码
count = object.getResult().getCnt(); //获取当前页面有多少个视频
Log.d("json","---当前页面的item的个数>"+count);
if (direction) { //下拉刷新
videoList = object.getResult().getVideos(); //获取视频信息的集合，并存放 videoListViewAdapter = new VideoListViewAdapter(MainActivity.this,videoList);
lv.setAdapter(videoListViewAdapter); //为这个listView绑定适配器 } else {//尾部加载更多
videoList.addAll(object.getResult().getVideos()); } if (count == 0) { //如果当前页面已经没有视频了，那就告诉客户端，不要再拉了,因为后面没有数据了。
lv.setMode(PullToRefreshBase.Mode.PULL_FROM_START);
} } @Override
public void onFailure(HttpException e, String s) {
lv.onRefreshComplete();//不管是请求成功还是请求失败，我们都停止加载数据
Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show(); }
}); } }
这个MainActivity中讲到了xUtils怎样获取到网络上的json数据，并用Gson解析，然后用pull to refresh处理上拉下拉刷新的逻辑，好吧，确实是快速开发，用到的框架还挺多的好伐~
【工程文件】