1. 程式人生 > >ListView 與 RecyclerView的比較

ListView 與 RecyclerView的比較

ListView與RecyclerView在在app應用非常廣泛,相對於其他的view(button textview)來說比較複雜,接下來我將講一下建立的流程以及兩者的不同。


程式碼來自《第一行程式碼》

秋天到了,果園大豐收了,現在著急的事情,就是把水果收集好放進倉庫裡。

ListView

  1. 首先肯定要先把倉庫準備好,騰一塊地方出來,在佈局中新增ListView。

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
    
         <ListView
             android:id="@+id/list_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent" >
         </ListView>
    
     </LinearLayout>
  2. 把裝水果的框子準備好,建立fruit_item佈局。

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
    
         <ImageView
             android:id="@+id/fruit_image"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />
    
         <TextView
             android:id="@+id/fruit_name"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:layout_marginLeft="10dp" />
    
     </LinearLayout>
  3. 主角登場啦,咱們的搬運工,建立類FruitAdapter。

他需要幹什麼呢?

先貼出原始碼,下面解釋

    package com.example.listviewtest;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import java.util.List;
    
    public class FruitAdapter extends ArrayAdapter<Fruit> {
    
        private int resourceId;
    
        public FruitAdapter(Context context, int textViewResourceId,
                            List<Fruit> objects) {
            super(context, textViewResourceId, objects);
            resourceId = textViewResourceId;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            Fruit fruit = getItem(position); // 獲取當前項的Fruit例項
            View view;
            ViewHolder viewHolder;
            if (convertView == null) {
                view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
                viewHolder = new ViewHolder();
                viewHolder.fruitImage = (ImageView) view.findViewById (R.id.fruit_image);
                viewHolder.fruitName = (TextView) view.findViewById (R.id.fruit_name);
                view.setTag(viewHolder); // 將ViewHolder儲存在View中
            } else {
                view = convertView;
                viewHolder = (ViewHolder) view.getTag(); // 重新獲取ViewHolder
            }
            viewHolder.fruitImage.setImageResource(fruit.getImageId());
            viewHolder.fruitName.setText(fruit.getName());
            return view;
        }
    
        class ViewHolder {
    
            ImageView fruitImage;
    
            TextView fruitName;
    
        }
    
    }

搬運工的工作就是,返回一個裝滿水果的框框

  • 拿到一個水果
  • 找到一個框框
  • 把水果放到框框裡
  • 把框框返回(結局自然回到裡倉庫)
    1. 拿到一個水果

       Fruit fruit = getItem(position);
    2. 找到一個框框

       View view;
       view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
       ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image)
       TextView fruitName = (TextView) view.findViewById(R.id.fruit_name)
    3. 把水果放到框框裡

       viewHolder.fruitImage.setImageResource(fruit.getImageId());
       viewHolder.fruitName.setText(fruit.getName());

      原始碼裡面有兩布優化,自己想想哦。

    4.把框框返回

          return view;

RecylerView

還是老步驟,首先準備好倉庫,在準備好框框

  1. 準備好倉庫,騰一塊地方出來

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
    
         <android.support.v7.widget.RecyclerView
             android:id="@+id/recycler_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent" />
    
     </LinearLayout>
  2. 準備好框框,和上面一樣

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_margin="5dp" >
    
         <ImageView
             android:id="@+id/fruit_image"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_horizontal" />
    
         <TextView
             android:id="@+id/fruit_name"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="left"
             android:layout_marginTop="10dp" />
    
     </LinearLayout>
  3. 請出我們更加聰明的搬運工了

    先貼出原始碼,下面解釋

    package com.example.recyclerviewtest;

    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;
    import android.widget.Toast;

    import java.util.List;

    public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder>{

     private List<Fruit> mFruitList;
    
     static class ViewHolder extends RecyclerView.ViewHolder {
         View fruitView;
         ImageView fruitImage;
         TextView fruitName;
    
         public ViewHolder(View view) {
             super(view);
             fruitView = view;
             fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
             fruitName = (TextView) view.findViewById(R.id.fruit_name);
         }
     }
    
     public FruitAdapter(List<Fruit> fruitList) {
         mFruitList = fruitList;
     }
    
     @Override
     public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item, parent, false);
         final ViewHolder holder = new ViewHolder(view);
         holder.fruitView.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 int position = holder.getAdapterPosition();
                 Fruit fruit = mFruitList.get(position);
                 Toast.makeText(v.getContext(), "you clicked view " + fruit.getName(), Toast.LENGTH_SHORT).show();
             }
         });
         holder.fruitImage.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 int position = holder.getAdapterPosition();
                 Fruit fruit = mFruitList.get(position);
                 Toast.makeText(v.getContext(), "you clicked image " + fruit.getName(), Toast.LENGTH_SHORT).show();
             }
         });
         return holder;
     }
    
     @Override
     public void onBindViewHolder(ViewHolder holder, int position) {
         Fruit fruit = mFruitList.get(position);
         holder.fruitImage.setImageResource(fruit.getImageId());
         holder.fruitName.setText(fruit.getName());
     }
    
     @Override
     public int getItemCount() {
         return mFruitList.size();
     }

    }

多了好多誒,其實,咱們聰明的搬運工製造了更多的工具,真是方便了好多。
現在搬運工只需要幹兩件事情了

  • 找到一個水果
  • 把水果放到框子裡

      public void onBindViewHolder(ViewHolder holder, int position) {
          Fruit fruit = mFruitList.get(position);
          holder.fruitImage.setImageResource(fruit.getImageId());
          holder.fruitName.setText(fruit.getName());
      }

    沒錯,只需要兩部,其他的事情都靠聰明的搬運工製造出來的自動小車,送回到倉庫了,是不是很酷。

  • 現在創造出我們的工具

      static class ViewHolder extends RecyclerView.ViewHolder {
          View fruitView;
          ImageView fruitImage;
          TextView fruitName;
    
          public ViewHolder(View view) {
              super(view);
              fruitView = view;
              fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
              fruitName = (TextView) view.findViewById(R.id.fruit_name);
          }
      }

    這個工具記得他應該去倉庫中騰出來的位置

  • 再看看工具是怎麼運作的

      @Override
      public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
          View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item, parent, false);
          ViewHolder holder = new ViewHolder(view);
          return holder;
      }

    首先他會和倉庫聯絡一下,然後就會自動運回倉庫啦。