picasso使用簡要說明

TriDunham 8年前發布 | 52K 次閱讀 Android開發移動開發

來自： http://blog.csdn.net//chenguang79/article/details/50621748

以前在做程序的時候，加載網絡圖片一般都使用volley來處理，雖然這個第三方插件很好用，可是它有一個問題，就是無法加載本地圖片。最近群里有一個兄弟，提到了picasso。所以也就試了一下，感覺不錯，現在把其中的一些方法記錄下來。

官方地址：http://square.github.io/picasso/

下載地址：https://github.com/square/picasso

我使用的是android studio進行開發，所以比較簡單，只要引用compile 'com.squareup.picasso:picasso:2.5.2'即可，你可以去下載地址里，找最新版本。

我們先來簡單看一下效果圖：

網有點卡，所以在第一個頁面中，沒有體現出，等待的效果，等待的圖片就是哪個圓的小笑臉。因為等圖片顯示出來，這個GIF就太大了。大家看一下意思就行了。下面我們來看一下代碼：

第一步，先在app/build.gradle文件添加插件的依賴

dependencies {
         compile fileTree(dir: 'libs', include: ['*.jar'])
         compile 'com.android.support:appcompat-v7:23.1.1'
         compile 'com.squareup.picasso:picasso:2.5.2'       //這個就是
   }

好，下面我來看一下代碼，代碼相對簡單，就兩個頁面，一個是在普通的 activity 中顯示網絡圖片，第二個是就是在listView中顯示網絡圖片。好了，不多說，我們直接看代碼。

activity_main.xml主頁面布局，沒什么特別的，就是一個按鈕，為了跳轉到ListView頁面用，另外加了幾個ImageView，每個都是一個不同的picasso的使用

<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=".MainActivity"
    android:orientation="vertical">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <Button
                android:id="@+id/btn_listView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="ListView顯示圖片"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="下圖是根據ImageView大小，顯示圖片"/>
            <ImageView
                android:id="@+id/img_one"
                android:layout_width="150dp"
                android:layout_height="200dp" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="下圖是通過程序代碼，來顯示圖片大小"/>
            <ImageView
                android:id="@+id/img_two"
                android:layout_width="150dp"
                android:layout_height="100dp" />
            <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="加載本地的圖片"/>
            <ImageView
                android:id="@+id/img_three"
                android:layout_width="50dp"
                android:layout_height="50dp" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="截取圖片"/>
            <ImageView
                android:id="@+id/img_four"
                android:layout_width="150dp"
                android:layout_height="150dp" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

MainActivity.java主頁程序，不多說了，里面的注解感覺寫得還是比較細的。大家看一下吧

package com.example.cg.picassolearn;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import com.example.cg.picassolearn.untils.CropSquareTransformation;
import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView img_one;
    private ImageView img_two;
    private ImageView img_three;
    private ImageView img_four;

    private Button btn_listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initControls();

        initData();
    }

    /**
     * 初始化控件
     */
    private void initControls() {

        img_one = (ImageView)this.findViewById(R.id.img_one);
        img_two = (ImageView)this.findViewById(R.id.img_two);
        img_three = (ImageView)this.findViewById(R.id.img_three);
        img_four = (ImageView)this.findViewById(R.id.img_four);
        btn_listView = (Button)findViewById(R.id.btn_listView);
        btn_listView.setOnClickListener(this);
    }

    /**
     * 加載數據
     */
    private void initData()
    {
        /**
         * 根據ImageView大小，顯示圖片
         * .fit()                                  說明：控件不能設置成wrap_content,也就是必須有大小才行,fit()才讓圖片的寬高等于控件的寬高，設置fit()，不能再調用resize()
         * .placeholder(R.drawable.topic_tom)      說明：當圖片沒有加載上的時候，顯示的圖片
         * .error(R.drawable.topic_sky)            說明：當圖片加載錯誤的時候，顯示圖片
         * .into(img_one)                          說明：將圖片加載到哪個控件中
         */
        Picasso.with(this).load("http://g.hiphotos.baidu.com/image/pic/item/c9fcc3cec3fdfc03e426845ed03f8794a5c226fd.jpg")
                .fit()
                .placeholder(R.drawable.topic_tom)
                .error(R.drawable.topic_sky)
                .into(img_one);
        /**
         * 通過程序代碼，來顯示圖片大小
         *.resize(200, 150)                        說明：為圖片重新定義大小
         *.centerCrop()                            說明：圖片要填充整個控件，去兩邊留中間
         */
        Picasso.with(this).load("http://d.hiphotos.baidu.com/image/h%3D200/sign=745574b6a2ec08fa390014a769ee3d4d/cb8065380cd79123148b447daf345982b2b78054.jpg")
                .resize(200, 150)
                .centerCrop()
                .placeholder(R.drawable.topic_tom)
                .error(R.drawable.topic_sky)
                .into(img_two);

        /**
         * 加載本地數據庫,圖片的大小，取消于控件設置的大小
         */
        Picasso.with(this).load(R.drawable.topic_tom)
                .into(img_three);


        /**
         * 截取圖片
         * .transform(new CropSquareTransformation())        說明：通過程序截取圖片
         */
        Picasso.with(this).load("http://g.hiphotos.baidu.com/image/pic/item/6c224f4a20a446230761b9b79c22720e0df3d7bf.jpg")
                .transform(new CropSquareTransformation())
                .placeholder(R.drawable.topic_tom)
                .error(R.drawable.topic_sky)
                .into(img_four);
    }


    @Override
    public void onClick(View v) {
        switch (v.getId())
        {
            case R.id.btn_listView:
                ListViewActivity.ListViewStar(this);
                break;
        }
    }
}

