Question

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

我的布局现在看起来像这样

    <?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这样的解决方案，它应该更通用，这将适用于大多数/所有设备。

Answer 1

将工具栏包裹在FrameLayout内，并在同一FrameLayout内添加图像。使用重力（中心水平）和一些上边缘（以dp为单位）定位图像。

如果要将元素放在另一个元素上，请使用FrameLayout（如果它包装片段的所有内容，则使用CoordinatorLayout）。

你的布局如下：

<?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>

另一种方法是将所有转换为约束布局，有多种解决方案。

Answer 2

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

ImageView覆盖工具栏的一半，另一半覆盖布局

2 个答案: