实现一个很多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
用于居中,使用gravity
和layout_gravity
是没法做居中逻辑的, 这里提一句gravity
和layout_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