Fresco使用实例

Fresco实例有效果图：

Fresco Example

Fresco项目的结构：

Fresco struct

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    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="com.shen.frescotest.MainActivity" >
    
  	<ListView 
  	    android:id="@+id/listview"
  	    android:layout_width="fill_parent"
  	    android:layout_height="fill_parent"
  	    android:dividerHeight="1dip"
  	    />
    
</RelativeLayout>

listview中条目的布局代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center_vertical"
    android:padding="5dip" >
    <com.facebook.drawee.view.SimpleDraweeView
	    android:id="@+id/my_image_view"
	    android:layout_width="120dp"
	    android:layout_height="wrap_content"
	    fresco:viewAspectRatio="1"
	    fresco:fadeDuration="300"
	    fresco:actualImageScaleType="fitCenter"
	    fresco:placeholderImage="@drawable/ic_launcher"
	    fresco:failureImage="@drawable/ic_launcher"
	    fresco:roundAsCircle="true"
	    fresco:roundedCornerRadius="10dp"
	    fresco:roundTopLeft="true"
	    fresco:roundTopRight="true"
	    fresco:roundBottomLeft="true"
	    fresco:roundBottomRight="true"
	    fresco:roundingBorderWidth="1dp"
	    fresco:roundingBorderColor="#00ffff"
    	/>
    
    
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:src="@drawable/ic_launcher"
        android:visibility="gone" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="15dip"
         >
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" 
            android:textSize="20sp"
            android:layout_marginTop="5dip"/>
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" 
            android:textSize="14sp"
            android:layout_marginTop="2dip"/>
    </LinearLayout>
</LinearLayout>

SimpleDraweeView的xml属性：

1.强制性的宽高

你必须声明 android:layout_width 和 android:layout_height。如果没有在XML中声明这两个属性，将无法正确加载图像。

wrap_content
Drawees 不支持 wrap_content 属性。

所下载的图像可能和占位图尺寸不一致，如果设置出错图或者重试图的话，这些图的尺寸也可能和所下载的图尺寸不一致。

如果大小不一致，假设使用的是 wrap_content，图像下载完之后，View将会重新layout，改变大小和位置。这将会导致界面跳跃。

固定宽高比
只有希望显示固定的宽高比时，可以使用wrap_content。

2.如果希望图片以特定的宽高比例显示，例如 4:3，可以在XML中指定fresco:viewAspectRatio属性

1
2
3
4
5
6
<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="wrap_content"
    fresco:viewAspectRatio="1.33"
    <!-- other attributes -->

也可以在代码中指定显示比例：

mSimpleDraweeView.setAspectRatio(1.33f);
项目中设置的1：1也就是说宽高都是120dp

3.fresco:actualImageScaleType表求缩放类型，其值如下所示：
center 居中，无缩放。
centerCrop 保持宽高比缩小或放大，使得两边都大于或等于显示边界，且宽或高契合显示边界。居中显示。
focusCrop 同centerCrop, 但居中点不是中点，而是指定的某个点。
centerInside 缩放图片使两边都在显示边界内，居中显示。和 fitCenter 不同，不会对图片进行放大。
如果图尺寸大于显示边界，则保持长宽比缩小图片。
fitCenter 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，且宽或高契合显示边界。居中显示。
fitStart 同上。但不居中，和显示边界左上对齐。
fitEnd 同fitCenter， 但不居中，和显示边界右下对齐。
fitXY 不保存宽高比，填充满显示边界。
none 如要使用tile mode显示, 需要设置为none

4.圆角
圆角实际有2种呈现方式:

圆圈 - 设置roundAsCircle为true
圆角 - 设置roundedCornerRadius
设置圆角时，支持4个角不同的半径。XML中无法配置，但可在Java代码中配置。

设置圆角
可使用以下两种方式:

默认使用一个 shader 绘制圆角，但是仅仅占位图和所要显示的图有圆角效果。失败示意图和重下载示意图无圆角效果，且这种圆角方式不支持动画。
叠加一个solid color来绘制圆角。但是背景需要固定成指定的颜色。 在XML中指定 roundWithOverlayColor, 或者通过调用setOverlayColor来完成此设定。

