列表吸顶分组之按首字母分组国家选区号

news2025/11/4 17:55:52

列表粘性分组之按首字母分组国家选区号

Android原生版本

直接先看UI图，效果如下

在这里插入图片描述
本来看起来也不难，我就想着上面常用区号那块不动，下面的列表滑动就行，但IOS说他滑动的时候上面也滑上去了，好吧，这也行；但最终效果做出来后，IOS滑动后会有按照国家名称首字母进行粘性分组，好吧，为了提升自己，我也决定做得跟IOS一样，不说废话了，直接上代码
引入流布局控件

//流布局
api 'com.google.android:flexbox:1.0.0'

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/rl_content"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_area_code_pop_height"
    app:defaultColor="@color/white"
    app:topLeftRadius="@dimen/dp_10"
    app:topRightRadius="@dimen/dp_10"
    tools:background="@color/white">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center"
        android:paddingVertical="@dimen/dp_20"
        android:text="@string/sel_international_code"
        android:textColor="@color/col_3a3b3d"
        android:textSize="@dimen/sp_18" />

    <com.yunqu.quyun_res.widget.StatusLayout
        android:id="@+id/status"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        app:status="LOADING"
        app:toolsStatus="NORMAL">

        <ProgressBar
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:layout_status="LOADING" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_status="NORMAL">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rv_general"
                android:background="@color/white"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingHorizontal="@dimen/dp_20"
                android:paddingVertical="@dimen/dp_10"
                tools:itemCount="4"
                tools:listitem="@layout/item_general_code" />

        </FrameLayout>

    </com.yunqu.quyun_res.widget.StatusLayout>

    <View
        android:id="@+id/v_divider"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_0_5"
        android:layout_above="@id/tv_cancel"
        android:background="@color/col_e0e7ee" />

    <Button
        android:id="@+id/tv_cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:gravity="center"
        android:paddingVertical="@dimen/dp_17"
        android:text="@string/cancel"
        android:textColor="@color/col_3a3b3d"
        android:textSize="@dimen/sp_16"
        app:textPressedColor="@color/col_acb2b8" />

    <com.yunqu.quyun_res.widget.TenXuLetterBar
        android:id="@+id/txlb"
        android:layout_width="@dimen/dp_15"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:layout_alignBottom="@id/v_divider"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="@dimen/dp_70"
        android:layout_marginEnd="@dimen/dp_20"
        android:layout_marginBottom="@dimen/dp_10"
        android:minHeight="@dimen/dp_area_code_mh"
        app:txlb_item_background_def="@drawable/bg_letter_def"
        app:txlb_item_background_sel="@drawable/bg_letter_sel"
        app:txlb_item_text_color_def="@color/col_9b9b9b"
        app:txlb_item_text_color_sel="@color/white" />

    <TextView
        android:id="@+id/tv_letter"
        android:layout_width="@dimen/dp_55"
        android:layout_height="@dimen/dp_55"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:background="@drawable/bg_circle_80000000"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:visibility="gone"
        tools:visibility="visible" />

</RelativeLayout>

item_common_code.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/dp_10"
    tools:ignore="MissingDefaultResource">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_commons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:nestedScrollingEnabled="false"
        tools:itemCount="2"
        tools:listitem="@layout/item_common_code" />

</FrameLayout>

item_common_code_tip.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:ignore="MissingDefaultResource">

    <TextView
        android:id="@+id/tv_common_tip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/common_code"
        android:textColor="@color/col_9b9b9b"
        android:textSize="@dimen/sp_14" />

</FrameLayout>

item_general_code.xml

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingVertical="@dimen/dp_12"
        android:includeFontPadding="false"
        android:textColor="@color/col_111212"
        android:textSize="@dimen/sp_14"
        tools:text="中国大陆+86" />

</LinearLayout>

item_general_code_group.xml

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:ignore="MissingDefaultResource">

    <LinearLayout
        android:id="@+id/ll_letter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:ignore="UselessParent">

        <TextView
            android:id="@+id/tv_letter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/col_111212"
            android:textSize="@dimen/sp_14"
            android:textStyle="bold"
            tools:text="A" />

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_0_5"
            android:layout_marginTop="@dimen/dp_10"
            android:background="@color/col_e0e7ee" />

    </LinearLayout>

</LinearLayout>

其中com.yunqu.quyun_res.widget.StatusLayout控件是自定义的一个FrameLayout状态控件，这里就不放出来了，其实主要就是控制加载数据过程中的切换，根据逻辑用GONE和VISIBLE也是一样的

com.yunqu.quyun_res.widget.TenXuLetterBar控件代码如下

public class TenXuLetterBar extends View {
   
    private static final String TAG = "TenXuLetterBar";

