[AndroidStudio] 使用 Fresco 顯示網路上的圖片 - KnucklesNote板

首頁(home) 上頁(↑) 下頁(↓) 末頁(end)

看板 KnucklesNote

作者 Knuckles (站長那克斯)
標題 [AndroidStudio] 使用 Fresco 顯示網路上的圖片
時間 2016-01-13 Wed. 04:55:58

Fresco 是 Facebook 推出的 Android 圖片加載函式庫

官網: http://frescolib.org/
簡中版: http://fresco-cn.org/

載入函式庫

在 Grandle 的 dependencies { 裡加上

compile 'com.facebook.fresco:fresco:0.8.1+'

使用方法

確認在 AndroidManifest.xml 中有開啟網路權限

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

頁面初始化時，在 setContentView() 之前加上

        Fresco.initialize(this);

在 xml 佈局檔中，加入命名空間，例如

<LinearLayout 

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:fresco="http://schemas.android.com/apk/res-auto">

要顯示圖片的地方，加入 SimpleDraweeView

<com.facebook.drawee.view.SimpleDraweeView

    android:id="@+id/my_image_view"

    android:layout_width="100dp"

    android:layout_height="100dp"

    fresco:placeholderImage="@drawable/my_drawable"

  />

要載入圖片時，使用

Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/fresco-logo.png");

SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);

draweeView.setImageURI(uri);

如果是依這篇 [AndroidStudio] 自訂Adapter用JSON資料建立ListView - KnucklesNote板 - Disp BBS
在 ListView 中用 Picasso 顯示圖片，要改成 Fresco 的話

依前面寫的載入函式庫，以及開啟網路權限

修改 MainActivity.java

在 onCreate() 裡的 setContentView(R.layout.activity_main); 這行之前加上

        Fresco.initialize(this);

修改 row_main.xml

在 xmlns:android="http://schemas.android.com/apk/res/android" 這行下面加上

xmlns:fresco="http://schemas.android.com/apk/res-auto"

將 <ImageView … /> 改為

    <com.facebook.drawee.view.SimpleDraweeView

        android:id="@+id/img_thumb"

        android:layout_width="100dp"

        android:layout_height="100dp"

        fresco:placeholderImage="@drawable/displogo300"

        android:layout_centerVertical="true"

        />

修改 MainAdapter.java

在 class ViewHolder { 裡，將 ImageView 改為 SimpleDraweeView

        public ImageView thumbImageView;

在 getView() 裡，將 ImageView 改為 SimpleDraweeView

            holder.thumbImageView = (SimpleDraweeView) convertView.findViewById(R.id.img_thumb);

在使用 Picasso 載入圖片的地方，將 Picasso.with(mContext).load(imageUrl).placeholder(R.drawable.displogo300).into(holder.thumbImageView);
改為

            Uri uri = Uri.parse(imageUrl);

            holder.thumbImageView.setImageURI(uri);

在沒有圖片網址，要載入資源圖片的地方，將
holder.thumbImageView.setImageResource(R.drawable.displogo300);
改為

            Uri uri = Uri.parse("res:///" + R.drawable.displogo300);

            holder.thumbImageView.setImageURI(uri);

執行看看，沒有問題的話，就可以在 Gradle 裡刪掉
compile 'com.squareup.picasso:picasso:2.4.0'

--
※ 作者: Knuckles 時間: 2016-01-13 04:55:58
※ 編輯: Knuckles 時間: 2016-01-13 05:41:41

※ 看板: KnucklesNote　文章推薦值: 0 目前人氣: 0 累積人氣: 498　

分享網址: 複製

DispBBS

回到看板(←)《KnucklesNote》

r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄同主題: =)首篇 [)上篇 ])下篇

回列表(←) 分享