在 TextInputLayout 里面切换

Question

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

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

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

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

                        <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.support.design.widget.TextInputEditText
                                android:id="@+id/myprofile_twitter"
                                android:layout_width="match_parent"
                                android:textColor="@color/blue_grey_800"
                                android:layout_height="wrap_content"
                                android:hint="Twitter" />

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

                        <Switch
                            android:id="@+id/twitter_switch"
                            android:layout_width="45dp"
                            android:layout_height="30dp"
                            android:layout_marginEnd="10dp"
                            android:layout_gravity="center_vertical"/>

                    </LinearLayout>

这是两张图片（图片 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>

示例屏幕截图：

在 TextInputLayout 里面切换

Switch inside TextInputLayout

layout

android

textinputlayout