美文网首页
横向recyclerView均分显示

横向recyclerView均分显示

作者: 圈圈猫 | 来源:发表于2020-07-18 12:44 被阅读0次

    最近遇到一个项目,学习淘宝首页的做法,做一个标签页面,看了下样式 ,其实就是有一个横向的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
        }
    }
    

    记录下实现方式吧,其他方式也可以实现,看自己业务部分来实现吧。

    相关文章

      网友评论

          本文标题:横向recyclerView均分显示

          本文链接:https://www.haomeiwen.com/subject/wipxkktx.html