RecyclerView

转载来源:http://blog.csdn.net/birdsaction/article/details/45156321

RecyclerView 是5.0开始出来的新的ListView，主要是提高了性能，显示方式也多样化。

老版本中我们优化view都是通过定义一个Holder来实行的，现在的RecyclerView就封装了一个Holder

支持水平滚动和垂直滚动2种列表

还支持Grid格子布局和乱序的布局

[java]  view plain  copy

 

1. ICON + TEXT  

[java]  view plain  copy

 

1. public class Item {  
2.   
3.     public int imgId;  
4.     public String desc;  
5.   
6.     public Item(String desc, int imgId) {  
7.         this.desc = desc;  
8.         this.imgId = imgId;  
9.     }  
10. }  

简单的Holder

[java]  view plain  copy

 

1. public class MyViewHolder extends RecyclerView.ViewHolder {  
2.   
3.     public MyViewHolder(View itemView) {  
4.         super(itemView);  
5.     }  
6. }  

[java]  view plain  copy

 

1. public class MyRecyclerAdapter extends RecyclerView.Adapter<MyViewHolder> {  
2.   
3.     private Activity activity;  
4.     private List<Item> list;  
5.   
6.     public MyRecyclerAdapter (Activity act, List<Item> list) {  
7.         this.activity = act;  
8.         this.list = list;  
9.     }  
10.   
11.   
12.     @Override  //绑定一个UI作为Holder 提高性能  
13.     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
14.         View v = LayoutInflater.from(activity).inflate(R.layout.recy_item,null);  
15.         MyViewHolder holder = new MyViewHolder(v);  
16.         return holder;  
17.     }  
18.   
19.     //设置数据  
20.     @Override  
21.     public void onBindViewHolder(MyViewHolder holder, int position) {  
22.         Item item = list.get(position);  
23.         TextView text1 = (TextView) holder.itemView.findViewById(R.id.text) ;  
24.         text1.setText(item.desc);  
25.         ImageView img = (ImageView) holder.itemView.findViewById(R.id.img);  
26.         img.setImageResource(item.imgId);  
27.     }  
28.   
29.     @Override  
30.     public int getItemCount() {  
31.         return list.size();  
32.     }  
33.   
34.   
35. }  

recy_item.xml

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent" android:layout_height="match_parent"  
4.     android:orientation="horizontal"  
5.     >  
6.   
7.     <ImageView  
8.         android:layout_width="70dp"  
9.         android:layout_height="70dp"  
10.         android:id = "@+id/img"  
11.         android:scaleType="fitCenter"  
12.         android:layout_marginLeft="2dp"  
13.         android:layout_gravity="center_vertical"  
14.         />  
15.   
16.      <TextView  
17.          android:id="@+id/text"  
18.          android:layout_width="wrap_content"  
19.          android:layout_height="wrap_content"  
20.          android:layout_marginLeft="3dp"  
21.          android:layout_marginTop="5dp"  
22.          android:textColor="#336699"  
23.          android:textSize="18sp"  
24.          />  
25.   
26.   
27. </LinearLayout>  

[java]  view plain  copy

 

1. public class MainActivity extends ActionBarActivity {  
2.   
3.     private List<Item> itemList;  
4.   
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         setContentView(R.layout.activity_main);  
9.         initView();  
10.     }  
11.   
12.     private void initView() {  
13.         String title = "To travel hopefully is a better thing than to arrive";  
14.   //    String title = "";  
15.         itemList = new ArrayList<Item>(5);  
16.         itemList.add(new Item(title,R.drawable.cat0));  
17.         itemList.add(new Item(title,R.drawable.cat0));  
18.         itemList.add(new Item(title,R.drawable.cat2));  
19.         itemList.add(new Item(title,R.drawable.cat3));  
20.         itemList.add(new Item(title,R.drawable.cat4));  
21.         itemList.add(new Item(title,R.drawable.cat4));  
22.         itemList.add(new Item(title,R.drawable.cat3));  
23.         itemList.add(new Item(title,R.drawable.cat2));  
24.         itemList.add(new Item(title,R.drawable.cat3));  
25.         itemList.add(new Item(title,R.drawable.cat2));  
26.         itemList.add(new Item(title,R.drawable.cat4));  
27.         itemList.add(new Item(title,R.drawable.cat4));  
28.         itemList.add(new Item(title,R.drawable.cat4));  
29.         itemList.add(new Item(title,R.drawable.cat0));  
30.         itemList.add(new Item(title,R.drawable.cat3));  
31.   
32.         RecyclerView list = (RecyclerView) findViewById(R.id.listview);  
33.     //    LinearLayoutManager mg = new LinearLayoutManager(this);  
34.   
35.         //水平或垂直摆放，可以不用 HorizontalScrollView  
36.    //     mg.setOrientation(LinearLayoutManager.HORIZONTAL);  
37.   
38.        GridLayoutManager mg = new GridLayoutManager(this,3);//格子摆放  
39.      //交错性的摆放，有点win8那种格子风格，最好使用CardView作为item，有边框和圆角  
40.     //    StaggeredGridLayoutManager mg = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);  
41.        list.setLayoutManager(mg);  
42.         MyRecyclerAdapter adapter = new MyRecyclerAdapter(this, itemList);  
43.         list.setAdapter(adapter);  
44.     } }  

[html]  view plain  copy

 

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context=".MainActivity">  
6.   
7.     <android.support.v7.widget.RecyclerView  
8.         android:id = "@+id/listview"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height = "fill_parent"  
11.         />  
12.   
13. </RelativeLayout>  

几种运行情况：

正常的List View

水平滚动

格子情况

GridLayoutManager mg = new GridLayoutManager(this,3); //3列

混合交错的。我们的图片需要动态大小，才能看到效果。把文字注释掉，只显示图片。

StaggeredGridLayoutManager mg = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);

[java]  view plain  copy

 

1. public void onBindViewHolder(MyViewHolder holder, int position) {  
2.     Item item = list.get(position);  
3.     TextView text1 = (TextView) holder.itemView.findViewById(R.id.text) ;  
4.     text1.setText(item.desc);  
5.     ImageView img = (ImageView) holder.itemView.findViewById(R.id.img);  
6.   
7.     int ww = 60 + (int)(position * new Random().nextInt(100));  
8.     if (ww > 300) {  
9.         ww = 200;//每个图片太宽不好看，计算一个恰当值  
10.     }  
11.     img.getLayoutParams().width = ww;  
12.     img.getLayoutParams().height = 50 + (int)(position * new Random().nextInt(50));//随机高宽  
13.     img.setImageResource(item.imgId);  
14. }  

交错的这种 内容大小是不固定的，所以建议用CardView 可以有边框效果

这个演示较为简单，基本用法就这些。