使用 android 布局答案

【问题标题】：Working with android layout使用 android 布局
【发布时间】：2018-06-19 00:57:46
【问题描述】：

我是 android 新手，定位元素与 web 不同。
所以我想做的是：

Login: ______  
Password: _____

通过将linearLayout设置为垂直方向，我能得到的是：

Login:  
__  
Password:  
__

或者这个，水平方向：

Login:_____Password:_____

我怎样才能混合它并达到我需要的效果？

当前代码：

    <?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="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/mainActivity"
        tools:context=".MainActivity">

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Login:"
        android:textSize="14pt"/>

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:id="@+id/loginText"/>

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Senha:"
        android:textSize="14pt"/>  

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:id="@+id/passText"/>


    </LinearLayout>

【问题讨论】：

移动设备的一个好习惯是使用文本提示developer.android.com/reference/android/widget/…

标签： android android-layout android-linearlayout

【解决方案1】：

嵌套您的线性布局。有一个垂直的顶级线性布局，内部有 2 个水平线性布局，每个布局执行一行输出。

【讨论】：

非常正常。布局中的布局是常见的，并且对于许多设计来说都是必需的。如果你走得太深，那是个坏主意，但 2 或 3 级就可以了。如果您发现自己在 5 或 6 岁，您可能想换个方向。

【解决方案2】：

首先你应该使用sp 而不是pt 来代替android:textSize。

您可以使用嵌套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:id="@+id/mainActivity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Login:"
            android:textSize="14pt" />

        <EditText
            android:id="@+id/loginText"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="Senha:"
            android:textSize="14pt" />

        <EditText
            android:id="@+id/passText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

不过，一个好的做法是使用 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:id="@+id/mainActivity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login:"
        android:textSize="14pt"
        app:layout_constraintBottom_toBottomOf="@+id/loginText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/loginText"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="@+id/textView2"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Senha:"
        android:textSize="14pt"
        app:layout_constraintBaseline_toBaselineOf="@+id/passText"
        app:layout_constraintStart_toStartOf="@+id/textView" />

    <EditText
        android:id="@+id/passText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2" />


</android.support.constraint.ConstraintLayout>

【讨论】：

最好的做法是使用 ConstraintLayout。也使用sp 而不是pt 代替textSize
@PlayHardGoPro 检查更新的答案

【解决方案3】：

试试这个：

您可以为每个块使用线性布局，例如文本视图和编辑文本并设置线性布局方向水平

<?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:id="@+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Username"
        android:paddingLeft="10dp"
        android:textColor="@color/black"
        android:textSize="18dp" />

    <EditText
        android:id="@+id/user_et"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
</LinearLayout>

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Password:"
        android:paddingLeft="10dp"
        android:textSize="18dp"
        android:textColor="@color/black"/>

    <EditText
        android:id="@+id/password_et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:background="@color/black"
    android:textColor="@color/white"
    android:text="Login"
    android:textSize="18dp"
    android:textAllCaps="false"
    android:layout_marginTop="10dp"/>

【讨论】：

【解决方案4】：

最好的做法是使用ConstraintLayout 来减少layout hierarchy。否则，您可以使用嵌套的LinearLayout。

【讨论】：

【解决方案5】：

通常在移动设备上您不需要像在网络中那样使用标签。 setHint on EditText 应该足以让您的用户清楚地了解字段的用途。

<?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="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/mainActivity"
    tools:context=".MainActivity">

    <EditText
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:hint="Username"
            android:inputType="textEmailAddress"
            android:id="@+id/usernameEditText"/>

    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:hint="Password"
            android:inputType="textPassword"
            android:id="@+id/passwordEditText"/>

</LinearLayout>

如果您希望标签之类的内容始终存在，您也可以使用材料文本字段，https://material.io/design/components/text-fields.html

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/usernameEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

</android.support.design.widget.TextInputLayout>

【讨论】：