Android RecycleView 的多布局

前言

上一篇和大家分享了recycleview的基本的用法，實作了recycleview的3種不同的布局方式。上一篇種也提到了recycleview可以實作很多的功能，比如說recycleview的多布局，今天寫的這一篇，recycleview的多布局。

名言

很多事情努力了未必有結果，但是不努力卻什麼改變也沒有。

好了接下來就進入正題吧：

首先我們看下我們要實作的效果是什麼樣子的。

Android RecycleView 的多布局

可能有的人看了這個界面在想，這個界面為什麼要用recycleview來實作，用一般的布局就可以做啊，何必那麼複雜？

原因：

1、我真的不曉得舉出什麼樣的例子了。

2、隻是做個例子來看看recycleview是怎麼去實作多布局的。

3、這個例子也告訴大家，寫界面之前，想清楚，怎麼簡單怎麼來。

Android RecycleView 的多布局

好了首先我們要做的事情就是建立布局，這個例子中我把這個頁面分成了4個布局。依次來看看，很簡單的。

第一個布局item_one：

<TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:background="#ed9b9b"
        android:gravity="center"
        android:text="" />

第二個布局item_two：

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

第三個布局item_three：

<Button
        android:id="@+id/btn_one"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:text="" />

    <Button
        android:id="@+id/btn_two"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:text="" />

第四個布局item_four：

<ImageView
        android:id="@+id/img_four"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        />

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

        <TextView
            android:id="@+id/tv_one"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#85d6df"
            android:gravity="center"
            android:text=""
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tv_two"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#d188c5"
            android:gravity="center"
            android:text=""
            android:textSize="16sp" />
    </LinearLayout>

主要界面的布局：

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

布局就是這樣随性，頑皮！

布局布好了接下裡recycleview重要的就是adapter了，我先貼出adapter的所有的代碼在分快的講解。

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context context = null;
    private LayoutInflater inflater = null;
    private ItemClick click = null;

    public MyAdapter(Context context) {
        this.context = context;
        inflater = LayoutInflater.from(context);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case ONE_ITEM:
                View view1 = inflater.inflate(R.layout.item_one, parent, false);
                OneHolder oneHolder = new OneHolder(view1);
                return oneHolder;
            case TWO_ITEM:
                View view2 = inflater.inflate(R.layout.item_two, parent, false);
                TwoHolder twoHolder = new TwoHolder(view2);
                return twoHolder;
            case THREE_ITEM:
                View view3 = inflater.inflate(R.layout.item_three, parent, false);
                ThreeHolder threeHolder = new ThreeHolder(view3);
                return threeHolder;
            case FOUR_ITEM:
                View view4 = inflater.inflate(R.layout.item_four, parent, false);
                FourHolder fourHolder = new FourHolder(view4);
                return fourHolder;
        }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof OneHolder) {
            OneHolder oneHolder = (OneHolder) holder;
            oneHolder.textView.setText("我是頭部");
        }

        if (holder instanceof TwoHolder) {
            TwoHolder twoHolder = (TwoHolder) holder;
            twoHolder.img.setImageResource(R.mipmap.four);
        }

        if (holder instanceof ThreeHolder) {
            ThreeHolder threeHolder = (ThreeHolder) holder;
            threeHolder.btn_one.setText("按鈕1号");
            threeHolder.btn_two.setText("按鈕2号");
        }

        if (holder instanceof FourHolder) {
            FourHolder fourHolder = (FourHolder) holder;
            fourHolder.img_four.setImageResource(R.mipmap.one);
            fourHolder.tv_one.setText("海賊王");
            fourHolder.tv_two.setText("灑家賣蘑菇");
        }
    }

    @Override
    public int getItemCount() {
        return ;
    }

    private final int ONE_ITEM = ;
    private final int TWO_ITEM = ;
    private final int THREE_ITEM = ;
    private final int FOUR_ITEM = ;

    @Override
    public int getItemViewType(int position) {
        if (position == ONE_ITEM) {
            return ONE_ITEM;
        } else if (position == TWO_ITEM) {
            return TWO_ITEM;
        } else if (position == THREE_ITEM) {
            return THREE_ITEM;
        } else if (position == FOUR_ITEM) {
            return FOUR_ITEM;
        }
        return ;
    }

    class OneHolder extends RecyclerView.ViewHolder {
        private TextView textView = null;

        public OneHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.textview);
        }
    }

    class TwoHolder extends RecyclerView.ViewHolder {
        private ImageView img = null;

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

    class ThreeHolder extends RecyclerView.ViewHolder {
        private Button btn_one, btn_two = null;

        public ThreeHolder(View itemView) {
            super(itemView);
            btn_one = (Button) itemView.findViewById(R.id.btn_one);
            btn_two = (Button) itemView.findViewById(R.id.btn_two);
        }
    }

    class FourHolder extends RecyclerView.ViewHolder {
        private ImageView img_four = null;
        private TextView tv_one, tv_two = null;

        public FourHolder(View itemView) {
            super(itemView);
            img_four = (ImageView) itemView.findViewById(R.id.img_four);
            tv_one = (TextView) itemView.findViewById(R.id.tv_one);
            tv_two = (TextView) itemView.findViewById(R.id.tv_two);

        }
    }
}

