2

I would like to accomplish the task shown in the two images below; more precisely, be able to "extend" somehow the TextInputLayout to the Switch so that it is included in the forementioned layout, along with the TextInputEditText.

All tries I have done so far have failed me.

The XML code for one item is listed below:

                        <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>

And here are the two images (image 1 is how it's currently presented and image 2 is what I would like to accomplish - see Linkedin). Though, not sure if it's possible to do this.

enter image description here

enter image description here

4

2 回答 2

1

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

布局.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>

边框.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>

在此处输入图像描述

于 2018-11-21T03:48:17.503 回答
0

您可以使用此示例布局实现该格式。

<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>

示例截图：

在此处输入图像描述

于 2018-11-21T09:24:07.363 回答