這里在，在截取圖片的地方，需要自己編寫代碼，當然了，你只要實現picasso中的transform就行，我們來看一下代碼：

CropSquareTransformation.java

package com.example.cg.picassolearn.untils;

import android.graphics.Bitmap;

import com.squareup.picasso.Transformation;

/**
 * picasso的Transformation方法，對圖片進行截取
 * Created by cg on 2016/2/1.
 */
public class CropSquareTransformation implements Transformation {

    //截取從寬度和高度最小作為bitmap的寬度和高度
    @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();//釋放bitmap
        }
        return result;
    }

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

看到上面的用法，是不是感覺picasso很好用，而且使用也很簡單，就是一行代碼，就搞定了。無論是本地圖片還是網絡圖片，當然了，在這里，你不用擔心什么OOM，二級緩存等問題，因為它本身都已經解決了這些問題。

在程序中最常用到圖片顯示可能就是ListView中的應用了，下面我們來看一下，它在listView中的使用。也是相應簡單，同樣的一行代碼。

首先，我們要先建立一個bean，里面放一個圖片地址，標題，內容。為了給listVIew加值

News.java

package com.example.cg.picassolearn.bean;

/**
 * Created by cg on 2016/2/1.
 */
public class News {

    private String title;
    private String contents;
    private String PicUrl;

    public News() {
    }

    public News(String title, String contents, String picUrl) {
        this.title = title;
        this.contents = contents;
        PicUrl = picUrl;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContents() {
        return contents;
    }

    public void setContents(String contents) {
        this.contents = contents;
    }

    public String getPicUrl() {
        return PicUrl;
    }

    public void setPicUrl(String picUrl) {
        PicUrl = picUrl;
    }
}

下面我為ListView的Item添加布局

lv_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="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:layout_weight="1"
        android:gravity="center">
        <ImageView
            android:id="@+id/item_pic"
            android:layout_width="100dp"
            android:layout_height="100dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:layout_weight="3"
        android:orientation="vertical">
        <TextView
            android:id="@+id/txt_title"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <TextView
            android:id="@+id/txt_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"/>
    </LinearLayout>

</LinearLayout>

為ListView編寫一個Adapter，這些都是最基礎的代碼，我就不多說了

lv_Adapter.java

package com.example.cg.picassolearn;

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

import com.example.cg.picassolearn.bean.News;
import com.squareup.picasso.Picasso;

import java.util.List;

/**
 * ListView的Adapter
 * Created by cg on 2016/2/1.
 */
public class lv_Adapter extends BaseAdapter{

    private List<News> list_new;
    private LayoutInflater inflater;
    private Context context;

    public lv_Adapter(List<News> list_new, Context context) {
        this.list_new = list_new;
        this.context = context;
        this.inflater = LayoutInflater.from(context);
    }

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

