AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android 硬布局item的高级写法

2022-06-14 247
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android 硬布局item的高级写法

效果：

image.png

https://ucc.alicdn.com/images/user-upload-01/20201221184513539.gif#pic_center

这种布局应该是非常常见了，且写的比较多。

今天简单探讨一下效果图中上下两种布局的写法。

比较

image.png

可以看出，对比还是很明显的，精简到最后只有最开始的四分之一。

上部分

先看常规item写法，横向的LinearLayout嵌套三个子View，分别是

  • 左边的ImageView，
  • 中间的TextView，
  • 和右边的ImageView。

然后每个横向的LinearLayout之间添加一个高度1dp的View来作为横线。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/dp_15"
        android:layout_marginTop="@dimen/dp_20"
        android:layout_marginEnd="@dimen/dp_15"
        android:layout_marginBottom="@dimen/dp_20"
        android:background="@drawable/shape_bg_white"
        android:orientation="vertical">
        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="@dimen/dp_20">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:src="@mipmap/ic_agreement" />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dp_20"
                android:layout_weight="1"
                android:includeFontPadding="false"
                android:text="删除个人信息"
                android:textColor="@color/color_505258"
                android:textSize="@dimen/sp_14" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:src="@mipmap/ic_arrow_right" />
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginStart="@dimen/dp_50"
            android:background="@color/color_F6F6F6" />
        <LinearLayout
            android:id="@+id/ll2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="@dimen/dp_20">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:src="@mipmap/ic_agreement" />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dp_20"
                android:layout_weight="1"
                android:includeFontPadding="false"
                android:text="注销账户"
                android:textColor="@color/color_505258"
                android:textSize="@dimen/sp_14" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:src="@mipmap/ic_arrow_right" />
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginStart="@dimen/dp_50"
            android:background="@color/color_F6F6F6" />
        <LinearLayout
            android:id="@+id/ll3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="@dimen/dp_20">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:src="@mipmap/ic_agreement" />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dp_20"
                android:layout_weight="1"
                android:includeFontPadding="false"
                android:text="关于"
                android:textColor="@color/color_505258"
                android:textSize="@dimen/sp_14" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:src="@mipmap/ic_arrow_right" />
        </LinearLayout>
    </LinearLayout>

最外层LinearLayout的background：


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="@color/white" />
</shape>



可以看到嵌套虽然不深，但是已经拉的很长，不易阅读修改。


且 哪怕是一层的嵌套优化，也是优化，积少成多。


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/dp_15"
        android:layout_marginVertical="@dimen/dp_20" 
        android:background="@drawable/shape_bg_white"
        android:divider="@drawable/shape_divider_my"
        android:orientation="vertical"
        android:showDividers="middle">
        <TextView
            android:id="@+id/tv_delete_user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/dp_16"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:includeFontPadding="false"
            android:padding="@dimen/dp_20"
            android:text="删除个人信息"
            android:textColor="@color/color_505258"
            android:textSize="@dimen/sp_14"
            app:drawableEndCompat="@mipmap/ic_arrow_right"
            app:drawableStartCompat="@mipmap/ic_agreement" />
        <TextView
            android:id="@+id/tv_logout_user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/dp_16"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:includeFontPadding="false"
            android:padding="@dimen/dp_20"
            android:text="注销账户"
            android:textColor="@color/color_505258"
            android:textSize="@dimen/sp_14"
            app:drawableEndCompat="@mipmap/ic_arrow_right"
            app:drawableStartCompat="@mipmap/ic_agreement" />
        <TextView
            android:id="@+id/tv_about"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/dp_16"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:includeFontPadding="false"
            android:padding="@dimen/dp_20"
            android:text="关于"
            android:textColor="@color/color_505258"
            android:textSize="@dimen/sp_14"
            app:drawableEndCompat="@mipmap/ic_arrow_right"
            app:drawableStartCompat="@mipmap/ic_agreement" />
    </LinearLayout>

下部分

