您當前位置：首頁 > php開源 > 綜合技術 > 關于圖片加載非常爽的一個三方控件 fresco

關于圖片加載非常爽的一個三方控件 fresco

來源：程序員人生發布時間：2015-04-28 08:35:02 閱讀次數：7928次

Hi EveryBody 今天來玩1個非常爽的控件 fresco 到底有多爽呢

接著看就知道了

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

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

這個網站是個英文站點對英文不太精通的童鞋也沒關系啦由于這就是1個圖片加載庫我們說傳統的加載庫

從自己寫1個BitMap類的工具到軟援用到ImageLoader這些不過是解決1個oom問題但是有個問題

它們都不能去動態的加載或說加載1些gif 或說給圖片描邊通常做法1般都是寫1個自定義的roundImage

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

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

加載出來的而需要1點點的按部就班這個在過去的插件上很少有做到的而fresco就能夠真實的實現了邊加邊看的需求

滿足了大多數逼迫癥（像我這類）人的需求。

來玩1下fresco 我們去看官方向導

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

1 注冊你的清單文件加1個訪問網絡的權限

http://frescolib.org/docs/index.html 這個沒甚么好說的加1個就好了

2 由于fresco需要1個初始化進程所以就需要調用初始化方法

Fresco.initialize(context);

固然如果你是直接在actvity里面寫成

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

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

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

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

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

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

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

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

3 弄定好了以后加1個布局文件和1個自定義的view就能夠用了

看下代碼

這里為了方便演示加了3個這樣的SimpleDraweeView

然后就是1個namespace 這樣就能夠用1些fresco給你的1些屬性

比如這個

fresco:roundWithOverlayColor="#333333"

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

1切弄定看下代碼吧

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(); } /** * 設置自動播放圖片 3張 */ 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我們用1張靜態圖首先找到這個控件然后用Uri這個類去封裝1個相應的鏈接

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

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

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

看下效果圖