将 LinearLayout 翻译成 ConstraintLayout答案

【问题标题】：Translate LinearLayout into ConstraintLayout将 LinearLayout 翻译成 ConstraintLayout
【发布时间】：2018-05-28 23:17:34
【问题描述】：

我正在学习使用 ConstraintLayout，但我仍然无法习惯。您能否帮助我将使用 LinearLayout 制作的布局“翻译”成 ConstraintLayout，以帮助我了解如何使用它构建“有点”更复杂的布局？使用 LinearLayout 很简单，但使用约束构建这种布局似乎有问题。

<?xml version="1.0" encoding="utf-8"?>
<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_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.xxx.MainActivity">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:orientation="vertical">

        <EditText
            android:id="@+id/editText_main_overallTime"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:inputType="time" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Exercised done"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/textView_main_exercisesDone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="18sp"
            tools:text="3/15" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="center"
            android:text="Next exercise"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/textView_main_nextExerciseName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:gravity="center"
            android:textSize="18sp"
            tools:text="Paradiddle" />
    </LinearLayout>

</LinearLayout>

<View
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorPrimaryDark"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"/>

<TextView
    android:id="@+id/textView_main_currentExerciseName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="24sp"
    tools:text="Name of the excercise" />

<EditText
    android:id="@+id/editText_main_timeLeft"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="time" />

<ImageView
    android:id="@+id/imageView_main_exercise"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_weight="1"
    app:srcCompat="@mipmap/ic_launcher" />

<ImageButton
    android:id="@+id/imageButton_main_power"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:srcCompat="@android:drawable/ic_media_play" />

</LinearLayout>

【问题讨论】：

将该 XML 放入布局资源中。在 Android Studio 中打开它。右键单击“组件树”视图中的根 LinearLayout，然后从上下文菜单中选择“将 LinearLayout 转换为 ConstraintLayout”。 Android Studio 将尝试为您转换布局。另外，不要忘记将flams 添加到您的鼓基础应用程序中。 :-)

标签： android xml android-layout android-linearlayout android-constraintlayout

【解决方案1】：

您可以通过以下步骤使用 Android Studio 来达到预期的效果：

打开设计选项卡 -> 组件树 -> 右键单击 -> 将线性布局转换为约束布局

选择适当的选项并单击确定

检查 Text 选项卡，您的 Layout 现在将转换为 ConstraintLayout。

【讨论】：