约束布局在实践中看起来与 Android Studio 中的不同
Constraint layout in practice look different than in Android Studio
我正在尝试将我的视图放入 ConstraintLayout,但是像 button/textview 这样的每个视图在真实设备中看起来都与在 AndroidStudio 中不同。
检查它的外观:
in Android Studio
in real Device
看起来很可怕!我该如何解决?我该做什么 ?
我认为这是安排视图的最简单方法。
和我的 xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".activity.LoginActivity">
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.599" />
<EditText
android:id="@+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498" />
<EditText
android:id="@+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.63" />
<Button
android:id="@+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
ConstraintLayout
的想法是使用约束来相对于彼此定位视图。在您的情况下,您尝试限制每个视图与父视图的关系,然后使用偏差来定位视图,这就是一切看起来乱七八糟的原因。
下面是一个简单的示例 XML,它将让您了解如何使用约束来定位这些视图:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".activity.LoginActivity">
<EditText
android:id="@+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="@id/etLogin"
app:layout_constraintStart_toStartOf="@id/etLogin"
app:layout_constraintTop_toBottomOf="@id/etLogin" />
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
app:layout_constraintEnd_toStartOf="@id/btnDefault"
app:layout_constraintStart_toStartOf="@id/etLogin"
app:layout_constraintTop_toBottomOf="@id/etPassword" />
<Button
android:id="@+id/btnDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="default user"
app:layout_constraintEnd_toEndOf="@id/etLogin"
app:layout_constraintStart_toEndOf="@id/btnLogin"
app:layout_constraintTop_toBottomOf="@id/etPassword" />
</android.support.constraint.ConstraintLayout>
结果:
如果您想在视图之间添加一些间距,您可以尝试在它们之间添加一些边距。
我还没有检查语法,但像这样的东西可能会更好(将事物相互联系起来,而不是与屏幕边缘联系起来)。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".activity.LoginActivity">
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintEnd_toEndOf="@+id/etPassword"
app:layout_constraintStart_toEndOf="@+id/btnDefault"
app:layout_constraintTop_toBottomOf="@+id/etPassword"/>
<EditText
android:id="@+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="64dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="@+id/etLogin"
app:layout_constraintStart_toStartOf="@+id/etLogin"
app:layout_constraintTop_toBottomOf="@+id/etLogin" />
<Button
android:id="@+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintStart_toStartOf="@+id/etPassword"
app:layout_constraintEnd_toStartOf="@+id/btnLogin"
app:layout_constraintTop_toBottomOf="@+id/etPassword" />
</android.support.constraint.ConstraintLayout>
我正在尝试将我的视图放入 ConstraintLayout,但是像 button/textview 这样的每个视图在真实设备中看起来都与在 AndroidStudio 中不同。
检查它的外观:
in Android Studio
in real Device
看起来很可怕!我该如何解决?我该做什么 ? 我认为这是安排视图的最简单方法。
和我的 xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".activity.LoginActivity">
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.599" />
<EditText
android:id="@+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498" />
<EditText
android:id="@+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.63" />
<Button
android:id="@+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
ConstraintLayout
的想法是使用约束来相对于彼此定位视图。在您的情况下,您尝试限制每个视图与父视图的关系,然后使用偏差来定位视图,这就是一切看起来乱七八糟的原因。
下面是一个简单的示例 XML,它将让您了解如何使用约束来定位这些视图:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".activity.LoginActivity">
<EditText
android:id="@+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="@id/etLogin"
app:layout_constraintStart_toStartOf="@id/etLogin"
app:layout_constraintTop_toBottomOf="@id/etLogin" />
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
app:layout_constraintEnd_toStartOf="@id/btnDefault"
app:layout_constraintStart_toStartOf="@id/etLogin"
app:layout_constraintTop_toBottomOf="@id/etPassword" />
<Button
android:id="@+id/btnDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="default user"
app:layout_constraintEnd_toEndOf="@id/etLogin"
app:layout_constraintStart_toEndOf="@id/btnLogin"
app:layout_constraintTop_toBottomOf="@id/etPassword" />
</android.support.constraint.ConstraintLayout>
结果:
如果您想在视图之间添加一些间距,您可以尝试在它们之间添加一些边距。
我还没有检查语法,但像这样的东西可能会更好(将事物相互联系起来,而不是与屏幕边缘联系起来)。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".activity.LoginActivity">
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintEnd_toEndOf="@+id/etPassword"
app:layout_constraintStart_toEndOf="@+id/btnDefault"
app:layout_constraintTop_toBottomOf="@+id/etPassword"/>
<EditText
android:id="@+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="64dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="@+id/etLogin"
app:layout_constraintStart_toStartOf="@+id/etLogin"
app:layout_constraintTop_toBottomOf="@+id/etLogin" />
<Button
android:id="@+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintStart_toStartOf="@+id/etPassword"
app:layout_constraintEnd_toStartOf="@+id/btnLogin"
app:layout_constraintTop_toBottomOf="@+id/etPassword" />
</android.support.constraint.ConstraintLayout>