在TextInputLayout内部切换

Question

我想完成下面两张图所示的任务；更准确地说，能够以某种方式“扩展” TextInputLayout到Switch，以便它与TextInputEditText一起包含在上述布局中。

到目前为止，我所做的所有尝试都使我失败了。

以下列出了一项的XML代码：

FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
if (user != null) {
    // User is signed in
} else {
    // No user is signed in
}

这是两个图像（图像1是当前的显示方式，图像2是我想要完成的图像-请参见Linkedin）。不过，不确定是否可以这样做。

Answer 1

尽管这并不理想，但这是一种解决方法，可以使行为类似于您要查找的行为。您还可以为Switch更改或创建另一个边框，以匹配未聚焦的TextInputLayout状态。

layout.xml

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

        <android.support.design.widget.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/myprofile_twitter"
                android:layout_width="match_parent"
                android:textColor="@color/colorPrimaryDark"
                android:layout_height="wrap_content"
                android:hint="Twitter" />

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

        <Switch
            android:id="@+id/twitter_switch"
            android:background="@drawable/border"
            android:padding="18.5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="1.5dp"
            android:layout_marginStart="-19dp"
            android:layout_marginLeft="-19dp"
            android:layout_marginEnd="10dp"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="10dp" />

    </LinearLayout>

border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/colorAccent" />
        <corners android:topRightRadius="5dp" android:bottomRightRadius="5dp"/>

        <padding
            android:bottom="2dp"
            android:top="2dp"/>
    </shape>
</item>
<item android:right="10dp">
    <shape android:shape="rectangle" >
        <solid android:color="#fff" />

        <padding
            android:right="2dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <corners android:topRightRadius="5dp" android:bottomRightRadius="5dp"/>
        <solid android:color="#fff" />
    </shape>
</item>

Answer 2

您可以通过此示例布局实现该格式。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:layout_margin="10dp">


    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/background"
        android:inputType="text"
        android:layout_centerVertical="true"
        android:hint="LinkedIn"
        android:paddingLeft="5dp"/>

        <Switch
            android:id="@+id/twitter_switch"
            android:layout_width="45dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"/>

</RelativeLayout>

示例屏幕截图：