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

标签 java android android-layout kotlin layout

我正在创建一个详细的 Activity ，我有一个弯曲的工具栏，在工具栏的中心我有一个圆形的 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在所有屏幕设备上手动覆盖相同的工具栏居中，现在我有这个:左(普通设备)右(小设备)
enter image description here
3.- 我在下面有一个容器，在我的小屏幕上没有正确显示，即使我添加了 android:windowSoftInputMode="adjustPan" /> .现在有两种方法，只需为容器添加一个 ScrollView 并忘记 Toolbar，并添加一个 ScrollBehaviour 以将此 Toolbar 转换为矩形，并将此 float 按钮移动到工具栏本身(或使其保持 float )。
我拥有的容器如下所示，没有滚动，我正在使用 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>
编辑
第一次迭代，我想像我发送的图像一样，但对所有设备都有响应，如果现在没有响应，那就是我在约束方面做错了。
第二次迭代，我想让这个曲线工具栏完全平坦，以防我到达带有覆盖图像的内容 block (我有所有 textViews、EditText)的折叠处。
请注意，我还必须在以工具栏为中心的图标下方显示 textView。
关于曲线工具栏，我认为在 View 顶部有一个 View ，并且在滚动它时会将这条曲线伪装成平坦的，但我对不同的方式持开放态度。

最佳答案

哇，好吧，所以一次有多个问题，这使得给出一个完整的答案变得更加困难。 (考虑将来为每个问题提出一个问题。我希望我猜对了哪个 View 代表问题的哪个部分。还要考虑更简洁的 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(单独 View ):
您可以将其约束到工具栏而不是父级。使用此设置，它将始终在工具栏内垂直居中，并由 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:
为了让它与工具栏很好地对齐，将它从下到下对齐并添加一个负边距，等于你的 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. ScrollView :
我仍然不能 100% 确定我是否理解您的问题。但据我所知，您可能没有正确设置 ScrollView 的属性。设置layout_height="wrap_content"使 ScrollView 与内容一样大。那么您显然无法滚动，因为内容与 ScrollView 具有相同的大小。将其更改为固定大小或 match_parent .这样 ScrollView 就绑定(bind)到您的屏幕上。而且里面的大内容是可以滚动浏览的。
4. 曲线转平面动画:
对于这样的动画，我通常使用 MotionLayout。对于您的，我可以考虑以下设置:
  • 一个固定的矩形 View ，代表折叠栏。
  • 下面的半圆形 View 表示弯曲部分。
  • 运动布局变化scaleY第二个 View 到 0(onSwipe 或 setProgress() 取决于您的滚动状态)，这使得它顺利消失。

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

    关于java - 具有图像叠加中心和滚动行为的工具栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64649924/

    上一篇：java - MongoDB Java 驱动程序 4.0+ 会重试 DBCursor.next() 吗？

    下一篇：java - Crashlytics发送到报告端点已禁用

    相关文章：

    Android:在不同的 fragment 中调用相同的方法

    android - 垂直对齐按钮和textview组件android

    安卓 : Orientation : Find out if a device supports orientations change

    java - 如何使用 GinFactoryModuleBuilder 从 Google Gin 获取扩展子类？

    java - Eclipse 资源包编辑器(表格格式)？

    android - 如何在 okhttp3 的 dagger 2 模块中检查互联网连接

    android - Firebase实时数据库GroupBy方法

    java - 从测试运行时 getResourceAsStream ("file") 在哪里搜索？

    java - 无法从传入的键中找到 HashMap 中的关联值

    java - 如何知道 RecyclerView 是否有足够的内容可以滚动？

    ©2024 IT工具网  联系我们