自定义控件-条状、块状菜单

简介:
好久来这里了,分享一个demo源码。
使用场景
效果图


相信很多移动端开发者都很熟悉了,通常我们首先想到的就是使用 RelativeLayout 方式处理,例如:
<RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:onClick="onClickToMain"
        >
        <ImageView
            android:layout_width="@dimen/icon_len"
            android:layout_height="@dimen/icon_len"
            android:src="@drawable/selector_icon_main"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/index"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            android:layout_marginBottom="3dp"
            android:textColor="@color/selector_common_icon_text"
            android:textSize="@dimen/common_content_text_small"
            />
    </RelativeLayout>

我们写一个还好,当你重复写三个以上这样的控件时你可能一直在重复复制粘贴的动作,而且你的布局层次会变得复杂而冗长。相信有追求的猿猿都会想到自定义了,于是就出现了这个开源 demo。
简单使用1)SingleBar Style(根据需要指定右边带尖角)
效果图:

代码:
<com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
                android:layout_width="match_parent"
                android:background="@color/commonDivBgWhite"
                android:layout_marginTop="20dp"
                android:layout_height="62dp"
                app:mainIcon="@mipmap/icon_mine"
                app:IconMargin="15dp"
                app:mainIconSize="24dp"
                app:topBorder="0.5dp"
                app:bottomBorder="0.5dp"
                app:text="@string/butler"
                app:textSize="@dimen/common_content_text"
                app:textMargin="10dp"
                app:extendIcon="@mipmap/arrow_right_gray"
                />

这样是不是简洁多了。
2)BarGroup Style
效果图:

代码:
<com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
                android:layout_width="match_parent"
                android:background="@color/commonDivBgWhite"
                android:layout_marginTop="10dp"
                android:layout_height="62dp"
                app:mainIcon="@mipmap/icon_service"
                app:IconMargin="15dp"
                app:mainIconSize="24dp"
                app:topBorder="0.5dp"
                app:bottomBorder="0.5dp"
                app:text="@string/service"
                app:textSize="@dimen/common_content_text"
                app:textMargin="10dp"
                app:extendIcon="@mipmap/arrow_right_gray"
                app:bottomBorderStartFromText="true"
                />
  <com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
                android:layout_width="match_parent"
                android:background="@color/commonDivBgWhite"
                android:layout_height="62dp"
                app:mainIcon="@mipmap/icon_home"
                app:IconMargin="15dp"
                app:mainIconSize="24dp"
                app:bottomBorder="0.5dp"
                app:text="@string/shake_sopen_door"
                app:textSize="@dimen/common_content_text"
                app:textMargin="10dp"
                app:extendIcon="@mipmap/arrow_right_gray"
                />         

简单吧,实际上就是两个SingleBar叠在一起,然后你指定一下边界框就行了(第一个 SingleBar 的下边框指定和文本对齐,第二个  SingleBar 不设置上边框)。

3)Block Style
效果图:

代码:

   
<com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        app:mainIcon="@mipmap/icon_butler_pressed"
                        app:IconMargin="15dp"
                        app:topBorder="2dp"
                        app:text="@string/butler"
                        app:textSize="@dimen/common_content_text"
                        app:textColor="@color/common"
                        app:extendIcon="@mipmap/arrow_right_gray"
                        app:textMargin="10dp"
                        app:mainIconSize="60dp"
                        app:vertical="true"
                        />
                      

这个使用就更简单了,细心的你一定发现了,只需多设置一个属性:app:vertical="true",从儿实现来图标文本的纵向排列。

4) 没有了,下载源码使用吧。
主要介绍demo中自定义控件的使用,个人不喜欢上了就说一堆技术实现细节,先下载demo跑起来看看效果,再去研究实现细节,这比较符合人的认知逻辑。 源码下载地址: https://github.com/liuguangli/BlockIconTextMenu
ps:作为码农,你如果还没有GitHub账号赶紧好好反省下吧。文章首发: http://www.liuguangli.win/archives/96


目录
相关文章
|
19天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
10天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
13天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
1124 39
|
13天前
|
机器学习/深度学习 人工智能 搜索推荐
万字长文深度解析最新Deep Research技术:前沿架构、核心技术与未来展望
近期发生了什么自 2025 年 2 月 OpenAI 正式发布Deep Research以来,深度研究/深度搜索(Deep Research / Deep Search)正在成为信息检索与知识工作的全新范式:系统以多步推理驱动大规模联网检索、跨源证据。
893 57
|
11天前
|
文字识别 测试技术 开发者
Qwen3-VL新成员 2B、32B来啦!更适合开发者体质
Qwen3-VL家族重磅推出2B与32B双版本,轻量高效与超强推理兼备,一模型通吃多模态与纯文本任务!
741 11
|
4天前
|
人工智能 数据可视化 Java
Spring AI Alibaba、Dify、LangGraph 与 LangChain 综合对比分析报告
本报告对比Spring AI Alibaba、Dify、LangGraph与LangChain四大AI开发框架,涵盖架构、性能、生态及适用场景。数据截至2025年10月,基于公开资料分析,实际发展可能随技术演进调整。
327 4