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

Question

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

Ski*_*ᴉʞS 6 java layout android android-layout kotlin

我正在创建一个详细的活动，我有一个弯曲的工具栏，在工具栏的中心我有一个圆形的 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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

编辑

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

关于曲线工具栏，我认为在视图顶部有一个视图，滚动时会将这条曲线伪装成平坦的，但我对不同的方式持开放态度。

Answer 1

Tob*_*obi 0

哇，好吧，所以同时有多个问题，这使得给出完整的答案变得更加困难。（考虑一下将来针对每个问题提出一个问题。我希望我能正确猜测哪个视图代表问题的哪一部分。还要考虑更简洁的 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

Run Code Online (Sandbox Code Playgroud)

选项 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" />

Run Code Online (Sandbox Code Playgroud)

2.居中的img：
为了使其与工具栏完美对齐，请将其从下到下对齐并添加等于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" />

Run Code Online (Sandbox Code Playgroud)

始终保持相同的“大小”更加棘手。在你的照片上它实际上具有相同的尺寸！从绝对的角度来看。所以你想要的是与屏幕相比相对相同的尺寸，而不是真正相同的尺寸。因此，设置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>

Run Code Online (Sandbox Code Playgroud)

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

4. 曲线转平面动画：
对于此类动画，我通常使用 MotionLayout。对于你的，我可以想到以下设置：

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

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

归档时间：	4 年，11 月前
查看次数：	178 次
最近记录：	4 年，11 月前