    //    private final List<String> mLetters = new ArrayList<>();
    private final String[] mLettersHadWell = new String[]{
   "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"
            , "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"};
    private final String[] mLetters = new String[]{
   "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"
            , "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};

    private final Paint mPaint;

    private Drawable mItemBackgroundDef;
    private Drawable mItemBackgroundSel;
    private final int mItemTextColorDef;
    private final int mItemTextColorSel;
    private final boolean mNeedWell;
    //    private int mLetterWidth;

    private int mLetterIndex = -1;

    private OnLetterChangeListner onLetterChangeListener;//选中字母后的回调

    public TenXuLetterBar(Context context) {
   
        this(context, null);
    }

    public TenXuLetterBar(Context context, AttributeSet attrs) {
   
        this(context, attrs, 0);
    }

    public TenXuLetterBar(Context context, AttributeSet attrs, int defStyleAttr) {
   
        super(context, attrs, defStyleAttr);
        TypedArray typedArray =
                context.obtainStyledAttributes(attrs, R.styleable.TenXuLetterBar);

        mItemBackgroundDef = typedArray.getDrawable(

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1495796.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[CSAWQual 2019]Web_Unagi ---不会编程的崽

[CSAWQual 2019]Web_Unagi ---不会编程的崽

不知道刷了多少天了&#xff0c;又是一题关于xxe漏洞的。 web的习惯性操作。 1.功能点&cms 2.源代码 3.敏感文件泄露 当然这是我个人的习惯。这里进入界面后又upload功能&#xff0c;不会是传马吧。但是旁边给了上传文件格式。仅仅只看界面似乎没什么区别&#xff0c;源…
阅读更多...
RabbitMQ 基本介绍

RabbitMQ 基本介绍

RabbitMQ 基本介绍 消息模型 所有 MQ 产品从模型抽象上来说都是一样的过程&#xff1a; 消费者&#xff08;consumer&#xff09;订阅某个队列。生产者&#xff08;producer&#xff09;创建消息&#xff0c;然后发布到队列&#xff08;queue&#xff09;中&#xff0c;最后…
阅读更多...
软考66-上午题-【面向对象技术】-小结+杂题

软考66-上午题-【面向对象技术】-小结+杂题

一、杂题 真题1&#xff1a; 真题2&#xff1a; 真题4&#xff1a; 真题5&#xff1a; 真题6&#xff1a; 二、面向对象设计-总结 2-1、考题分析 选择题&#xff1a;11道&#xff08;11分&#xff09; 综合分析题&#xff1a;2道&#xff08;30分&#xff09; java程序设计…
阅读更多...
react native中使用Animated实现三张图片动态旋转效果

react native中使用Animated实现三张图片动态旋转效果

react native中使用Animated实现三张图片动态旋转效果 效果示例图示例代码 效果示例图 示例代码 import React, {useEffect, useRef} from react; import {Animated, StyleSheet, View} from react-native; import {pxToPd} from ../../common/js/device;const TestShowCard …
阅读更多...
etcd入门指南

etcd入门指南

目录 一.etcd的介绍和发展 1.什么是etcd 2.ecsd的发展历史 3.etcd特点 4.使用场景 5.关键字 6.工作原理 7.下载地址 二.将etcd部署到linux 1.etcd安装前介绍 2.安装etcd 1. 创建并切换到下载目录 ​编辑 2.下载或者解压 3切换至etcd根目录&#xff0c;运行查看命令l…
阅读更多...
【Docker】转存Docker容器镜像

【Docker】转存Docker容器镜像

目录 导出 拷贝到其他服务器 导入 启动被导入镜像镜像保存 加载镜像 运行测试 导出 把正在运行中的容器导出到一个文件压缩包&#xff0c;然后可以传输到其他服务器进行运行 #导出容器文件系统成为一个tar文件 docker export #导入tar文件&#xff0c;成为一个镜像 dock…
阅读更多...
探索c++——了解c++的魅力

探索c++——了解c++的魅力

前言&#xff1a;c是一门既面向对象又面向过程的语言。 不同于java纯粹的面向对象和c纯粹的面向过程。 造成c该特性的原因是c是由本贾尼大佬在c的基础上增添语法创建出来的一门新的语言。 它既兼容了c&#xff0c; 身具面向过程的特性。 又有本身的面向对象的特性。 面向对象和…
阅读更多...
golang中go build 后读取配置文件

golang中go build 后读取配置文件

golang打包后读取配置文件 在用go写代码的时候&#xff0c;为了好用经常使用go build 打包&#xff0c;如果我们用到了配置文件&#xff0c;就总是导致不能找到文件所在位置了出现bug&#xff0c;所以以下代码就解决了这个问题。 核心代码&#xff1a; file, err : exec.Look…
阅读更多...
【打工日常】Linux实现可回滚的回收站功能

【打工日常】Linux实现可回滚的回收站功能

1.为什么创建可回滚的回收站功能&#xff1f; 为了让运维人员可以有回旋的余地&#xff0c;但是也要保证可以清理不需要的文件。 2.涉及到的文件安全概念&#xff1f; Linux的文件安全概念主要涉及到文件权限和文件系统安全两个方面。 那什么是文件权限&#xff1f; 在Linux系统…
阅读更多...
第三百八十六回

第三百八十六回

文章目录 概念介绍使用方法示例代码 我们在上一章回中介绍了Snackbar Widget相关的内容,本章回中将介绍TimePickerDialog Widget.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在这里说的TimePickerDialog是一种弹出窗口&#xff0c;只不过窗口的内容固定显示…
阅读更多...
LeetCode142题：环形链表II（python3）

LeetCode142题：环形链表II（python3）

代码思路&#xff1a; 双指针的第一次相遇&#xff1a; 设两指针 fast&#xff0c;slow 指向链表头部 head 。 令 fast 每轮走 2 步&#xff0c;slow 每轮走 1 步。 fast 指针走过链表末端&#xff0c;说明链表无环&#xff0c;此时直接返回 null。 如果链表存在环&#xff0c;…
阅读更多...
点胶缺陷视觉检测都是怎么检测的？

点胶缺陷视觉检测都是怎么检测的？

点胶工艺是许多工业生产中不可或缺的一环&#xff0c;而点胶缺陷的存在往往直接影响到产品质量。为了提升点胶工艺的品质控制&#xff0c;点胶缺陷的视觉检测成为了一个重要的技术手段。 一、点胶缺陷的类型 点胶缺陷主要包括胶点大小不均、位置偏移、漏点、多点等。这些缺陷如…
阅读更多...
【Python爬虫实战】抓取省市级城市常务会议内容

【Python爬虫实战】抓取省市级城市常务会议内容

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…
阅读更多...
引入AndroidUSBCamera-master USB摄像头问题

引入AndroidUSBCamera-master USB摄像头问题

1&#xff0c;USB摄像头地址 GitHub - jiangdongguo/AndroidUSBCamera: &#x1f525;&#x1f525;&#x1f525;Flexible and useful UVC camera engine on Android platform, supporting multi-road cameras! 2&#xff0c;下载zip包 引入操作&#xff1a; 1&#xff0c;…
阅读更多...
Cloud-Sleuth分布式链路追踪(服务跟踪)

Cloud-Sleuth分布式链路追踪(服务跟踪)

简介 在微服务框架中,一个由客户端发起的请求在后端系统中会经过多个不同的服务节点调用来协同产生最后的请求结果,每一个前端请求都会形成一条复杂的分布式服务调用链路,链路中的任何一环出现高延时或错误都会引起整个请求最后的失败 GitHub - spring-cloud/spring-cloud-sl…
阅读更多...
第41期 | GPTSecurity周报

第41期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…
阅读更多...
政安晨：【深度学习处理实践】（一）—— 卷积神经网络入门

政安晨：【深度学习处理实践】（一）—— 卷积神经网络入门

深度学习的卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;简称CNN&#xff09;是一种广泛应用于图像识别、计算机视觉和自然语言处理等领域的深度学习模型。 CNN的主要特点是它能够自动从原始数据中学习特征表示&#xff0c;而无需手动特征工程。这是通过…
阅读更多...
leetcode 热题 100_合并区间

leetcode 热题 100_合并区间

题解一&#xff1a; 排序&#xff1a;先将区间按左边界从小到大进行排序&#xff0c;假设排序后a区间在b区间之前&#xff0c;根据a区间右边界和b区间左边界的大小判断是否重叠&#xff0c;如果重叠则将区间合并为一个。考虑到区间完全处于另一区间内的情况&#xff0c;合并时应…
阅读更多...
vue3的基本使用（1）

vue3的基本使用（1）

Vue3的基本使用&#xff08;1&#xff09; 初识vue31. vue3简介2. 性能提升3. 源码升级 Vue3的创建1. vue-cli创建2. vite创建 Composition API的区别&#xff08;组合式&#xff09;setup函数响应式数据1. ref响应式2. reactive响应式 toRefs与toRef简单介绍 初识vue3 1. vue…
阅读更多...
阿里云一键登录(号码认证服务)

阿里云一键登录(号码认证服务)

前言 用户登录原来的登录方式如下 1. 手机号验证码 2. 账号密码 运营觉得操作过于复杂, 因此想引入阿里自动登录的逻辑, 也就是号码认证服务,所以才有了这篇问文章 注: 本文只是记录Java端的实现, app端的请自行查询文档实现 官方资料 文档 : 什么是号码认证服务_号码认证服务(…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023