将相对布局转换为线性布局

Posted

技术标签:

【中文标题】将相对布局转换为线性布局【英文标题】:Convert a Relative Layout to a Linear Layout 【发布时间】:2019-12-12 10:31:24 【问题描述】:

我正在开发一个 android 应用,对于图形部分,我正在使用有用的 Android Studio 编辑器。这意味着我正在使用边距命令移动对象,以使它们完全适合 Google Pixel C 屏幕。现在我在平板电脑上试用了该应用程序,当然,它不起作用。我读到我应该使用线性布局,但我认为我要转换的代码不遵守它的规则,因为我在每一行和不同位置都有元素。如何用线性布局表示它?这是代码,您可以看到它为每个元素指定了边距。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_
    android:layout_
    android:background="@drawable/background_main"
    android:scaleType = "centerCrop"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:layout_marginLeft="275dp"
        android:layout_marginTop="200dp"
        android:fontFamily="@font/kotta_one"
        android:text="Test del pensiero\n      divergente"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold"
        tools:layout_editor_absoluteX="78dp"
        tools:layout_editor_absoluteY="123dp" />

    <Button
        android:id="@+id/button_1"
        android:layout_
        android:layout_
        android:layout_marginLeft="400dp"
        android:layout_marginTop="480dp"
        android:background="@drawable/button_bg"
        android:text="@string/invioA"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        app:layout_constraintVertical_bias="0.771" />

    <Button
        android:id="@+id/button_2"
        android:layout_
        android:layout_
        android:layout_marginLeft="680dp"
        android:layout_marginTop="480dp"
        android:background="@drawable/button_bg"
        android:text="@string/invioB"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        app:layout_constraintVertical_bias="0.771" />

    <Button
        android:id="@+id/button_3"
        android:layout_
        android:layout_
        android:layout_marginLeft="40dp"
        android:layout_marginTop="22dp"
        android:background="@android:color/transparent"
        android:fontFamily="@font/kotta_one"
        android:text="Area\nDocenti"
        android:textAllCaps="false"
        android:textColor="#030000"
        android:textSize="24dp"
        app:layout_constraintVertical_bias="0.771" />

</RelativeLayout>

【问题讨论】:

为位置元素设置边距会破坏布局的目的,您应该告诉规则为您布局和布局位置项目。边距应该用于视图/元素之间的额外间距,而不是用于定位。查看以下链接,了解如何使用 ConstraintLayout 构建 UI:developer.android.com/training/constraint-layout 所需布局的屏幕截图会有所帮助 @afhamu 我添加了屏幕 您希望该应用同时适用于平板电脑和手机吗? @afhamu 仅限平板电脑 【参考方案1】:

好的,试试这个:

<LinearLayout 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_
android:layout_
android:background="@drawable/bg"
android:orientation="vertical">

<Button
    android:id="@+id/button_3"
    android:layout_
    android:layout_
    android:background="@android:color/transparent"
    android:text="Area\nDocenti"
    android:textAllCaps="false"
    android:textColor="#030000"
    android:textSize="24dp"
    app:layout_constraintVertical_bias="0.771" />


<RelativeLayout
    android:layout_
    android:layout_
    android:layout_gravity="center"
    android:layout_marginTop="200dp">

    <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:layout_marginBottom="30dp"
        android:fontFamily="@font/kotta_one"
        android:text="Test del pensiero\n      divergente"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_
        android:layout_
        android:layout_below="@+id/textView2"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button_1"
            android:layout_
            android:layout_
            android:layout_marginRight="40dp"
            android:background="@android:color/black"
            android:text="Protocollo A"
            android:textAllCaps="false"
            android:textColor="#FFFFFF"
            android:textSize="18dp"
            app:layout_constraintVertical_bias="0.771" />

        <Button
            android:id="@+id/button_2"
            android:layout_
            android:layout_
            android:layout_marginLeft="40dp"
            android:background="@android:color/black"
            android:text="Protocollo B"
            android:textAllCaps="false"
            android:textColor="#FFFFFF"
            android:textSize="18dp"
            app:layout_constraintVertical_bias="0.771" />

    </LinearLayout>
</RelativeLayout>

【讨论】:

【参考方案2】:

我认为你最好的选择是使用ConstraintLayout:read about it here

但对于 LinearLayout 来说有些快速和 hacky:

<LinearLayout
  android:layout_
  android:layout_
  android:orientation="vertical" >

    <Button
        android:id="@+id/button_3"
        android:layout_
        android:layout_
        android:layout_gravity="start"
        android:layout_margin_start="20dp"
        android:background="@android:color/transparent"
        android:fontFamily="@font/kotta_one"
        android:text="Area\nDocenti"
        android:textAllCaps="false"
        android:textColor="#030000"
        android:textSize="24dp"/>

   <LinearLayout
     android:layout_
     android:layout_
     android:orientation="vertical" 
     android:layout_gravity="centre"
     android:gravity="centre">
       <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:fontFamily="@font/kotta_one"
        android:text="Test del pensiero"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold"/>
      <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:fontFamily="@font/kotta_one"
        android:text="divergente"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold"/>

      <LinearLayout
         android:layout_
         android:layout_
         android:orientation="horizontal">

                 <Button
                   android:id="@+id/button_1"
                   android:layout_
                   android:layout_
                   android:background="@drawable/button_bg"
                   android:text="@string/invioA"
                   android:textAllCaps="false"
                   android:textColor="#FFFFFF"
                   android:textSize="18dp"/>

                <Button
                   android:id="@+id/button_2"
                   android:layout_
                   android:layout_
                   android:background="@drawable/button_bg"
                   android:text="@string/invioB"
                   android:textAllCaps="false"
                   android:textColor="#FFFFFF"
                   android:textSize="18dp"/>
      </LinearLayout>
   </LinearLayout>
</LinearLayout>

这可能并不完美,因为我只是徒手写的,但我认为它可以让您很好地了解您可以做什么。

【讨论】:

以上是关于将相对布局转换为线性布局的主要内容,如果未能解决你的问题,请参考以下文章

安卓游戏开发之对线性布局和相对布局的初步认识

LinearLayout (线性布局)的分析

安卓的相对布局与线性布局

android 线性布局 居右

第四章: 布局类组件 4.3 线性布局(Row和Column)

线性布局和相对布局