關於圖片載入非常爽的一個三方控制項 fresco，一個三fresco

關於圖片載入非常爽的一個三方控制項 fresco，一個三fresco

   Hi  EveryBody 今天來玩一個非常爽的控制項 fresco 到底有多爽呢 

接著看就知道了 

   首先 來看看fresco 是個神馬東西 

https://github.com/facebook/fresco 這個是fresco的一個官方gifhub 官網為http://frescolib.org/

這個網站是個英文網站 對英文不太精通的童鞋也沒關係啦 因為這就是一個圖片載入庫 我們說傳統的載入庫

從自己寫一個BitMap類的工具 到軟引用 到ImageLoader這些無非是解決一個oom問題 但是有個問題 

它們都不能去動態載入 或者說載入一些gif 或者說 給圖片描邊 通常做法一般都是寫一個自訂的roundImage

然後再去XXX 或者利用類似GifImageView 或者RounndeImageView這樣的庫 庫加庫畢竟你的工程會越來越臃腫

但是fresco解決了我們以前的這些煩惱 還有一點就是我們在進行網路載入 特別是以前網速很慢的時候發現圖片都不是一下就

載入出來的 而需要一點點的循序漸進 這個在過去的外掛程式上很少有做到的 而fresco就可以 真正的實現了邊加邊看的需求 

滿足了大多數強迫症（像我這種）人的需求。

     來玩一下fresco 我們去看官方嚮導 

http://frescolib.org/docs/index.html

1 註冊你的資訊清單檔 加一個訪問網路的許可權 

http://frescolib.org/docs/index.html 這個沒什麼好說的 加一個就行了

2 因為fresco需要一個初始化過程 所以就需要調用初始化方法

 Fresco.initialize(context);

當然 如果你是直接在actvity裡面 寫成

 Fresco.initialize(this); 也無可厚非

這個時候 有人可能會問 我的工程裡面並沒有fresco這個類 

這個官方的github上為我們提供了匯入的 方法 

由於我用的是studio 所以鑒於gradle工程來說這個就很簡單了 

只需要在build.gradle上面加一行代碼

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

這樣就可以了 你可以看到 這個庫還在一個很新的版本上 所以未來這東西的前途不可限量

這裡需要使用代理 不然你的工程可能無法下載這個庫

3 搞定好了之後 加一個布局檔案 和一個自訂的view就可以用了 

看下代碼

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"    xmlns:fresco="http://schemas.android.com/apk/res-auto"    android:layout_height="match_parent"    tools:context=".MainActivity">    <TextView        android:layout_centerHorizontal="true"        android:id="@+id/title"        android:text="fresco pic" android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="20sp"        android:textColor="#000000"        />    <LinearLayout        android:layout_below="@id/title"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:gravity="center_horizontal"        android:background="#649FEF"        >    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/frsco_img1"        android:layout_width="200dp"        android:layout_height="0dp"        android:layout_weight="1"        fresco:roundedCornerRadius="5dp"        fresco:roundBottomLeft="false"        fresco:roundBottomRight="false"        fresco:roundWithOverlayColor="#333333"        fresco:roundingBorderWidth="1dp"        fresco:roundingBorderColor="#222222"        />    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/frsco_img2"        android:layout_width="200dp"        android:layout_height="0dp"        android:layout_weight="1"        fresco:roundedCornerRadius="5dp"        fresco:roundBottomLeft="false"        fresco:roundBottomRight="false"        fresco:roundWithOverlayColor="#333333"        fresco:roundingBorderWidth="10dp"        fresco:roundingBorderColor="#33CC5B"        android:layout_centerHorizontal="true"        />    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/frsco_img3"        android:layout_width="200dp"        android:layout_height="0dp"        android:layout_weight="1"        fresco:roundedCornerRadius="5dp"        fresco:roundBottomLeft="false"        fresco:roundBottomRight="false"        fresco:roundWithOverlayColor="#F0E511"        fresco:roundingBorderWidth="5dp"        fresco:roundingBorderColor="#FC6853"        android:layout_centerHorizontal="true"        />    </LinearLayout></RelativeLayout>

