Picasso学习:Picasso的使用

前两天将Volley的源代码分析完毕,这两天再继续看看Picasso的源代码,按照习惯,还是先看看怎么使用,然后再从源代码分析其逻辑实现。

其实Picasso的使用起来和Volley相比,要简单的很多,只要一行就可以使用:

Picasso.with(mContext).load(mImagePaths.get(position)).into(viewContainer.image);

很多情况下,我们都是在List或者GridView当中使用的缓存库,那这个时候又该怎么样来使用呢?来写一写

首先是界面布局 activity_main.xml:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="me.happyhls.picassostudy.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:id="@+id/top"
        android:text="Picasso Study" />
	<ListView 
	    android:layout_below="@id/top"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:id="@android:id/list"
	    ></ListView>
    
</RelativeLayout>

界面中子元素的布局 list_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <ImageView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/imageview"/>
</LinearLayout>

再然后我们就写一个Adapter:

package me.happyhls.picassostudy;

import java.util.ArrayList;
import java.util.List;

import com.squareup.picasso.Picasso;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class ImageListAdapter extends BaseAdapter{

  private List<String> mImagePaths = new ArrayList<>();
  private Context mContext = null;
  private LayoutInflater mLayoutInflater = null;
  
  public ImageListAdapter(Context context, List<String> imagePaths) {
    mContext = context;
    mLayoutInflater = LayoutInflater.from(mContext);
    mImagePaths.addAll(imagePaths);
  }
  
  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return mImagePaths.size();
  }

  @Override
  public Object getItem(int position) {
    // TODO Auto-generated method stub
    return mImagePaths.get(position);
  }

  @Override
  public long getItemId(int position) {
    // TODO Auto-generated method stub
    return position;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    ViewContainer viewContainer;
    if(convertView == null) {
      convertView = mLayoutInflater.inflate(R.layout.list_item, null);
      viewContainer = new ViewContainer();
      viewContainer.image = (ImageView)convertView.findViewById(R.id.imageview);
      convertView.setTag(viewContainer);
    }else {
      viewContainer = (ViewContainer)convertView.getTag();
    }
    Picasso.with(mContext).load(mImagePaths.get(position)).into(viewContainer.image);
    return convertView;
  }
  
  private class ViewContainer {
    ImageView image;
  }

  
}

最后我们在Activity中,将这些配置起来:

package me.happyhls.picassostudy;

import java.util.ArrayList;
import java.util.List;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ListActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    List<String> imagePaths = new ArrayList<>();
    imagePaths.add("http://img0.bdstatic.com/img/image/daren/taipingyangqiche.jpg");
    imagePaths.add("http://img.baidu.com/img/image/0ebe7571756465617070f813.jpg");
    imagePaths.add("http://img0.bdstatic.com/img/image/ddwefrew.jpg");
    imagePaths.add("http://img.baidu.com/img/image/fb31e5ada4e9ad825f4b656c6576656e32348927.jpg");
    imagePaths.add("http://img.baidu.com/img/image/0ebe7571756465617070f813.jpg");
    imagePaths.add("http://img0.bdstatic.com/img/image/daren/pocotuiguang.jpg");
    imagePaths.add("http://img0.bdstatic.com/img/image/daren/tuchong.jpg");
    ImageListAdapter adapter = new ImageListAdapter(MainActivity.this, imagePaths);
    getListView().setAdapter(adapter);
    
  }
}

当然,最后不要忘记添加网络访问的权限:

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

好了,那我们来看看运行结果吧:

device-2014-11-22-121448

 

发现了吧,其中和Picasso相关的代码只有一个

    Picasso.with(mContext).load(mImagePaths.get(position)).into(viewContainer.image);

当然,其实Picasso的功能不仅仅限于这个,还有很多其他的功能,参考:

http://square.github.io/picasso/

 

比如:

图片的简单变换:

Picasso.with(context)
  .load(url)
  .resize(50, 50)
  .centerCrop()
  .into(imageView)

当然我们可以自己指定自己定义的图片转换器:

public class CropSquareTransformation implements Transformation {
  @Override public Bitmap transform(Bitmap source) {
    int size = Math.min(source.getWidth(), source.getHeight());
    int x = (source.getWidth() - size) / 2;
    int y = (source.getHeight() - size) / 2;
    Bitmap result = Bitmap.createBitmap(source, x, y, size, size);
    if (result != source) {
      source.recycle();
    }
    return result;
  }

  @Override public String key() { return "square()"; }
}

设置默认的图片,以及访问失败的图片:

Picasso.with(context)
    .load(url)
    .placeholder(R.drawable.user_placeholder)
    .error(R.drawable.user_placeholder_error)
    .into(imageView);

加载资源图片:

Picasso.with(context).load(R.drawable.landing_screen).into(imageView1);
Picasso.with(context).load(new File(...)).into(imageView2);

DEBUG接口:

setIndicatorsEnabled(true)

好了,简单熟悉了Picasso的使用,下面我们就开始分析它的源代码。

About: happyhls


发表评论

电子邮件地址不会被公开。 必填项已用*标注