利用TextView的drawableStart和drawableEnd属性，来做简化，可以直接去掉左右两边的ImageView。


至于分割线，利用LinearLayout的divider和showDividers属性，写个shape，来做简化，去掉item之间做横线的View。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/dp_15"
        android:layout_marginVertical="@dimen/dp_20" 
        android:background="@drawable/shape_bg_white"
        android:divider="@drawable/shape_divider_my"
        android:orientation="vertical"
        android:showDividers="middle">
        <TextView
            android:id="@+id/tv_delete_user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/dp_16"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:includeFontPadding="false"
            android:padding="@dimen/dp_20"
            android:text="删除个人信息"
            android:textColor="@color/color_505258"
            android:textSize="@dimen/sp_14"
            app:drawableEndCompat="@mipmap/ic_arrow_right"
            app:drawableStartCompat="@mipmap/ic_agreement" />
        <TextView
            android:id="@+id/tv_logout_user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/dp_16"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:includeFontPadding="false"
            android:padding="@dimen/dp_20"
            android:text="注销账户"
            android:textColor="@color/color_505258"
            android:textSize="@dimen/sp_14"
            app:drawableEndCompat="@mipmap/ic_arrow_right"
            app:drawableStartCompat="@mipmap/ic_agreement" />
        <TextView
            android:id="@+id/tv_about"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/dp_16"
            android:foreground="?android:attr/selectableItemBackground"
            android:gravity="center_vertical"
            android:includeFontPadding="false"
            android:padding="@dimen/dp_20"
            android:text="关于"
            android:textColor="@color/color_505258"
            android:textSize="@dimen/sp_14"
            app:drawableEndCompat="@mipmap/ic_arrow_right"
            app:drawableStartCompat="@mipmap/ic_agreement" />
    </LinearLayout>

shape：


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="@dimen/dp_50" >
        <shape android:shape="rectangle">
            <solid android:color="@color/color_F6F6F6" />
            <size android:height="1dp" />
        </shape>
    </item>
</layer-list>

可以看到，层级减少了，行数也减少了，看起来清爽多了。

style简化

尽管如此，我们还是有可以简化的空间。

TextView有一些共同属性，可以抽取做一个style。


    <style name="MyTextView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:drawablePadding">@dimen/dp_16</item>
        <item name="android:foreground">?android:attr/selectableItemBackground</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:includeFontPadding">false</item>
        <item name="android:padding">@dimen/dp_20</item>
        <item name="android:textColor">@color/color_505258</item>
        <item name="android:textSize">@dimen/sp_14</item>
        <item name="drawableEndCompat">@mipmap/ic_arrow_right</item>
    </style>

再看简化后的代码

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/dp_15"
        android:layout_marginVertical="@dimen/dp_20" 
        android:background="@drawable/shape_bg_white"
        android:divider="@drawable/shape_divider_my"
        android:orientation="vertical"
        android:showDividers="middle">
        <TextView
            android:id="@+id/tv_delete_user"
            style="@style/MyTextView"
            android:text="删除个人信息"
            app:drawableStartCompat="@mipmap/ic_agreement" />
        <TextView
            android:id="@+id/tv_logout_user"
            style="@style/MyTextView"
            android:text="注销账户"
            app:drawableStartCompat="@mipmap/ic_agreement" />
        <TextView
            android:id="@+id/tv_about"
            style="@style/MyTextView"
            android:text="关于"
            app:drawableStartCompat="@mipmap/ic_agreement" />
    </LinearLayout>

更加精简了，只有简化前的一半，共同属性封装，只需要关注业务参数。

核心属性

LinearLayout

  • divider，分割线
  • showDividers，分割线的显示方式
  • layout_marginVertical，代替原来的layout_marginTop、layout_marginBottom
  • layout_marginHorizontal，代替原来的layout_marginStart、layout_marginEnd


题外话，LinearLayout的android:animateLayoutChanges=“true”，可以在其子view添加移除的时候添加简单的动画。