這裡為了方便示範 加了三個這樣的SimpleDraweeView 

然後就是一個namespace 這樣就可以用一些fresco給你的一些屬性 

比如這個

fresco:roundWithOverlayColor="#333333"

設定你覆蓋物的顏色 其他還有很多 這個有興趣的可以自己試試

一切搞定 看下代碼吧

public class MainActivity extends Activity implements View.OnTouchListener {    private SimpleDraweeView mSimpleDraweeView;    private SimpleDraweeView mSimpleDraweeView2;    private SimpleDraweeView mSimpleDraweeView3;    private String imageUri1 = "http://img.ptcms.csdn.net/article/201503/30/5519091be9a85_middle.jpg?_=30474";    private String imageUri2 = "http://ww1.sinaimg.cn/mw600/6345d84ejw1dvxp9dioykg.gif";    private String imageUri3 = "http://p5.qhimg.com/t01d0e0384b952ed7e8.gif";    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        Fresco.initialize(this);        setContentView(R.layout.activity_main);        setImage();    }    /**     * 設定自動播放圖片 三張     */    private void setImage() {        Uri uri = Uri.parse(imageUri1);        Uri uri2 = Uri.parse(imageUri2);        Uri uri3 = Uri.parse(imageUri3);        mSimpleDraweeView = (SimpleDraweeView) findViewById(R.id.frsco_img1);        DraweeController  draweeController1 = Fresco.newDraweeControllerBuilder().setUri(uri).setAutoPlayAnimations(true).build();        mSimpleDraweeView.setController(draweeController1);        mSimpleDraweeView.setOnTouchListener(this);//      Uri uri2 = Uri.parse(imageUri2);        DraweeController  draweeController2 = Fresco.newDraweeControllerBuilder().setUri(uri2).setAutoPlayAnimations(true).build();        mSimpleDraweeView2 = (SimpleDraweeView) findViewById(R.id.frsco_img2);        mSimpleDraweeView2.setController(draweeController2);        RoundingParams mRoundParams2 =  mSimpleDraweeView2.getHierarchy().getRoundingParams();        mRoundParams2.setRoundAsCircle(true);        mSimpleDraweeView2.getHierarchy().setRoundingParams(mRoundParams2);        DraweeController  draweeController3 = Fresco.newDraweeControllerBuilder().setUri(uri3).setAutoPlayAnimations(true).build();        mSimpleDraweeView3 = (SimpleDraweeView) findViewById(R.id.frsco_img3);        mSimpleDraweeView3.setController(draweeController3);        RoundingParams mRoundParams3 =  mSimpleDraweeView3.getHierarchy().getRoundingParams();        mRoundParams3.setRoundAsCircle(true);        mSimpleDraweeView3.getHierarchy().setRoundingParams(mRoundParams3);    }    @Override    public boolean onTouch(View v, MotionEvent event) {        switch (event.getAction()){            case MotionEvent.ACTION_DOWN:                mSimpleDraweeView.setColorFilter(Color.GRAY, PorterDuff.Mode.MULTIPLY);                return true;//                break;            case MotionEvent.ACTION_UP:                mSimpleDraweeView.clearColorFilter();                return true;//                break;        }        return super.onTouchEvent(event);    }}

這裡代碼是這樣 

           1我們用一張靜態圖 首先找到這個控制項 然後用Uri這個類 去封裝一個相應的連結 

           2 DraweeController這個類的作用是可以動態去播放你的gif 或者一些動態圖 當然它裡面還有監聽 我沒有加

           3 使用圓形圖的話 需要用的Facebook給我們的 RoundParmas 這個類 

而這個類的獲得方法 上面已經寫的很清楚了 

        

看下

OK 這次就這麼多 各位下次再會啦