    @Override
    public Object getItem(int position) {
        return list_new.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ItemNews in;
        if(convertView==null)
        {
            in = new ItemNews();

            convertView = inflater.inflate(R.layout.lv_item,null);
            in.title = (TextView)convertView.findViewById(R.id.txt_title);
            in.contents = (TextView)convertView.findViewById(R.id.txt_content);
            in.pic = (ImageView)convertView.findViewById(R.id.item_pic);

            convertView.setTag(in);
        }else
        {
            in = (ItemNews)convertView.getTag();
        }

        in.contents.setText(list_new.get(position).getContents());
        in.title.setText(list_new.get(position).getTitle());

        //注意這里，一行代碼，就把圖片加載上去了，而且你上下滾動listView你會發現什么，這個大家自己去體會
        Picasso.with(context).load(list_new.get(position).getPicUrl()).fit()
                .placeholder(R.drawable.topic_tom)
                .error(R.drawable.topic_sky)
                .into(in.pic);

        return convertView;
    }


    class ItemNews
    {
        TextView title;
        ImageView pic;
        TextView contents;
    }
}

好，ListView頁面代碼：

ListViewActivity.java

package com.example.cg.picassolearn;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;

import com.example.cg.picassolearn.bean.News;

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

public class ListViewActivity extends AppCompatActivity {

    private ListView lv_main;
    private List<News> list_new;
    private lv_Adapter lAdapter;

    public static void ListViewStar(Context context)
    {
        Intent intent = new Intent(context,ListViewActivity.class);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_view);

        initControls();

        initData();
    }

    /**
     * 初始化控件
     */
    private void initControls() {
        lv_main = (ListView)findViewById(R.id.lv_main);
        list_new = new ArrayList<>();
        lAdapter = new lv_Adapter(list_new,this);
        lv_main.setAdapter(lAdapter);
    }

    /**
     * 初始化數據
     */
    private void initData()
    {
        News news = new News();
        news.setTitle("清純的美女");
        news.setContents("我不說什么，大家自己看");
        news.setPicUrl("http://g.hiphotos.baidu.com/image/pic/item/6c224f4a20a446230761b9b79c22720e0df3d7bf.jpg");
        list_new.add(news);

        News news2 = new News();
        news2.setTitle("好看的美女");
        news2.setContents("我不說什么，大家自己看");
        news2.setPicUrl("http://f.hiphotos.baidu.com/image/pic/item/11385343fbf2b211eee0554ac88065380dd78eec.jpg");
        list_new.add(news2);

        News news1 = new News();
        news1.setTitle("狂野的美女");
        news1.setContents("我不說什么，大家自己看");
        news1.setPicUrl("http://a.hiphotos.baidu.com/image/h%3D200/sign=623f372f0b24ab18ff16e63705fbe69a/267f9e2f070828382f690e1dba99a9014c08f157.jpg");
        list_new.add(news1);

        News news4 = new News();
        news4.setTitle("小護士");
        news4.setContents("我不說什么，大家自己看");
        news4.setPicUrl("http://f.hiphotos.baidu.com/image/pic/item/738b4710b912c8fc6684dceaf9039245d68821a5.jpg");
        list_new.add(news4);

        News news5 = new News();
        news5.setTitle("古典的美女");
        news5.setContents("我不說什么，大家自己看");
        news5.setPicUrl("http://c.hiphotos.baidu.com/image/pic/item/342ac65c10385343498219169613b07eca8088bc.jpg");
        list_new.add(news5);

        News news6 = new News();
        news6.setTitle("清純的美女");
        news6.setContents("我不說什么，大家自己看");
        news6.setPicUrl("http://c.hiphotos.baidu.com/image/pic/item/a044ad345982b2b7a2f0f7cd33adcbef76099b48.jpg");
        list_new.add(news6);

        News news7 = new News();
        news7.setTitle("清純的美女");
        news7.setContents("我不說什么，大家自己看");
        news7.setPicUrl("http://e.hiphotos.baidu.com/image/pic/item/8b13632762d0f7031db73fdc0afa513d2697c5ad.jpg");
        list_new.add(news7);

        News news8 = new News();
        news8.setTitle("清純的美女");
        news8.setContents("我不說什么，大家自己看");
        news8.setPicUrl("http://b.hiphotos.baidu.com/image/pic/item/9825bc315c6034a857770337ce134954082376ea.jpg");
        list_new.add(news8);
        lAdapter.notifyDataSetChanged();
    }


}

哦，對了，還有它的布局。

activity_list_view.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"
    tools:context="com.example.cg.picassolearn.ListViewActivity">

    <ListView
        android:id="@+id/lv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>

</RelativeLayout>

本文由用戶 TriDunham 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455270373667.html

Android開發移動開發

picasso使用簡要說明

相關經驗

相關資訊

相關文檔

目錄