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

Posted 2023-04-18

技术标签:

【中文标题】具有图像叠加中心和滚动行为的工具栏【英文标题】：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_
    android:layout_>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        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_
        android:layout_
        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_
            android:layout_
            android:layout_margin="16dp"
            android:elevation="12dp"
            android:innerRadius="0dp"
            android:shape="rectangle"
            android:thicknessRatio="1.9"
            app:cardCornerRadius="40dp">

            <LinearLayout
                android:layout_
                android:layout_
                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_
                    android:layout_
                    android:padding="8dp">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/et_ex1"
                        android:layout_
                        android:layout_
                        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_
                    android:layout_
                    android:padding="8dp">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/et_ex2"
                    android:layout_
                    android:layout_
                    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_
                    android:layout_
                    android:padding="8dp"/>

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/et_ex3"
                    android:layout_
                    android:layout_
                    android:hint="SSID" />

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

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


                <LinearLayout
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:padding="8dp">

                    <androidx.appcompat.widget.AppCompatButton
                        android:id="@+id/btn_1"
                        android:layout_
                        android:layout_
                        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_
                        android:layout_
                        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_
                        android:layout_
                        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_
                    android:layout_
                    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:
    android:
    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 你能检查我的编辑吗？我想现在我有一个明确的解释了。 【参考方案1】：

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

1.右侧工具栏图标

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

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

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

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/iv_pew"
        android:layout_
        android:layout_
        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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    android:orientation="horizontal">

    <View
        android:layout_
        android:layout_
        android:weight="2"/>
    <View
        android:id="@+id/view"
        android:layout_
        android:weight="1"
        android:layout_
        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_
        android:layout_
        android:weight="2"/>
</LinearLayout>

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

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

scaleY

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

【讨论】：

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

以上是关于具有图像叠加中心和滚动行为的工具栏的主要内容，如果未能解决你的问题，请参考以下文章

Android：向上滚动时显示工具栏（向上拖动），向下滚动时隐藏（向下拖动）

中心控制器具有滚动视图时的 MMDrawerController 平移手势行为

具有活动和非活动区域的 UIScrollView

ContentView (SwiftUI) 的背景图像不是子视图，但具有正确的滚动行为

大工具栏导致奇怪的滚动行为

滚动时的粘性叠加图像