前兩天練習要怎麼做RecycleView資料和畫面設定，在呈現上其實還有更多種方式，不只有ListView一種，還有像GridView甚至是瀑布流的形式，接下來就要來嘗試設定不同的佈局樣式、甚至是做佈局的切換。要做的事：

• 設定會有三種佈局樣式，可以透過右上角的按鈕進行切換檢視
• 依照圖片形狀區分，正方形圖片的文字背景會呈現黑底，也就是說要依據資料型態使用不同的view。

使用：getItemViewType

步驟一：新增itemView
不同的資料型態用不同的itemView，因為我要讓正方形圖片顯示出不一樣的效果，在layout新增一個xml檔，用來顯示正方形圖片，主要的差異為文字背景顏色不一樣。

之前都用LinearLayout去畫item樣式，但其實用constraintLayout會比較彈性。這次練習中，有兩種不同格式的圖片要顯示，但因為同樣都顯示在RecycleView裡面，我希望一筆筆資料的畫面大小一樣（如下圖所示），不能直接用wrap_content符合圖片。

constraintLayout圖片長寬設定有一項是 layout_constraintDimensionRatio，可以根據某一邊長去決定另一邊，這裡我們設定依據寬的長度去設定高度，寫成「h,1:1」意思是高度是由寬度依1:1比例決定

步驟二：修改及判斷資料型態
在data class裡面新增資料的屬性，預設是長方形，將圖片為正方形的資料改為false。

val isLandscape: Boolean = true

接著來到Adapter，先判斷資料該使用哪種itemview， 使用 getItemViewType 方法，用來獲取當前項Item（position參數）要用哪種類型的view佈局，這裡的view佈局類型就是指onCreateViewHolder的第二個參數，參考這裡。

override fun getItemViewType(position: Int): Int {
    return if(itemList[position].isLandscape) 1 else 2
}   
    //當item是isLandscape指定使用view1，反之使用view2
    //1,2 指的是view類型

步驟三：修改 onCreateViewHolder
onCreateViewHolder是用來載入佈局，依照viewType創建不同資料的ViewHOlder：

• 當viewType為1時回傳一般資料的itemView
• 當viewType為2時回傳正方形圖片資料的itemView

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    return when (viewType) {
        1->{
            val inflater = LayoutInflater.from(parent.context)
            val view = inflater.inflate(R.layout.item_landscape, parent, false)
            ViewHolder(view, viewType)      //一般資料的畫面
        }
        2->{
            val inflater = LayoutInflater.from(parent.context)
            val view = inflater.inflate(R.layout.item_portrait, parent, false)
            ViewHolder(view, viewType)     //資料圖片為正方形的畫面
        }
        else->{
            val inflater = LayoutInflater.from(parent.context)
            val view = inflater.inflate(R.layout.item_portrait, parent, false)
            ViewHolder(view, viewType)
        }
    }
}

步驟四：根據viewType，進行不同的資料綁定

• viewType = 1 綁定itemView的xml元件
• viewType = 2 綁定的是正方形圖片資料的xml元件

inner class ViewHolder(itemView: View,var viewType: Int) :
RecyclerView.ViewHolder(itemView) {
    var imageView : ImageView? = null
    var textView : TextView? = null

    fun bind(item: item) {
        when (viewType) {
            1 -> {
                imageView = itemView.findViewById(R.id.image_demo1)
                textView = itemView.findViewById(R.id.text_demo1)
            }
            2 -> {
                imageView = itemView.findViewById(R.id.iimage_demo2)
                textView = itemView.findViewById(R.id.text_demo2)
            }
        }
        imageView?.setImageResource(item.image)
        textView?.setText(item.text)
    }
}    

比較特別的是每筆資料依然是一張圖片和一串文字，只是樣式不一樣，綁定寫法其實可以簡化成下面這樣：

imageView = itemView.findViewById(R.id.image_view_pic)
textView = itemView.findViewById(R.id.text_view_pic_desc)

兩個itemView檔案的元件ID可以取一樣的名稱，反正在onCreateViewHolder時會去取該資料需要的itemView，再去綁定該itemView裡面的畫面元件，取一樣的ID並不衝突喔！

準備完不同資料的畫面設定，明天要來實作頁面切換功能喔～敬請期待～