安卓布局实战头部栏

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

1. 运用线性布局处理

思路：

• 首要运用线性布局处理外部定好宽高match_parent,44dp
• 因为通用标题栏是后端数据，那么长度不定，需要做超长省掉，那就先定好前后两个元素的长宽，将中心元素宽度自适应layout_width="0dp",layout_weight="1"
• 然后做个超长省掉android:maxLines="1" android:ellipsize="end"

<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

<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是子布局相对于我的方位。

<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的功能处理

<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