安卓开发级联显示菜单-省市区显示举例

这篇具有很好参考价值的文章主要介绍了安卓开发级联显示菜单-省市区显示举例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

安卓开发级联显示菜单-省市区显示举例

问题背景

安卓日常开发过程,经常会有需要级联显示的场景,比如省市区显示等,或者各种组织结构级联显示,本文将介绍安卓开发过程实现级联显示的一种方案。
实现效果如下:
安卓开发级联显示菜单-省市区显示举例

问题分析

思路分析
考虑将要是的省、市、区设计成一种字典迭代结构,数据结构如下:

/**
 * 组织实体类
 */
class Organization(var name: String, var subList: MutableList<Organization>?)

这种数据结构,当前页面即可显示当前组织的子列表内容,比较方便。
话不多少,直接上代码:
(1)数据结构实体类

/**
 * 组织实体类
 */
class Organization(var name: String, var subList: MutableList<Organization>?)

(2)页面显示activity,代码如下:

package com.baorant.kotlinorganization

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.recyclerview.widget.LinearLayoutManager
import com.baorant.kotlinorganization.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var activityMainBinding: ActivityMainBinding
    private lateinit var topListAdapter : TopAdapter
    private val topList = mutableListOf<Organization>()

    private val organizationList = mutableListOf<Organization>()
    private lateinit var subOrgListAdapter : OrganizationAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        initView()

        initData()
    }

    private fun initData() {
        // 模拟省市区级联数据
        val organization111 = Organization("南关区", null);
        val organization112 = Organization("朝阳区", null);
        val organization113 = Organization("绿园区", null);
        val organization110List = ArrayList<Organization>()
        organization110List.add(organization111)
        organization110List.add(organization112)
        organization110List.add(organization113)

        val organization121 = Organization("丰满区", null);
        val organization122 = Organization("龙潭区", null);
        val organization123 = Organization("蛟河区", null);
        val organization120List = ArrayList<Organization>()
        organization120List.add(organization121)
        organization120List.add(organization122)
        organization120List.add(organization123)

        val organization11 = Organization("长春市", organization110List)
        var organization12 = Organization("吉林市", organization120List)

        val organization11List = ArrayList<Organization>()
        organization11List.add(organization11)
        organization11List.add(organization12)

        val organization1 = Organization("吉林省", organization11List);
        organizationList.add(organization1)
        subOrgListAdapter.notifyDataSetChanged()

    }

    private fun initView() {
        // 显示层级的横向列表
        val layoutManager = LinearLayoutManager(this)
        layoutManager.orientation = LinearLayoutManager.HORIZONTAL
        activityMainBinding.recyclerView.layoutManager = layoutManager
        topListAdapter = TopAdapter(topList)
        topListAdapter.setOnItemClickListener(object: OnItemClickListener{
            override fun onItemClick(view: View, position: Int) {
                val organization = topList[position]
                organizationList.clear()
                organization.subList?.let { organizationList.addAll(it) }
                subOrgListAdapter.notifyDataSetChanged()

                val temList = mutableListOf<Organization>()
                for (index in topList.indices) {
                    if (index <= position) {
                        temList.add(topList[index])
                    }
                }
                topList.clear()
                topList.addAll(temList)
                topListAdapter.notifyDataSetChanged()
            }
        })
        activityMainBinding.recyclerView.adapter = topListAdapter

        // 展示当前层级子项的纵向列表
        val subLayoutManager = LinearLayoutManager(this)
        activityMainBinding.subOrgList.layoutManager = subLayoutManager

        subOrgListAdapter = OrganizationAdapter(organizationList)
        subOrgListAdapter.setOnItemClickListener(object : OnItemClickListener {
            override fun onItemClick(view: View, position: Int) {
                val organization = organizationList[position]
                if (organization.subList == null) {
                    return
                }
                organizationList.clear()
                organization.subList?.let { organizationList.addAll(it) }
                subOrgListAdapter.notifyDataSetChanged()

                topList.add(organization)
                topListAdapter.notifyDataSetChanged()
            }
        })
        activityMainBinding.subOrgList.adapter = subOrgListAdapter
    }
}

(3)activity对应布局layout文件,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_alignParentTop="true">

        <LinearLayout
            android:id="@+id/ll_top_recycler"
            android:layout_width="match_parent"
            android:layout_height="42dp"
            android:background="@color/white"
            android:gravity="center_horizontal">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:scrollbars="none" />
        </LinearLayout>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/ll_top_recycler"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <!--subOrg-->
                <TextView
                    android:layout_marginTop="10dp"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:text="下级内容列表" />

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/subOrgList"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </ScrollView>
    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

(4)纵向子列表对应adapter,代码如下:

package com.baorant.kotlinorganization

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

/**
 * 纵向子列表对应adapter
 */
class OrganizationAdapter(var organizationList:List<Organization>) : RecyclerView.Adapter<OrganizationAdapter.ViewHolder>() {
    private lateinit var onItemClickListener: OnItemClickListener

    //在内部类里面获取到item里面的组件
    inner class ViewHolder(view:View):RecyclerView.ViewHolder(view){
        var newName:TextView=view.findViewById(R.id.name)
    }

    //重写的第一个方法,用来给制定加载那个类型的Recycler布局
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.list_item,parent,false)
        val viewHolder = ViewHolder(view)
        //单机事件
        viewHolder.itemView.setOnClickListener {
            val position = viewHolder.adapterPosition
            onItemClickListener.onItemClick(viewHolder.itemView, position)
        }

        return viewHolder
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val organization = organizationList[position]

        holder.newName.text = organization.name
    }

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

