如何使按钮根据屏幕大小和/或字体大小在Android中改变位置

quhf5bfb  于 2023-05-05  发布在  Android
关注(0)|答案(2)|浏览(232)

bounty还有6天到期。回答此问题可获得+50声望奖励。Rodrigo Gontijo正在寻找这个问题的更详细的答案

我有一个简单的布局,其中有3个按钮需要实现(我已经使用ConstraintLayout实现了):

但是当我有一个小屏幕尺寸或/和用户设置字体为max时,两个大按钮内部的文本被切掉了。为了解决这个问题,设计团队希望我们在发生以下情况时采用这种布局:

为了实现这两个场景,我尝试使用约束布局中的Flow组件,但效果不佳。
你有什么建议来解决这个问题在同一个XML文件?

oknwwptz

oknwwptz1#

我不确定你是否可以在同一个文件中这样做,因为会有其他的约束。
因此,最合适的方法是在某个限定符的文件夹中创建单独的文件(例如,在layout/sw 360 dp目录或其他目录中)。屏幕宽度/高度或尺寸是否合适。并在那里定义带有此限定符的约束的布局。

utugiqy6

utugiqy62#

可以收缩/扩展的小部件将被添加到ConstraintLayoutFlow中,以调整它们的正确位置“如果它们可以适合单行,则在同一行/行中,或者如果它们足够扩展,则流向下一行/行”。
在布局中,您可以将两个大按钮添加到流中,并使用head小部件将这些按钮约束为垂直居中。
下面是一个demo:

<?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="wrap_content">

    <ImageView
        android:id="@+id/head_view"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="8dp"
        android:src="@drawable/ic_android_black_24dp"
        app:layout_constraintBottom_toBottomOf="@+id/view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view1" />

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        app:constraint_referenced_ids="view1,view2"
        app:flow_horizontalBias="0"
        app:flow_horizontalGap="10dp"
        app:flow_horizontalStyle="packed"
        app:flow_maxElementsWrap="2"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="chain"
        app:layout_constraintBottom_toBottomOf="@+id/head_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/head_view"
        app:layout_constraintTop_toTopOf="@+id/head_view" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6C08FB"
        android:padding="12dp"
        android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        android:textColor="@android:color/black"
        app:layout_constrainedWidth="true" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0BDAC6"
        android:padding="12dp"
        android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
        app:layout_constrainedWidth="true" />

</androidx.constraintlayout.widget.ConstraintLayout>

预览:

相关问题