【问题标题】:Android layout design is not the same as the app when running on the mobileAndroid 布局设计与移动端运行时的应用不一样
【发布时间】:2019-12-22 16:13:26
【问题描述】:

我的布局设计在 Android Studio 预览版和我的手机(三星 s8)中不一样。 我正在尝试使两个按钮都水平对齐(即以相同的 x asix 开始和结束)。根据设计师的说法,它似乎按照我想要的方式对齐,但实际上(在设备中)它们不是。

Android Studio Designer 的屏幕截图:

三星 S8 截图:

我的 XML:

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Menu"
        android:textSize="50sp" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textMultiLine"
        android:text="Select a layout type to view an example. The onClick attribute of each button will call a method which executes setContentView to load the new layout"/>

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

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.59"
            android:text="Load ConstraintLayout"
            android:layout_marginLeft="8dp"
            android:textSize="20dp" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.41"
            android:text="Load"
            android:layout_marginRight="8dp"/>


    </LinearLayout>

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

        <TextView
            android:id="@+id/textView3"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.7"
            android:layout_gravity="center_vertical"
            android:textSize="20dp"
            android:text="Load TableLayout"
            android:layout_marginLeft="8dp"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"
            android:text="Load"
            android:layout_marginRight="8dp"/>

    </LinearLayout>

    <RatingBar
        android:id="@+id/ratingBar4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="75dp"/>


</LinearLayout>

有人能理解不一致的原因吗?

【问题讨论】:

  • 在两个线性布局中对文本视图(0.7)和按钮(0.3)使用相同的权重。您可以修改重量,但在两种布局中保持相同。我建议使用约束布局。
  • @Niraj,您的解决方案已成功。但只有在我将所有四个视图的 layout_width 属性设置为零之后。但是有没有合理的解释为什么设计师和移动端没有呈现相同的结果?

标签: android android-layout android-designer


【解决方案1】:

这是因为你使用边距和 dp,如果你赢了以百分比定义,我建议使用约束布局,请检查这个How to make ConstraintLayout work with percentage values?

【讨论】:

  • 非常感谢。但我正在练习 LinearLayout。谢谢
【解决方案2】:

你应该在 textview 中使用 layout_weight 来解决这个问题

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

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="Menu"
    android:textSize="50sp" />

<EditText
    android:id="@+id/editText3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textMultiLine"
    android:text="Select a layout type to view an example. The onClick attribute of each button will call a method which executes setContentView to load the new layout"/>

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

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="0.65"
        android:text="Load ConstraintLayout"
        android:layout_marginLeft="8dp"
        android:textSize="20dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.35"
        android:text="Load"
        android:layout_marginRight="8dp"/>


</LinearLayout>

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

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.65"
        android:layout_gravity="center_vertical"
        android:textSize="20dp"
        android:text="Load TableLayout"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.35"
        android:text="Load"
        android:layout_marginRight="8dp"/>

</LinearLayout>

<RatingBar
    android:id="@+id/ratingBar4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginTop="75dp"/>

【讨论】:

    【解决方案3】:

    如果您想使用android:layout_width,您应该将宽度设置为0dp,并在您的 2 LinearLayout 中使用相同的值

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Menu"
            android:textSize="50sp" />
    
        <EditText
            android:id="@+id/editText3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textMultiLine"
            android:text="Select a layout type to view an example. The onClick attribute of each button will call a method which executes setContentView to load the new layout"/>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="0.7"
                android:text="Load ConstraintLayout"
                android:layout_marginLeft="8dp"
                android:textSize="20dp" />
    
            <Button
                android:id="@+id/button1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:text="Load"
                android:layout_marginRight="8dp"/>
    
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:layout_gravity="center_vertical"
                android:textSize="20dp"
                android:text="Load TableLayout"
                android:layout_marginLeft="8dp"/>
    
            <Button
                android:id="@+id/button2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:text="Load"
                android:layout_marginRight="8dp"/>
    
        </LinearLayout>
    
        <RatingBar
            android:id="@+id/ratingBar4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="75dp"/>
    
    
    </LinearLayout>
    

    【讨论】:

    • 既然使用约束布局可以轻松完成,为什么还要使用如此复杂的布局。
    • @romaing,感谢您的回答。这真的很有效。但是您能解释一下我们在设计器中看到的与我们在移动端看到的不一致吗?
    • @Niraj,他没事 :) 。他回答了我的问题。我没有要求他给我找一个更好的布局,因为我现在是初学者,我正在练习 LinearLayout。不管怎么说,还是要谢谢你。如果您能说出为什么设计师和移动设备在对齐按钮方面不相似,我会很高兴
    • @Eitanos30 您应该为两种布局(TextView 和按钮)使用相同的权重,并且当您在水平线性布局中使用权重时layout_width 应该是"0dp" 检查link1, link2
    • @MohammedAlaa,谢谢。但我已经说过我改变了代码(你说的方式),它确实有效。但仍然没有答案的问题是,为什么移动端和设计器显示的图片不一样?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-25
    • 1970-01-01
    • 1970-01-01
    • 2022-09-30
    • 2020-09-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多