如今的APP中,对用户的兴趣,爱好等还是比较看重的,因为可以通过这些来向用户推送个性化的内容,大部分的APP中,都会涉及类似下面的内容,来让用户选择,来了解用户的兴趣和习惯.
image.png

今天,我们就来以上面这张图为原型,来实现这样的功能界面

实现步骤

1.界面分析

看到这个界面,我们大概可以分为三部分,标题我们可以使用TextView就可以轻松实现,中间可以使用RecycleView的多条目展示来进行展示,而下面的提交按钮,则可以用Button来实现,话不多说,下面开始干吧!
image.png

2.界面布局搭建

首先将界面的大致布局编写出来

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

    <TextView
            android:layout_gravity="center_horizontal"
            android:textStyle="bold"
            android:layout_margin="20dp"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="选择您感兴趣的标签"/>

    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/label_list"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    <Button
            android:id="@+id/commit"
            android:layout_margin="20dp"
            android:textSize="16sp"
            android:textColor="#fff"
            android:background="@drawable/shape_commit_bg"
            android:text="提 交"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</LinearLayout>

image.png

3.多条目布局分析

通过对多条目的分析,我们可以得出,这个列表其实只有两种组成,一个TextView和RecycleView
image.png

4.条目布局的编写
image.png

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:orientation="vertical"
              android:padding="10dp"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

    <TextView
            android:text="男生推荐"
            android:textSize="16sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    <androidx.recyclerview.widget.RecyclerView
            android:padding="10dp"
            android:id="@+id/label"
            tools:listitem="@layout/item_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:spanCount="4"
            tools:layoutManager="GridLayoutManager"
            tools:itemCount="7"/>
</LinearLayout>

image.png

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_gravity="center"
              android:layout_margin="5dp"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">

    <TextView
            android:paddingBottom="3dp"
            android:paddingTop="3dp"
            android:paddingRight="10dp"
            android:paddingLeft="10dp"
            android:background="@drawable/shape_label_bg"
            android:text="玄幻"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
</LinearLayout>

5.主布局及适配器编写

class XingQuActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_xingqu)

        label_list.layoutManager = LinearLayoutManager(this)
        label_list.adapter = LabelAdapter()
    }

    class LabelAdapter : RecyclerView.Adapter<LabelAdapter.LabelViewHolder>() {
        lateinit var context: Context
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): LabelViewHolder {
            context = parent.context
            val view = LayoutInflater.from(context).inflate(R.layout.item_labels_layout, parent, false)
            return LabelViewHolder(view)
        }

        override fun getItemCount(): Int {
            return 3
        }

        override fun onBindViewHolder(holder: LabelViewHolder, position: Int) {
            holder.labelList.layoutManager = GridLayoutManager(context,4)
            holder.labelList.adapter = LabelsAdapter()
        }

        class LabelViewHolder(view: View) :RecyclerView.ViewHolder(view){
            val labelList = view.findViewById<RecyclerView>(R.id.label)
        }

        class LabelsAdapter : RecyclerView.Adapter<LabelsAdapter.LabelsViewHolder>() {
            override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): LabelsViewHolder {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.item_label, parent, false)
                return LabelsViewHolder(view)
            }

            override fun getItemCount(): Int {
                return 5
            }

            override fun onBindViewHolder(holder: LabelsViewHolder, position: Int) {
            }


            class LabelsViewHolder(view: View) :RecyclerView.ViewHolder(view){
            }

        }
    }
}

6.最终效果
这里只是实现功能,界面大家可以根据UI的设计图进行修改优化

Screenshot_2018-11-30-11-23-45-038_com.clb.js.png

微信公众号:Android日记

Android日记