5.其他
fresco:placeholderImage=”@drawable/ic_launcher” 表示点位图片
fresco:failureImage=”@drawable/ic_launcher”表示失败后显示的图片
fresco:roundingBorderWidth=”1dp” 表示图片圆的边线宽度
fresco:roundingBorderColor=”#00ffff”表示圆线的颜色

主MainActivity的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
package com.shen.frescotest;
import java.util.ArrayList;
import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;
public class MainActivity extends Activity {
	//设置图片请求的基础地址
	private static final String BASE_URL = "http://img1.3lian.com/img2011/w1/106/85/";
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		Fresco.initialize(this);
		setContentView(R.layout.activity_main);
		//创建一组数据用来填充ListView时在界面显示数据
		ArrayList<Product> dishList = new ArrayList<Product>();
		dishList.add(new Product(BASE_URL + "42.jpg", "水煮鱼片", "38.00"));
		dishList.add(new Product(BASE_URL + "34.jpg", "小炒肉", "18.00"));
		dishList.add(new Product(BASE_URL + "37.jpg", "清炒时蔬", "15.00"));
		dishList.add(new Product(BASE_URL + "11.jpg", "金牌烤鸭", "36.00"));
		dishList.add(new Product(BASE_URL + "12.jpg", "粉丝肉煲", "20.00"));
		
		
		dishList.add(new Product(BASE_URL + "42.jpg", "水煮鱼片", "38.00"));
		dishList.add(new Product(BASE_URL + "34.jpg", "小炒肉", "18.00"));
		dishList.add(new Product(BASE_URL + "37.jpg", "清炒时蔬", "15.00"));
		dishList.add(new Product(BASE_URL + "11.jpg", "金牌烤鸭", "36.00"));
		dishList.add(new Product(BASE_URL + "12.jpg", "粉丝肉煲", "20.00"));
		
		//获取ListView组件并设置数据适配器
		ListView mListView = (ListView) this.findViewById(R.id.listview);
		ProductListViewAdapter adapter = new ProductListViewAdapter(dishList);
		mListView.setAdapter(adapter);
		
		
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
	
	
	// ListView适配器
	private class ProductListViewAdapter extends BaseAdapter {
		private ArrayList<Product> dataList;
		public ProductListViewAdapter(ArrayList<Product> list) {
			this.dataList = list;
		}
		@Override
		public int getCount() {
			return dataList.size();
		}
		@Override
		public Object getItem(int position) {
			return dataList.get(position);
		}
		@Override
		public long getItemId(int position) {
			return position;
		}
			@Override
			public View getView(int position, View convertView, ViewGroup parent) {
				ListViewItemHolder item = null;
				if (convertView == null) {
					convertView = LayoutInflater.from(MainActivity.this).inflate(
							R.layout.main_listview_item, null);
					item = new ListViewItemHolder();
					item.img_iv = (SimpleDraweeView) convertView
							.findViewById(R.id.my_image_view);
					item.name_textview = (TextView) convertView
							.findViewById(R.id.textView1);
					item.price_textview = (TextView) convertView
							.findViewById(R.id.textView2);
					convertView.setTag(item);
				} else {
					item = (ListViewItemHolder) convertView.getTag();
				}
				Product product = dataList.get(position);
				Uri uri = Uri.parse(product.getImgUrl());
//				SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
//				draweeView.setImageURI(uri);
				item.img_iv.setImageURI(uri);
				
				DraweeController draweeController = Fresco.newDraweeControllerBuilder().setUri(product.getImgUrl()).build();
				
//				item.img_iv.setController(new DraweeController(){
//					
//					
//					
//				});
				
				item.name_textview.setText(product.getName());
				item.price_textview.setText(product.getPrice() + "元");
				return convertView;
			}
		}
		// ListView的Item组件类
		private class ListViewItemHolder {
			SimpleDraweeView img_iv;
			TextView name_textview;
			TextView price_textview;
		}
}

源代码

扩展阅读：

http://frescolib.org/

http://www.fresco-cn.org/

https://github.com/facebook/fresco

http://www.codeceo.com/article/android-fresco-usage.html