Android RecyclerView通用導航的抽取

摘要： 不知道該怎麼取這個標題，想實現的效果如下圖,因為最近在開發 追夢者 ,總是要實現下面的導航，所以乾脆進行定製一下，效果類似 ios 的 UITableViewCell 的樣式。當然 item 可以增加間距，大家客戶參考，根據自己的需求進行定製 效果圖 ...

不知道該怎麼取這個標題，想實現的效果如下圖,因為最近在開發 追夢者 ,總是要實現下面的導航，所以乾脆進行定製一下，效果類似 ios 的 UITableViewCell 的樣式。當然 item 可以增加間距，大家客戶參考，根據自己的需求進行定製

如標題，我們採用 RecyclerView + adapter

進行實現該需求，主要工作實在adapter的實現。

1. adapter item view 的實現

   所有的view都是採用TextView 來實現，相關圖表採用iconfont來實現。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<View android:layout_width="match_parent"
android:id="@+id/vMarginTop"
android:background="@color/background"
android:layout_height="15dp"/>

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:paddingLeft="@dimen/left"
android:paddingRight="@dimen/right"
android:layout_height="60dp">


<TextView android:layout_width="wrap_content"
android:id="@+id/tvIcon"
android:text="icon"
android:textSize="26sp"
android:paddingRight="10dp"
android:gravity="center"
android:layout_height="match_parent"/>


<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">

<TextView android:layout_width="match_parent"
android:layout_weight="4"
android:id="@+id/tvItem"
android:text="同步"
android:textSize="16sp"
android:textColor="@color/textBase"
android:gravity="left|bottom"
android:layout_height="0dp"/>

<TextView android:layout_width="match_parent"
android:id="@+id/tvHint"
android:text="同步伺服器或本地"
android:textSize="10sp"
android:textColor="@color/textHint"
android:layout_weight="3"
android:paddingTop="5dp"
android:gravity="left|top"
android:layout_height="0dp"/>


</LinearLayout>

<TextView android:layout_width="wrap_content"
android:id="@+id/tvValue"
android:text="真棒哦"
android:textSize="10sp"
android:textColor="@color/hint"
android:paddingRight="5dp"
android:gravity="center"
android:layout_height="match_parent"/>

<TextView android:layout_width="wrap_content"
android:id="@+id/tvRight"
android:text="icon"
android:textColor="@color/hint"
android:gravity="center"
android:layout_height="match_parent"/>

</LinearLayout>

<View android:layout_width="match_parent"
android:layout_height="0.5dp"
android:paddingLeft="@dimen/left"
android:background="@color/background"/>
</LinearLayout>

2. adapter 的實現

   adapter中定義了列舉型別GeneralStyle，通過列舉對adapter item view 進行定製，通過列舉型別，可知道我們定義了四個型別。通過GeneralHolder重新佈局item view的內容。

package com.zhangwenshuan.dreamer.adapter

import android.content.Context
import android.graphics.Typeface
import android.support.v7.widget.RecyclerView
import android.view.Gravity
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import com.zhangwenshuan.dreamer.R
import com.zhangwenshuan.dreamer.bean.Item

class GeneralAdapter(var context: Context, var style: GeneralStyle, var list: MutableList<Item>) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): RecyclerView.ViewHolder {
return GeneralHolder(LayoutInflater.from(context).inflate(R.layout.item_general_adapter, parent, false), style)
}

override fun getItemCount(): Int = list.size

val typeface = Typeface.createFromAsset(context.assets, "icon_action.ttf")

override fun onBindViewHolder(holder: RecyclerView.ViewHolder?, position: Int) {
holder as GeneralHolder

val item = list[position]

if (item.showRight) {
holder.tvRight.visibility = View.VISIBLE
} else {
holder.tvRight.visibility = View.GONE
}

if (item.showTop) {
holder.vTop.visibility = View.VISIBLE
} else {
holder.vTop.visibility = View.GONE
}

if (item.icon.isEmpty()) {
holder.tvIcon.visibility = View.GONE
} else {
holder.tvIcon.visibility = View.VISIBLE
}

holder.itemView.setOnClickListener {
listener?.onItemClick(position)
}

holder.tvRight.typeface = typeface
holder.tvIcon.typeface = typeface


holder.tvItem.text = item.name

holder.tvRight.text = context.resources.getString(R.string.to_right)
holder.tvIcon.text = item.icon


holder.tvIcon.setTextColor(item.iconColor)

holder.itemView.setOnClickListener {
listener?.onItemClick(position)
}
}

lateinit var listener: OnItemClickListener


fun setOnItemClickListener(listener: OnItemClickListener) {
this.listener = listener
}
}

class GeneralHolder : RecyclerView.ViewHolder {

val tvIcon = itemView.findViewById<TextView>(R.id.tvIcon)
val tvItem = itemView.findViewById<TextView>(R.id.tvItem)
val tvRight = itemView.findViewById<TextView>(R.id.tvRight)
val tvHint = itemView.findViewById<TextView>(R.id.tvHint)
val tvValue = itemView.findViewById<TextView>(R.id.tvValue)
val vTop = itemView.findViewById<View>(R.id.vMarginTop)

constructor(itemView: View, style: GeneralStyle) : super(itemView) {
init(style)
}


private fun init(style: GeneralStyle) {

when (style) {
GeneralStyle.STYLE_NORMAL -> {
tvHint.visibility = View.GONE
tvValue.visibility = View.GONE

tvItem.gravity = Gravity.CENTER_VERTICAL
}
GeneralStyle.STYLE_HAVE_HINT -> {
tvHint.visibility = View.VISIBLE

tvValue.visibility = View.GONE

tvItem.gravity = Gravity.BOTTOM
}
GeneralStyle.STYLE_HAVE_VALUE -> {
tvHint.visibility = View.GONE

tvValue.visibility = View.VISIBLE

tvItem.gravity = Gravity.CENTER_VERTICAL
}
GeneralStyle.STYLE_HAVE_HINT_AND_VALUE -> {
tvHint.visibility = View.VISIBLE

tvValue.visibility = View.VISIBLE

tvItem.gravity = Gravity.BOTTOM
}
}
}


}

enum class GeneralStyle {
STYLE_NORMAL, STYLE_HAVE_HINT, STYLE_HAVE_VALUE, STYLE_HAVE_HINT_AND_VALUE
}

3. item 的實現

   item是實體類，通過屬性控制view的內容，大家根據自己需求進行定製。

data class Item(var icon:String,
 var name:String,
 var iconColor:Int= Color.BLUE,
 var showRight:Boolean=false,
 var showTop:Boolean=false)

4. activity 的實現

list.add(Item(resources.getString(R.string.sync), "同步",iconColor = resources.getColor(R.color.chart_color_4), showRight = true))
list.add(Item(resources.getString(R.string.show_splash), "啟動顯示", iconColor = resources.getColor(R.color.chart_color_5),showRight = true))
adapter= GeneralAdapter(this,GeneralStyle.STYLE_HAVE_HINT_AND_VALUE,list)
rvCountDownSetting.adapter = adapter
rvCountDownSetting.layoutManager = LinearLayoutManager(this)

這樣以後不用總是要重複寫程式碼了