第一步先看看Holder吧

第一個布局的holder

class OneHolder extends RecyclerView.ViewHolder {
        private TextView textView = null;

        public OneHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.textview);
        }
    }

這裡有幾個布局就寫幾個holder，我這裡寫了4個布局是以有4個holder，代碼上面都有我就不依次貼出來了。這個相信大家都能夠看懂。

第二步：

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
 @Override
 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {...}

 @Override
 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {...}

 @Override
 public int getItemCount() {return null;}
}

自定義的holder繼承了recycleview的adapter重寫了3個方法：

放布局檔案：

@Override
 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {...}

綁定資料：

@Override
 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {...}

有多少個item:

@Override
 public int getItemCount() {return null;}

第三步：

private final int ONE_ITEM = ;
 private final int TWO_ITEM = ;
 private final int THREE_ITEM = ;
 private final int FOUR_ITEM = ;

 @Override
 public int getItemViewType(int position) {
     if (position == ONE_ITEM) {
            return ONE_ITEM;
     } else if (position == TWO_ITEM) {
            return TWO_ITEM;
     } else if (position == THREE_ITEM) {
            return THREE_ITEM;
     } else if (position == FOUR_ITEM) {
            return FOUR_ITEM;
     }
        return ;
    }

先來看看這個方法：

@Override
 public int getItemViewType(int position) {...}

這個就是來區分有多少個布局

position = 0 的時候就是整個recycleview的第一行

position = 1 的時候就是整個recycleview的第二行

position = 2 的時候就是整個recycleview的第三行

position = 3 的時候就是整個recycleview的第四行

這就滿足了我們每一行都是不同布局的要求。

接下來就到第二步的：

綁定布局的這個方法中來。

@Override
 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {...}

這個方法裡面有一個viewtype這個就是來區分布局的。

是以在這個方法裡面我用了一個switch循環來區分是哪個布局。

@Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case ONE_ITEM:
                View view1 = inflater.inflate(R.layout.item_one, parent, false);
                OneHolder oneHolder = new OneHolder(view1);
                return oneHolder;
            case TWO_ITEM:
                View view2 = inflater.inflate(R.layout.item_two, parent, false);
                TwoHolder twoHolder = new TwoHolder(view2);
                return twoHolder;
            case THREE_ITEM:
                View view3 = inflater.inflate(R.layout.item_three, parent, false);
                ThreeHolder threeHolder = new ThreeHolder(view3);
                return threeHolder;
            case FOUR_ITEM:
                View view4 = inflater.inflate(R.layout.item_four, parent, false);
                FourHolder fourHolder = new FourHolder(view4);
                return fourHolder;
        }
        return null;
    }

綁定完成布局以後我們就應該插入資料：

就在第二步的

@Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof OneHolder) {
            OneHolder oneHolder = (OneHolder) holder;
            oneHolder.textView.setText("我是頭部");
        }

        if (holder instanceof TwoHolder) {
            TwoHolder twoHolder = (TwoHolder) holder;
            twoHolder.img.setImageResource(R.mipmap.four);
        }

        if (holder instanceof ThreeHolder) {
            ThreeHolder threeHolder = (ThreeHolder) holder;
            threeHolder.btn_one.setText("按鈕1号");
            threeHolder.btn_two.setText("按鈕2号");
        }

        if (holder instanceof FourHolder) {
            FourHolder fourHolder = (FourHolder) holder;
            fourHolder.img_four.setImageResource(R.mipmap.one);
            fourHolder.tv_one.setText("海賊王");
            fourHolder.tv_two.setText("灑家賣蘑菇");
        }
    }

instanceof它的作用是測試它左邊的對象是否是它右邊的類的執行個體，傳回boolean類型的資料。

因為我們這裡是開始是繼承他原有的adapter和holder是以我們這裡要把，他原有的holder轉換成自己的holder。

是以就有了這一步。

好了重要的部分也就哔哔完了。

還是吧首頁面的代碼貼一下吧

public class MoreActivity extends AppCompatActivity{
    private RecyclerView recyclerView = null;
    private MyAdapter adapter = null;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_more);
        recyclerView = (RecyclerView) findViewById(R.id.recycle);
        RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        adapter = new MyAdapter(this);
        recyclerView.setAdapter(adapter);
        adapter.notifyDataSetChanged();
    }
}

打完收工~~~有問題的地方還請大神們提出來多多指教！

Android RecycleView 的多布局

前言

名言

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