(5)上方横向列表对应adapter,代码如下:

package com.baorant.kotlinorganization

import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

/**
 * 上方横向列表对应adapter
 */
class TopAdapter(var organizationList:List<Organization>) : RecyclerView.Adapter<TopAdapter.ViewHolder>() {
    private lateinit var onItemClickListener: OnItemClickListener

    //在内部类里面获取到item里面的组件
    inner class ViewHolder(view:View):RecyclerView.ViewHolder(view){
        var newName:TextView=view.findViewById(R.id.name)
    }

    //重写的第一个方法,用来给制定加载那个类型的Recycler布局
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        Log.d("baorant", "onCreateViewHolder begin")
        val view = LayoutInflater.from(parent.context).inflate(R.layout.top_list_item,parent,false)
        val viewHolder = ViewHolder(view)
        // 点击事件
        viewHolder.itemView.setOnClickListener {
            val position = viewHolder.adapterPosition
            onItemClickListener.onItemClick(viewHolder.itemView, position)
        }

        return viewHolder
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        Log.d("baorant", "onBindViewHolder begin")
        val organization = organizationList[position]

        holder.newName.text = organization.name
    }

    override fun getItemCount(): Int {
        Log.d("baorant", "getItemCount begin")
        return organizationList.size
    }
}

(6)自定义接口,代码如下:

/**
 * 自定义接口,适配recyclerview点击事件adapter
 */
interface OnItemClickListener {
    fun onItemClick(view: View, position: Int)
}

问题总结

本文介绍了安卓开发过程实现级联显示的一种方案,有兴趣的同学可以进一步深入研究。文章来源地址https://www.toymoban.com/news/detail-501566.html

到了这里,关于安卓开发级联显示菜单-省市区显示举例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Echarts+高德地图,获取全国省市区,区域板块地图获取并高亮显示

    当用户选择省市区之后,可以看到对应区域的高亮显示。 如图: 之前用户选择的是江苏省,因此当前高亮显示的是江苏省地图板块,如果之前用户选择的是成都市,那么地图则会变成四川省的版图,高亮显示成都市,如下图: 可以继续下钻,选择区域高亮显示。 这里分享一个

    2024年02月16日
    浏览(49)
  • 支付宝实现省市区三级联动my.multiLevelSelect(附带省市区js数据)

    可以供用户选择所在位置、喜好位置。可用于根据用户所选位置给用户提供该位置的特色美食,附近的电影院,周边环境等。 视频 支付宝省市区三级联动 图片 点击按钮button,让其弹框。用户可在弹框中选择位置,选中后让其显示在第三个view标签里 select 。 provinceAndCity.js数

    2024年02月09日
    浏览(103)
  • 【uniapp】省市区下拉列表组件

    2024年04月11日
    浏览(47)
  • Vue------实现省市区三级联动

    本篇将用,vue框架实现省市区三级联动 三个下拉框,分别代表省、市、区 下面的任务就是,分别绑定 省、市、区三个下拉框: 点击省会出现所有的省份 点击对应的省份,市下拉框会对应出现对应的市 点击市会出现所有的市 点击对应的市,区下拉框会对应出现对应的区。

    2023年04月24日
    浏览(72)
  • 【uniapp+vue3+u-picker】获取中国省市区数据结构,省市区数据三级联动json文件完整版,已实现三级联动效果+省市区街道数据四级联动json文件完整版,已实现四级联动效果

    前言: 这个功能的实现,中间耽误了几天,在大佬的帮助下终于实现效果,匿名感谢xx大佬 要实现的效果如下: 1、首先需要获取省市区的数据,不考虑后端返数据,自己使用json文件的话,需要获取到完整的中国省市区数据 有个很不错的github源码可供参考,Administrative-divi

    2024年02月04日
    浏览(76)
  • vue实现省市区三级联动地址选择组件

    昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用。 效果如下:  下面就记录一下代码叭! 后面因为需要动态绑定,以及处理回显问题,就需要进

    2024年02月12日
    浏览(79)
  • 【JavaScript】原生js实现省市区联动效果

    😉博主:初映CY的前说(前端领域) ,📒本文核心:用原生js实现省市区联动 【前言】今日在复习省市县三级联动的时候,有点忘了原生的js应该怎么样处理省市县的联动,特此写下来再次复习下 1.获取相对应的DOM对象 2.写省市县接口获取到接口信息 3.写下change事件,有变化时调

    2023年04月24日
    浏览(54)
  • uniapp:H5定位当前省市区街道信息

    高德地图api,H5定位省市区街道信息。 由于uniapp的 uni.getLocation 在H5不能获取到省市区街道信息,所以这里使用高德的逆地理编码接口地址接口,通过传key和当前经纬度,获取到省市区街道数据。 这里需要注意的是: **高德地图API 申请的key,必须是WEB服务端** ,才可以使用逆

    2024年02月15日
    浏览(53)
  • Axure教程—省市区三级联动(中继器)

    本文将教大家如何用AXURE中中继器制作省市区三级联动 一、效果 预览地址:https://t6gmmh.axshare.com 二、功能 选择省份、出现相应的市区,选择市区出现相应的区或县 省市区三级联动效果 三、制作 1、省 拖入一个矩形,命名为省,文字设置为”请选择“,如图: 在其下面拖入

    2024年02月09日
    浏览(66)
  • 小程序通过经纬度获取省市区(高德地图)

    在app.js文件中引入高德地图的js文件 获取当前定位   amap-wx.130.js文件

    2024年02月08日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包