具有图像叠加中心和滚动行为的工具栏答案

【问题标题】：Toolbar with Image overlay center and Scroll behaviour具有图像叠加中心和滚动行为的工具栏
【发布时间】：2021-02-15 08:50:20
【问题描述】：

我正在创建一个详细的活动，我有一个弯曲的工具栏，在工具栏的中心我有一个圆形的 ImageView，问题是在不同的屏幕上，图像没有居中。

我想要实现的是：

1.- 创建一个带有后退箭头按钮和右侧一个图标的工具栏

我把它定义为：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@drawable/curve_toolbar_2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:theme="@style/ThemeOverlay.AppCompat.Dark" />

    <View
        android:id="@+id/view"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:background="@drawable/circle_shape"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/toolbar"
        app:layout_constraintVertical_bias="0.09" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/iv_pew"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/ic_favorite"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/appCompatImageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@drawable/ic_favorite"
        app:layout_constraintBottom_toBottomOf="@+id/view"
        app:layout_constraintEnd_toEndOf="@+id/view"
        app:layout_constraintStart_toStartOf="@+id/view"
        app:layout_constraintTop_toTopOf="@+id/view" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_example"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Example"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="@+id/view"
        app:layout_constraintStart_toStartOf="@+id/view"
        app:layout_constraintTop_toBottomOf="@+id/view" />

    <ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        app:layout_conokstraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_example"
        app:layout_constraintVertical_bias="0.13">

        <androidx.cardview.widget.CardView
            android:id="@+id/item_card_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:elevation="12dp"
            android:innerRadius="0dp"
            android:shape="rectangle"
            android:thicknessRatio="1.9"
            app:cardCornerRadius="40dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="8dp">

                <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/ti_ex1"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/et_ex1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Ex1" />
                </com.google.android.material.textfield.TextInputLayout>
                <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/ti_ex2"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/et_ex2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Ex2" />
                </com.google.android.material.textfield.TextInputLayout>
                <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/ti_ex3"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp"/>

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/et_ex3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="SSID" />

                <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/ti_ex4"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp"
                    app:passwordToggleEnabled="true">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/et_ex4"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Ex4"
                        android:imeOptions="actionUnspecified"
                        android:inputType="textPassword" />
                </com.google.android.material.textfield.TextInputLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="8dp">

                    <androidx.appcompat.widget.AppCompatButton
                        android:id="@+id/btn_1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="4dp"
                        android:background="@drawable/button_activation_background"
                        android:text="Example1"
                        android:textColor="@drawable/button_selected_text_color" />

                    <androidx.appcompat.widget.AppCompatButton
                        android:id="@+id/btn_2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="4dp"
                        android:background="@drawable/button_activation_background"
                        android:checked="false"
                        android:text="Example2"
                        android:textColor="@drawable/button_selected_text_color" />

                    <androidx.appcompat.widget.AppCompatButton
                        android:id="@+id/btn_3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="4dp"
                        android:background="@drawable/button_activation_background"
                        android:checked="false"
                        android:text="Example3"
                        android:textColor="@drawable/button_selected_text_color" />
                </LinearLayout>


                <CheckBox
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:text="Whatever" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </ScrollView>

但我确定我做错了，因为我必须使用边距才能完全与左箭头一样，我已将其添加如下：

setSupportActionBar(binding.toolbar)
binding.toolbarCreateQr.setNavigationIcon(R.drawable.ic_arrow_back)
binding.toolbarCreateQr.setNavigationOnClickListener { finish() }

2.- 添加这个View 手动居中覆盖所有屏幕设备上相同的工具栏，现在我有这个：左（普通设备）右（小设备）

3.- 即使我添加了android:windowSoftInputMode="adjustPan" />，我的小屏幕下方和我的小屏幕上也没有正确显示。现在有两种方法，只需为容器添加一个 ScrollView 并忘记 Toolbar，并添加一个 ScrollBehaviour 以将此 Toolbar 转换为矩形，并将此浮动按钮移动到工具栏本身（或使其保持浮动）。

我的容器如下所示，没有滚动，我正在使用 CardView 使其圆润，看起来像一个表单模块，如果您认为还有另一种方法可以回答！

顺便说一下，我用于弯曲工具栏的可绘制资源是：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"/>
    </item>
    <item
        android:bottom="0dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>
</layer-list>

或者我也一直在使用它，但没有按预期工作。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="200.0"
    android:viewportHeight="100.0">
    <path
        android:fillColor="@color/colorPrimaryDark"
        android:pathData="M200,0H0v4.5h0v75.8h0c17.8,10.2 56,17.2 100.5,17.2c44.5,0 81.6,-7 99.5,-17.2h0V4.5h0V0z" />
</vector>

编辑

