最近遇到一个项目,学习淘宝首页的做法,做一个标签页面,看了下样式 ,其实就是有一个横向的recyclerView,实现方式很多,用recyclerview实现感觉扩展性相对比较好,记录下吧,发现忘的快。
先看下效果图
image.png
1、adapter的布局文件
item_test.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/img"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
app:layout_constraintTop_toBottomOf="@+id/img"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
1、首先创建一个普通的adapter,别人框架也一样的,基本都是没毛病会暴露方法给外部使用
myadapter.xml
package com.hh.myrv
import android.app.Activity
import android.content.Context
import android.util.DisplayMetrics
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class MyAdapter(var data: List<String>) : RecyclerView.Adapter<MyAdapter.MyHolder>() {
class MyHolder(item: View): RecyclerView.ViewHolder(item) {
var img: ImageView? = null
var tx: TextView? = null;
init {
img = item.findViewById(R.id.img)
tx = item.findViewById(R.id.test)
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyHolder {
var view = LayoutInflater.from(parent.context).inflate(R.layout.item_test, parent, false)
//在这里动态的设置每个 item的宽度根据屏幕的大小来划分
view.layoutParams.width = getScreenWidth(parent.context) / 5
return MyHolder(view)
}
override fun getItemCount(): Int {
return data.size
}
override fun onBindViewHolder(holder: MyHolder, position: Int) {
holder.tx?.setText(data.get(position))
}
fun getScreenWidth(context: Context): Int{
val outMetrics = DisplayMetrics()
(context as Activity).windowManager.getDefaultDisplay().getMetrics(outMetrics)
return outMetrics.widthPixels
}
}
以上代码注释部分就是关键部分。
3、调用rv部分
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var list = ArrayList<String>()
for(i in 0..10){
list.add("数据"+i)
}
var adapter = MyAdapter(list)
var ma = GridLayoutManager(this, 2)
ma.orientation = GridLayoutManager.HORIZONTAL
recyycler.layoutManager = ma
recyycler.adapter = adapter
}
}
记录下实现方式吧,其他方式也可以实现,看自己业务部分来实现吧。
网友评论