TextView

  • drawableEndCompat，即原来的drawableEnd，设置右边的drawable，其他方向同理
  • drawablePadding，drawable与文字之前的内边距
  • includeFontPadding，TextView默认top是有6dp的padding的，false可去掉，小细节
  • foreground，添加这个属性会有水波纹的点击效果，省了写selector

ok，到此结束，无聊的知识又增加了。


文章标签：
Android开发
关键词：
Android布局
Android item
Android高级
Android布局写法
yechaoa
目录
相关文章
游客syv66y3m2ksnc
|
4月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
游客syv66y3m2ksnc
194 0
君子世无双~
|
6月前
|
移动开发 监控 前端开发
构建高效Android应用：从优化布局到提升性能
【7月更文挑战第60天】在移动开发领域，一个流畅且响应迅速的应用程序是用户留存的关键。针对Android平台，开发者面临的挑战包括多样化的设备兼容性和性能优化。本文将深入探讨如何通过改进布局设计、内存管理和多线程处理来构建高效的Android应用。我们将剖析布局优化的细节，并讨论最新的Android性能提升策略，以帮助开发者创建更快速、更流畅的用户体验。
君子世无双~
89 10
stefanie燕
|
4月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
stefanie燕
246 0
阿迷创客
|
6月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制，ConstraintLayout 限制性布局，快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法，通过创建布局文件、设置控件约束等步骤，快速上手UI设计，并提供了一个TV Launcher界面布局的绘制示例。
阿迷创客
108 1
蓝色流星1000
|
7月前
|
Android开发 Kotlin
kotlin开发安卓app，如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应，自动处理底部导航栏的内边距，再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离，以完成全面的布局适配。示例代码采用Kotlin。
蓝色流星1000
180 15
Ant.Dream
|
6月前
|
XML 数据可视化 API
Android经典实战之约束布局ConstraintLayout的实用技巧和经验
ConstraintLayout是Android中一款强大的布局管理器，它通过视图间的约束轻松创建复杂灵活的界面。相较于传统布局，它提供更高灵活性与性能。基本用法涉及XML定义约束，如视图与父布局对齐。此外，它支持百分比尺寸、偏移量控制等高级功能，并配有ConstraintSet和编辑器辅助设计。合理运用可显著提高布局效率及性能。
Ant.Dream
319 0
。思索
|
6月前
|
Android开发
AutoX——当Android中clickable属性显示为false,实际可点击的布局如何处理
AutoX——当Android中clickable属性显示为false,实际可点击的布局如何处理
。思索
82 0
weixin_836869520
|
7月前
|
XML Android开发 数据安全/隐私保护
使用RelativeLayout布局Android界面
使用RelativeLayout布局Android界面
weixin_836869520
99 2
一笑轮回~
|
7月前
Android-自定义流布局标签
Android-自定义流布局标签
一笑轮回~
72 0
一笑轮回~
|
7月前
|
Android开发 索引
Android流布局实现筛选界面
Android流布局实现筛选界面
一笑轮回~
106 0

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题？
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk，打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 6
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 8
    【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
  • 9
    【01】仿站技术之python技术，看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 10
    Android学习自定义View(四)——继承控件(滑动时ListView的Item出现删除按钮)
  • 1
    构建高效Android应用：探究Kotlin协程的优势与实践
    49
  • 2
    构建高效的Android应用：Kotlin协程的优势与实践
    50
  • 3
    提升安卓应用性能的实用策略
    54
  • 4
    Android应用开发：实现自定义ViewPager2的完全指南
    534
  • 5
    构建高效Android应用：Kotlin的协程与Flow的使用
    155
  • 6
    Android Studio2021.1.1 高德地图api调用这一篇就够了
    118
  • 7
    Android编译的jar里面是dex
    111
  • 8
    构建高效安卓用户界面的实用指南
    75
  • 9
    构建高效安卓应用：内存优化策略详解
    89
  • 10
    构建高效Android应用：采用Kotlin与Jetpack的实践指南
    70

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型