第一次迭代，我想像我发送的图像一样，但对所有设备都有响应，如果现在没有响应，那就是我在约束方面做错了。第二次迭代，我想让这个曲线工具栏完全平坦，以防我到达带有覆盖图像的内容块（我有所有 textViews、EditText）的折叠处。请注意，我还必须在以工具栏为中心的图标下方显示 textView。

关于曲线工具栏，我的想法是在视图顶部有一个视图，当滚动它时，这条曲线会变平，但我对不同的方式持开放态度。

【问题讨论】：

首先，在添加视图之前关闭工具栏`/>` 是不是错字？工具栏是一个视图组，您可以将视图添加到工具栏中。其次，您的容器约束如何？您能否添加一个小草图来展示从工具栏到容器的对齐方式应该如何？第三，您能否尝试更准确地解释您在滚动视图方面遇到的问题？
我把它们放在工具栏外面，我试着把它们放在工具栏里面，但是我不知道如何处理我在问题上添加的步骤
请添加包含工具栏和容器的布局
@Tobi 你能检查我的编辑吗？我想现在我有一个明确的解释了。

标签： java android android-layout kotlin layout

【解决方案1】：

哇，好的，所以一次有多个问题，这使得给出完整答案变得更加困难。（考虑将来为每个问题提出一个问题。我希望我猜对了哪个视图代表问题的哪一部分。还要考虑更简洁的 id 名称:)

1.右侧工具栏图标

这个完全封装在工具栏中，因此实际上可能是工具栏的一部分。

选项 1（在工具栏内）：
如果它在工具栏内，您可以很好地限制到parent

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    .... >

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/iv_pew"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginEnd="16dp"
        android:src="@drawable/ic_favorite"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.appcompat.widget.Toolbar

选项 2（单独视图）：
您可以将其约束到工具栏而不是父级。使用此设置，它将始终在工具栏中垂直居中，并且您可以通过marginEnd="16dp" 将其移动到您想要的任意位置。

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/iv_pew"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_marginEnd="16dp"
    android:src="@drawable/ic_favorite"
    app:layout_constraintEnd_toEndOf="@+id/toolbar"
    app:layout_constraintTop_toTopOf="@+id/toolbar"
    app:layout_constraintBottom_toBottomOf="@+id/toolbar" />

2。居中的图像：
为了让它与工具栏很好地对齐，将它从下到下对齐并添加一个负边距，等于你的 img 高度的一半：

<View
    android:id="@+id/view"
    android:layout_width="76dp"
    android:layout_height="76dp"
    android:layout_marginBottom="-38dp"
    android:background="@drawable/circle_shape"
    app:layout_constraintBottom_toBottomOf="@+id/toolbar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

始终保持相同的“大小”更加棘手。在你的照片上，它实际上大小相同！绝对视角。所以你想要的是与屏幕相比相对相同的尺寸，而不是真正相同的尺寸。所以设置width="76dp" 在不同尺寸的屏幕上看起来会有所不同。试着让它相对。

一个使其相对的选项可能是这样的（图像总是屏幕宽度的 1/5；改变权重会调整它）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <View
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:weight="2"/>
    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:weight="1"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@drawable/circle_shape"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <View
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:weight="2"/>
</LinearLayout>

3.滚动视图：
我仍然不能 100% 确定我是否理解您的问题。但据我所知，您可能没有正确设置滚动视图的属性。设置layout_height="wrap_content" 使滚动视图与内容一样大。那么您显然无法滚动，因为内容与滚动视图具有相同的大小。将其更改为固定大小或match_parent。这样滚动视图就绑定到您的屏幕上。而且里面的大内容是可以滚动浏览的。

4.弯曲到平面动画：
对于这样的动画，我通常使用 MotionLayout。对于您的，我可以考虑以下设置：

一个固定的矩形视图，代表折叠栏。
下方的半圆形视图表示弯曲部分。
第二个视图的运动布局将scaleY 更改为 0（onSwipe 或您的 setProgress()，具体取决于您的滚动状态），使其平滑消失。

示例： https://blog.stylingandroid.com/motionlayout-collapsing-toolbar-part-1/

【讨论】：

这是 android:layout_marginBottom="-38dp" 比添加约束好吗？......
为什么“优于”？你需要两者。有一个从下到下的约束将其与底部对齐，然后您可以将其向下移动负边距
我现在无法测试但您可以尝试将两侧限制在工具栏底部以使其居中：layout_constraintBottom_toBottomOf="@+id/toolbar" 和 layout_constraintTop_toBottomOf="@+id/toolbar"。那么你可能根本不需要边距。
那么崩溃呢？如何从椭圆形移动到平面？
您能否显示一张屏幕截图，说明它应该如何折叠？还有它应该在什么时候折叠？