使用語言

• Kotlin

使用元件

• ImageView
• TextView
• CardView
• RecyclerView
• SwipeRefreshLayout

Layout 準備

• SwipeRefreshLayout

  讓畫面可以產生下拉更新的效果

  在想要產生下拉更新效果的 View 外面包一層 SwipeRefreshLayout 即可

  <android.support.v4.widget.SwipeRefreshLayout
      android:id="@+id/swipe"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <android.support.v7.widget.RecyclerView
          android:id="@+id/recyclerView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_constraintTop_toTopOf="parent"
          tools:listitem="@layout/cardview" />
  
  </android.support.v4.widget.SwipeRefreshLayout>
  

• CardView

  可以產生像卡片般一張一張的效果

  這次實作用來做為 RecyclerView 的子項目

  • 可用 app:cardCornerRadius=""　來設置卡片的圓角

  • 在 CardView 中放入想要的元件排版即可

Method

GridLayoutManager

將 RecyclerView 的子項目用表格的方式排列

＃ 關於 RecyclerView 及其他排列方式可參考 Day 6 內容

• GridLayoutManager(context: Context, spanCount: Int)

  • context：目前的 Context，可能會用來取用 Resource

  • spanCount：指定表格排列的欄數

  // recyclerView 為 Layout 中 RecyclerView 的 id
  recyclerView.layoutManager = GridLayoutManager(this, 2)
  

• GridLayoutManager(context: Context,
  　　　　　　　　　 spanCount: Int,
  　　　　　　　　　 orientation: Int,
  　　　　　　　　　 reverseLayout: Boolean)

  • context：目前的 Context，可能會用來取用 Resource

  • spanCount：指定表格排列的欄數

  • orientation：表格排列的方向，需為 HORIZONTAL 或 VERTICAL

  • reverseLayout：if true ，子項目載入順序將會反過來

    RecyclerView 的最後一個子項目會顯示在第一個
    第一個子項目會顯示在最後一個
    並且在載入時 RecyclerView 將會自動滑至最後一個從第一個子項目開始顯示。

SwipeRefreshLayout.OnRefreshListener

用來監聽下拉手勢的 Interface
需實作裡面的 onRefresh 方法來指定下拉更新時要執行的事件

• 為 Layout 中的 SwipeRefreshLayout 設置監聽器

  // swipe 為 Layout 中 SwipeRefreshLayout 的 id
  swipe.setOnRefreshListener(listener)
  val listener = object: SwipeRefreshLayout.OnRefreshListener {
      override fun onRefresh(){ }
  }
  

• 實作 onRefresh 方法

  val listener = SwipeRefreshLayout.OnRefreshListener {
      // 此為 Lambda 寫法
      myList.shuffle()  //將資料 List 洗牌，亂序排列
      adapter.notifyDataSetChanged()  //讓 RecyclerView 的 Adapter 更新畫面
      swipe.isRefreshing = false  //讓下拉更新的進度條（轉圈）停止顯示
  }
  

實作成果

查看詳細 Code > GitHub

tags: Android Kotlin GridLayoutManager SwipeRefreshLayout