Diseño de tabla con vista de reciclador en Kotlin de Mustafa Imran | Octubre de 2020

Hola, Este artículo explica cómo utilizar un diseño de tabla con una vista de reciclador. Nuestro resultado final se vería así:

Primero, crea un table_row_layout.xml para filas de tablas.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TableLayout
android:id="@+id/table_heading_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_border"
>

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/tv_user_name"
style="@style/table_row_item"
android:layout_width="0dp"
android:layout_column="0"
android:layout_margin="1dp"
android:layout_weight="1"
android:background="@color/white"
android:textAlignment="center" />

<TextView
android:id="@+id/tv_user_age"
style="@style/table_row_item"
android:layout_width="0dp"
android:layout_column="1"
android:layout_margin="1dp"
android:layout_weight="1"
android:background="@color/white"
android:textAlignment="center" />

<TextView
android:id="@+id/tv_user_designation"
style="@style/table_row_item"
android:layout_width="0dp"
android:layout_column="2"
android:layout_margin="1dp"
android:layout_weight="1"
android:background="@color/white"
android:baselineAligned="false"
android:textAlignment="center" />
</TableRow>
</TableLayout>

</LinearLayout>

Crear table_row_item estilo en styles.xml

<style name="table_row_item" parent="@android:style/TextAppearance.Small">
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">@dimen/_10ssp</item>
<item name="android:background">@color/white</item>
<item name="android:layout_marginRight">@dimen/_1sdp</item>
<item name="android:layout_marginEnd">@dimen/_1sdp</item>
<item name="android:paddingStart">@dimen/_10sdp</item>
<item name="android:paddingLeft">@dimen/_10sdp</item>
<item name="android:layout_height">@dimen/_30sdp</item>
</style>

Ahora crea TableRowAdapter.kt por línea.

class TableRowAdapter(private var userArrayList: ArrayList<User>) :
RecyclerView.Adapter<TableRowAdapter.ViewHolder>() {

override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): ViewHolder {
val v: View = LayoutInflater.from(viewGroup.context)
.inflate(R.layout.table_row_layout, viewGroup, false)
return ViewHolder(v)
}

override fun onBindViewHolder(viewHolder: ViewHolder, i: Int) {
viewHolder.tvUserName.text = userArrayList[i].name
viewHolder.tvAge.text = userArrayList[i].age.toString()
viewHolder.tvDesignation.text = userArrayList[i].designation
}

override fun getItemCount(): Int {
return userArrayList.size
}

class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val tvUserName: TextView = itemView.findViewById(R.id.tv_user_name)
val tvAge: TextView = itemView.findViewById(R.id.tv_user_age)
val tvDesignation: TextView = itemView.findViewById(R.id.tv_user_designation)

}
}

Crear User.kt clase de datos

data class User(
var name: String,
var age: Int,
var designation: String

)

Agregue las siguientes dependencias a build.gradle

implementation 'com.intuit.ssp:ssp-android:1.0.6'
implementation 'com.intuit.sdp:sdp-android:1.0.6'
implementation 'androidx.recyclerview:recyclerview:1.1.0'

Ahora cree un encabezado de tabla y agréguelo a su vista de reciclaje activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TableLayout
android:id="@+id/table_heading_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_5sdp"
android:layout_marginTop="@dimen/_20sdp"
android:layout_marginEnd="@dimen/_4sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">

<TableRow>

<TextView
style="@style/table_header"
android:layout_width="0dp"
android:layout_height="@dimen/_30sdp"
android:layout_column="0"
android:layout_weight="1"
android:textAlignment="center"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="@string/name"/>

<TextView
android:layout_height="@dimen/_30sdp"
android:layout_width="0dp"
android:layout_column="1"
android:layout_weight="1"
android:text="@string/age"
style="@style/table_header"
android:paddingEnd="@dimen/_5sdp"
android:textAlignment="center"
android:layout_gravity="center_horizontal"
android:gravity="center"/>

<TextView
android:layout_height="@dimen/_30sdp"
android:layout_width="0dp"
android:layout_column="2"
android:layout_weight="1"
android:text="@string/designation"
style="@style/table_header"
android:paddingEnd="@dimen/_5sdp"
android:textAlignment="center"
android:layout_gravity="center_horizontal"
android:gravity="center"/>
</TableRow>
</TableLayout>

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/table_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_5sdp"
android:layout_marginEnd="@dimen/_5sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/table_heading_layout">

</androidx.recyclerview.widget.RecyclerView>

</androidx.constraintlayout.widget.ConstraintLayout>

Añadir table_header estilo en styles.xml

<style name="table_header" parent="@android:style/TextAppearance.Small">
<item name="android:textStyle">bold</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:textColor">@color/white</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">@dimen/_11ssp</item>
<item name="android:background">#FF0000</item>
<item name="android:layout_marginRight">@dimen/_1sdp</item>
<item name="android:layout_marginEnd">@dimen/_1sdp</item>
<item name="android:paddingStart">@dimen/_10sdp</item>
<item name="android:paddingLeft">@dimen/_10sdp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">@dimen/_40sdp</item>
</style>

Agrega el siguiente código a tu código MainActivity.kt

class MainActivity : AppCompatActivity() {

private lateinit var tableRecyclerView : RecyclerView
private var userList = ArrayList<User>()
private lateinit var tableRowAdapter: TableRowAdapter
private lateinit var user : User

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

userList.add(User("John", 24, "Software Engineer"))
userList.add(User("Mark", 29, "Data Analyst"))
userList.add(User("Charlie", 26, "Senior Software Engineer"))
userList.add(User("Amy", 24, "Quality Assurance Engineer"))
userList.add(User("Elizabeth", 32, "Project Manager"))

tableRecyclerView = findViewById(R.id.table_recycler_view)
tableRowAdapter = TableRowAdapter(userList)

tableRecyclerView.layoutManager = LinearLayoutManager(this)
tableRecyclerView.adapter = tableRowAdapter

}
}

El código se puede encontrar aquí.

https://github.com/MustafaImran/TableViewWithRecyclerView

Tadaaaa. Así de sencillo. ¡Disfrutar!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *