ImageView 一半覆盖Toolbar，另一半覆盖布局答案

【问题标题】：Half of ImageView overlay Toolbar, the other half overlay the layoutImageView 一半覆盖Toolbar，另一半覆盖布局
【发布时间】：2020-05-22 21:17:18
【问题描述】：

我希望 ImageView 的一半覆盖工具栏，另一半覆盖布局，就像下图一样，它应该适用于所有分辨率。我怎样才能实现它？

How it should look like

我现在的布局是这样的

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.fiekpasswordmanager.PasswordAddActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/add_activity_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"/>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
        android:id="@+id/name_of_website_textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:errorEnabled="true">

        <EditText
            android:id="@+id/et_name_of_website"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:hint="@string/name_of_website"
            android:inputType="text"
            android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
        android:id="@+id/website_address_textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:errorEnabled="true">

        <EditText
            android:id="@+id/et_website_address"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:hint="@string/website_address"
            android:inputType="text"
            android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
        android:id="@+id/username_textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:errorEnabled="true">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:hint="@string/username"
            android:inputType="text"
            android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
        android:id="@+id/password_textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:errorEnabled="true"
        app:passwordToggleEnabled="true">

        <EditText
            android:id="@+id/et_password"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:hint="@string/password"
            android:inputType="textPassword"
            android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <TextView
        android:id="@+id/et_generate_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:text="@string/generate_password"/>

</LinearLayout>

我不想要添加 martionTop 之类的解决方案，它应该更通用，适用于大多数/所有设备。

【问题讨论】：

这通常使用 FloatingActionButton 来完成，您可以搜索各种示例以获取更多代码示例。
使用CoordinatorLayout作为这个任务的父布局。
我已经用一些你可以使用的代码更新了我的答案。希望这可以帮助。这样做的方法不止一种。

标签： android

【解决方案1】：

将您的工具栏包装在 FrameLayout 中，并在同一个 FrameLayout 中添加图像。使用重力（水平中心）和顶部边距（以 dp 为单位）定位图像。

当您想将一个元素放置在另一个元素之上时，请使用 FrameLayout（或 CoordinatorLayout，如果它包装了 Fragment 的所有内容）。

您的布局已更新：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.example.fiekpasswordmanager.PasswordAddActivity">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
      android:id="@+id/add_activity_toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="@color/colorPrimary"/>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
      android:id="@+id/name_of_website_textinputlayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="60dp"
      app:errorEnabled="true">

      <EditText
        android:id="@+id/et_name_of_website"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:hint="@string/name_of_website"
        android:inputType="text"
        android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
      android:id="@+id/website_address_textinputlayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="10dp"
      app:errorEnabled="true">

      <EditText
        android:id="@+id/et_website_address"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:hint="@string/website_address"
        android:inputType="text"
        android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
      android:id="@+id/username_textinputlayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="10dp"
      app:errorEnabled="true">

      <EditText
        android:id="@+id/et_username"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:hint="@string/username"
        android:inputType="text"
        android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <com.example.fiekpasswordmanager.CustomTextInputLayout
      android:id="@+id/password_textinputlayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="10dp"
      app:errorEnabled="true"
      app:passwordToggleEnabled="true">

      <EditText
        android:id="@+id/et_password"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:hint="@string/password"
        android:inputType="textPassword"
        android:maxLines="1"/>
    </com.example.fiekpasswordmanager.CustomTextInputLayout>


    <TextView
      android:id="@+id/et_generate_password"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:layout_marginTop="15dp"
      android:text="@string/generate_password"/>

  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:gravity="center_horizontal">

    <android.support.v7.widget.AppCompatImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@mipmap/ic_launcher"/>

  </LinearLayout>

</FrameLayout>

另一种方法是全部转换为约束布局，解决方案不止一种。

【讨论】：

【解决方案2】：

您可以尝试使用RelativeLayout 作为根布局，并将ImageView 放在Toolbar 下方，然后将margin_top 设置为“负一半图像高度”。

【讨论】：