Question

有没有办法只用XML创建这两个框（当然在图标旁边）

包装盒周围有圆形和阴影，但里面分为两个部分，一个是粉红色背景，一个是白色背景（它们之间没有笔划）

Answer 1

创建2个XML drawables

<强> rect_colored.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">

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

</shape>

<强> rect_white.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:color="@color/colorPrimaryDark"
        android:width="2dp"/>
    <corners android:radius="5dp"/>
</shape>

正确定位适用广告

对于不同的根视图，这将有所不同。我使用ConstraintLayout来简化

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:background="@drawable/rect_white"
        android:id="@+id/frameLayout"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp">

        <!--Content here-->

    </FrameLayout>

    <FrameLayout
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="2dp"
        android:layout_marginTop="0dp"
        android:background="@drawable/rect_colored"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
        app:layout_constraintRight_toRightOf="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="@+id/frameLayout">

        <!--Content here-->

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

输出

Answer 2

只需使用具有嵌套所需形状的LayerList。可能需要稍微调整一下，但这很简单。如果愿意，您甚至可以在左侧图标中添加位图。只需制作图层，然后从侧面进行调整并处理角落。

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

    <item
        android:left="50dp">
        <shape
            android:shape="rectangle" >
            <solid android:color="#0000FF" />
            <corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
        </shape>
    </item>
    <item android:right="50dp">
        <shape
            android:shape="rectangle" >
            <solid android:color="#ffffff" />
            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
        </shape>
    </item>

</layer-list>

Answer 3

这里只需创建一个xml文件＆amp;可绘制文件以创建形状和边界。

<强> MyActivity.Xml

<LinearLayout
    android:id="@+id/ll_mobile_img"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp">

    <RelativeLayout
        android:id="@+id/rr_verification_code"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.3">

        <EditText
            android:id="@+id/et_verification_code"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/ractangle_mobile_white_border"
            android:ems="10"
            android:hint="Enter Code"
            android:drawableLeft="@mipmap/ic_launcher"
            android:imeOptions="actionGo"
            android:inputType="number|textAutoComplete"
            android:maxLength="6"
            android:paddingBottom="15dp"
            android:paddingLeft="10dp"
            android:paddingTop="16dp"
            android:singleLine="true"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white"
            android:textSize="18sp" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_country_img"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_verification_code_img"
            android:layout_width="38dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/globe"
            android:textColor="@color/blue_font_color"
            android:textSize="20dp" />
    </LinearLayout>
</LinearLayout>

Drawable： - ractangle_mobile_white_border.xml

[![<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape>
                    <gradient android:angle="360" android:endColor="@android:color/transparent" android:startColor="@android:color/transparent" />
                    <stroke android:width="1dp" android:color="@android:color/white" />
                    <corners android:bottomRightRadius="1dp" android:topRightRadius="1dp"/>
                    <padding android:bottom="3dp" android:left="0dp" android:right="3dp" android:top="3dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

希望这会对你有所帮助。

有没有办法在XML上创建它？ 2种颜色的盒子

3 个答案: