安卓布局实战头部栏

实现一个很多APP都有的头部栏 三个模块,左中右

1. 使用线性布局处理

思路:

  • 首先使用线性布局处理外部定好宽高match_parent,44dp
  • 由于通用标题栏是后端数据,那么长度不定,需要做超长省略,那就先定好前后两个元素的长宽,将中间元素宽度自适应layout_width="0dp",layout_weight="1"
  • 然后做个超长省略android:maxLines="1" android:ellipsize="end"
ini 复制代码
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
    tools:ignore="MissingConstraints">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/icon"
        android:layout_gravity="center"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="我的会员购买"
        android:maxLines="1"
        android:ellipsize="end"
        android:layout_gravity="center"
        android:textColor="#fff"
        />

    <TextView
        android:layout_marginLeft="40dp"
        android:layout_marginRight="20dp"
        android:layout_width="40dp"
        android:layout_height="20dp"
        android:text="账户"
        android:gravity="center"
        android:textColor="#ffffffff"
        android:layout_gravity="center"
        />
</LinearLayout>

2. 使用约束布局

思路:

  • 首先将前后两个使用约束布局约束靠边
  • 将第二个元素相当于第一个元素约束
  • 第二个元素layout_constraintWidth_max设置最大宽度
  • 做超长省略
  • 元素内部使用gravity:center
ini 复制代码
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="44dp">
    <ImageView
        android:id="@+id/reset"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/icon"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="我的会员购买"
        android:maxLines="1"
        android:ellipsize="end"
        android:textColor="#fff"
        app:layout_constraintWidth_max="300dp"
        app:layout_constraintLeft_toRightOf="@+id/reset"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <TextView
        android:layout_marginLeft="40dp"
        android:layout_marginRight="20dp"
        android:layout_width="40dp"
        android:layout_height="20dp"
        android:text="账户"
        android:gravity="center"
        android:textColor="#ffffffff"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

3. 使用相对布局

  • 相对布局注意使用layout_centerVertical用于居中,使用gravitylayout_gravity是没法做居中逻辑的, 这里提一句gravitylayout_gravity的区别,layout_gravity是我相对于父布局得位置,gravity是子布局相对于我的位置。
ini 复制代码
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
   >

    <ImageView
        android:id="@+id/reset"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:src="@drawable/icon"
        android:layout_centerVertical="true"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/reset"
        android:maxWidth="300dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="我的会员购买"
        android:textColor="#fff"
        android:layout_centerVertical="true"
        />

    <TextView
        android:layout_width="40dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="20dp"
        android:text="账户"
        android:textColor="#fff"
        android:layout_centerVertical="true"
        />
</RelativeLayout>

4. 使用Frame布局

主要是利用layout_gravity的功能处理

ini 复制代码
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
   >

    <ImageView
        android:id="@+id/reset"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/icon"
        android:layout_gravity="left|center_vertical"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="300dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="我的会员购买"
        android:textColor="#fff"
        android:layout_gravity="center"
        />

    <TextView
        android:layout_width="40dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="20dp"
        android:text="账户"
        android:textColor="#fff"
        android:layout_gravity="end|center_vertical"
        />
</FrameLayout>

5.总结

通过以上总结以下做垂直居中的布局来说 思路一父布局固定高度,子布局match_parent就采用gravity,子布局采用wrap_content,就采用layout_gravity

相关推荐
JH307323 分钟前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园39 分钟前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7272 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic2 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年2 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala2 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20082 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年3 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊3 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人