Question

我具有以下布局，但是我在一行中所做的按钮无法从一个屏幕正确显示到另一个屏幕：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:card_view="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margin="8dp">

    <Spinner/>
    <EditText/>

    <LinearLayout android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content">
            <Button
                    android:text="Update notes"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:id="@+id/button" android:layout_marginLeft="-8dp"/>
        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
                android:id="@+id/dialBtn"/>

        <ImageButton
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_mylocation"
                    android:id="@+id/locationBtn"/>
        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
                android:id="@+id/whasappBtn"/>

            <Button
            android:text="Set Alarm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:id="@+id/alarmBtn"/>

    </LinearLayout>

    <TextView />
    <TextView />
    <TextView />
    <Button />
    <ImageView />
</LinearLayout>

根据屏幕尺寸/分辨率，set alarm右侧的按钮不能正确显示：

正确的布局：

布局错误：

Answer 1

为视图使用重量

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">

<LinearLayout android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_weight="1"
        android:text="Update notes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:id="@+id/button" android:layout_marginLeft="-8dp"/>
    <ImageButton
        android:layout_weight="1.3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
        android:id="@+id/dialBtn"/>

    <ImageButton
        android:layout_weight="1.3"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:srcCompat="@android:drawable/ic_menu_mylocation"
        android:id="@+id/locationBtn"/>
    <ImageButton
        android:layout_weight="1.3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
        android:id="@+id/whasappBtn"/>

    <Button
        android:text="Set Alarm"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:id="@+id/alarmBtn"/>

</LinearLayout>

Answer 2

按钮位于LinearLayout内部，因此您可以使用android:layout_weight=""属性使它们按比例填充屏幕。

Answer 3

如果您想支持不同的屏幕尺寸，则只能使用ConstraintLayout，而布局的主要问题是，在使用这么多wrap_content时，您无法保证完全的响应度。

以下是一个响应式布局的示例，它看起来像您想要的样子：

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<Spinner
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:text="1"
    app:layout_constraintEnd_toStartOf="@+id/button"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline2" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="2"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button5"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="3"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="4"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="5"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button3"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Name"
    app:layout_constraintEnd_toStartOf="@+id/button"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button5" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="16dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView3" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="16dp"
    android:text="First teak"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/colorAccent"
    android:text="Save galery"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHeight_percent=".07"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView2" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".8" />


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".4" />

</androidx.constraintlayout.widget.ConstraintLayout>

它看起来像这样：（我正在从预览中添加图像以更好地理解约束布局）

请注意，对于视图的大小和位置，我使用了app:layout_constraintHeight_percent，app:layout_constraintWidth_percent和guidelines

Answer 4

根据我得到的答案和评论，我混合使用了： 1.减少同一行中的元素 2.使用相对布局

所以，我的代码现在是：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:card_view="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margin="8dp">

    <Spinner
            android:prompt="@string/task_status"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/status"
            android:spinnerMode="dropdown"/>

    <EditText
            android:layout_width="match_parent"
            android:layout_height="171dp"
            android:inputType="textMultiLine"
            android:gravity="start|top"
            android:ems="10"
            android:id="@+id/statusNote"/>

    <RelativeLayout android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content">
        <Button
                android:text="Update notes"
                android:layout_width="350px"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true" android:layout_marginEnd="-9dp"
                android:id="@+id/button"/>

        <Button
                android:text="Set Alarm"
                android:layout_width="350px"
                android:layout_height="wrap_content"
                android:id="@+id/alarmBtn" android:layout_alignParentEnd="true" android:layout_marginEnd="-9dp"/>



    </RelativeLayout>

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

        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
                android:layout_alignParentStart="true" android:layout_marginEnd="-9dp"
                android:id="@+id/dialBtn"/>

        <ImageButton
                android:layout_centerInParent="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_mylocation"
                android:id="@+id/locationBtn"/>
        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
                android:id="@+id/whasappBtn" android:layout_alignParentEnd="true" android:layout_marginEnd="-9dp"/>

    </RelativeLayout>

    <TextView
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
            android:text="Occupation"
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="244dp"/>


</LinearLayout>

如何将按钮对齐方式固定为在不同屏幕中具有相同外观

4 个答案: