Android Recycleview的用法

前言

最近沒得什麼項目可以做，閒來無事想寫一些東西，看了看以前做的項目，用到的最多的就是列表了，今天就說一下recycleview。

這個世界並不是掌握在那些嘲笑者的手中，而恰恰掌握在能夠經受得住嘲笑與批評仍不斷往前走的人手中。

---

RecycleView 的介紹

自Android 5.0之後，谷歌公司推出了RecylerView控件，主要用於列表的展示是一個很強大的滑動組件，說到這裏就會想到不是已經有listview嗎？爲啥還要弄一個recycleview出來了？確實我覺得這個問題回答很簡單，之所以出他是因爲他肯定比listview強大的，不然谷歌爲啥要出它。

recycleview與listview的比較
相同：都可以實現垂直方向的滾動列表效果；都需要使用適配器（Adapter）。
不同點：ListView只能實現垂直滾動列表，但RecyclerView還可以實現水平、多列、跨列等複雜的滾動列表；RecyclerView不但需要Adapter，還必須有LayoutManager，用法更復雜一些。

recycleview說：你listview管不了的我要管，你listview管的了的我也要管，我recycleview說的，listview我吃定了，耶穌也留不住。
listview說：牛bi！

---

線性佈局的Recycleview

效果圖：

先來看看XML的佈局：

 <android.support.v7.widget.RecyclerView
        android:id="@+id/xian_recycle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp">
        </android.support.v7.widget.RecyclerView>

再來看看每一個Item的佈局是怎樣的

<?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="wrap_content"
    android:layout_marginTop="5dp"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img"
            android:layout_width="150dp"
            android:layout_height="match_parent" />

            <TextView
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textColor="#363535"
                android:textSize="14sp" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#cfcdcd"></View>

</LinearLayout>

adapter的寫法

public class XianAdapter extends RecyclerView.Adapter<XianAdapter.XianHolder> {
    private Context context = null;
    //數據集合
    private ArrayList<Name> list = null;
    //點擊事件的接口
    private ItemClick click = null;

    public XianAdapter(Context context) {
        this.context = context;
        list = new ArrayList<>();
    }

    public ItemClick getClick() {
        return click;
    }

    public void setClick(ItemClick click) {
        this.click = click;
    }

    public ArrayList<Name> getList() {
        return list;
    }

    public void setList(ArrayList<Name> list) {
        this.list = list;
    }

    @Override
    public XianHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    //添加item的佈局文件
        View view = LayoutInflater.from(context).inflate(R.layout.xian_recycle_item, parent, false);
        XianHolder holder = new XianHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(XianHolder holder, final int position) {
        //給每個item設置數據
        if (list != null) {
            holder.img.setImageResource(list.get(position).getImg());
            holder.name.setText(list.get(position).getName());
        }
        //給每個item添加監聽
        if (click != null) {
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    click.ItemClick(position);
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        //列表的長度
        return list.size();
    }

    class XianHolder extends RecyclerView.ViewHolder {
        //找到佈局文件裏面的控件
        private ImageView img = null;
        private TextView name = null;

        public XianHolder(View itemView) {
            super(itemView);
            img = (ImageView) itemView.findViewById(R.id.img);
            name = (TextView) itemView.findViewById(R.id.name);
        }
    }
}

這個地方我做了一個數據的類Name

public class Name {
    private String name = null;
    private int img = 0;


    public Name(String name, int img) {
        this.name = name;
        this.img = img;

    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }
}

還有一個接口文件

public interface ItemClick {
    void ItemClick(int position);
}

再來看看主頁面是怎麼寫的：

public class XianActivity extends AppCompatActivity{
    private RecyclerView recyclerView = null;
    private XianAdapter adapter = null;
    private ArrayList<Name> list = null;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        initData();
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_xian);
        initView();
    }

    public void initView(){
        //找到recycleview
        recyclerView = (RecyclerView) findViewById(R.id.xian_recycle);
        //指定佈局方式這個地方時線性佈局
        RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
        //指定好的設置給recycleview
        recyclerView.setLayoutManager(manager);
        //適配器弄出來
        adapter = new XianAdapter(this);
        //把添加好數據的結合傳給適配器
        adapter.setList(list);
        //監聽也是一樣
        adapter.setClick(click);
        //recycleview設置適配器
        recyclerView.setAdapter(adapter);
        //adapter更新數據
        adapter.notifyDataSetChanged();
    }

    //item的監聽事件
    private ItemClick click = new ItemClick() {
        @Override
        public void ItemClick(int position) {
        //點擊彈出每一行的名字
            Toast.makeText(XianActivity.this, list.get(position).getName(), Toast.LENGTH_SHORT).show();
        }
    };
    //插入數據
    public void initData(){
        list = new ArrayList<>();
        list.add(new Name(" 蒙奇·D·路飛",R.mipmap.one));
        list.add(new Name(" 羅羅亞·索隆 ",R.mipmap.two));
        list.add(new Name("香吉士",R.mipmap.three));
        list.add(new Name(" 妮可·羅賓",R.mipmap.four));
        list.add(new Name("娜美",R.mipmap.five));
        list.add(new Name("烏索普",R.mipmap.six));
        list.add(new Name("託尼託尼·喬巴",R.mipmap.seven));
        list.add(new Name("弗蘭奇",R.mipmap.eight));
        list.add(new Name("布魯克 ",R.mipmap.nine));
    }
}

recycleview網格佈局

效果圖：

要實現這種網格的效果你只需要稍微的改動一下item的佈局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_margin="5dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:scaleType="fitXY"
        android:id="@+id/img"
        android:layout_width="150dp"
        android:layout_height="100dp" />

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#363535"
        android:textSize="14sp" />
</LinearLayout>

然後改一句話就能實現
把線性佈局的：

RecyclerView.LayoutManager manager = new LinearLayoutManager(this);

改成

RecyclerView.LayoutManager manager = new GridLayoutManager(this, 3);

這句話就是用網格佈局3表示的一行有多少個。

Recycleview 瀑布流

效果圖：

改下item佈局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_margin="5dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:scaleType="fitXY"
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#363535"
        android:textSize="14sp" />

</LinearLayout>

然後改一句話就能實現
把線性佈局的：

RecyclerView.LayoutManager manager = new LinearLayoutManager(this);

改成

RecyclerView.LayoutManager manager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);

這樣就搞定了瀑布流。

這篇就寫到這裏了。