有没有办法在 XML 上创建它？ 2色盒答案

【问题标题】：Is there a way to create this on XML ? 2 colors box有没有办法在 XML 上创建它？ 2色盒
【发布时间】：2018-03-14 05:55:07
【问题描述】：

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

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

【问题讨论】：

可以通过简单的drawable Xml创建Check this
@ADM 这一点都不简单，也不是我需要的。我实际上需要创建 2 个组合在一起的盒子，它们之间没有中风。
在可绘制形状中使用角属性。并将半径仅设置为所需的角落，您就可以开始了。
@ADM 主要问题是边界，而不是角落。如何创建一个只有两个圆角和 3 个笔划的盒子
我认为将 ux 文档发布到堆栈溢出可能是非法的，因为这些文档通常是机密的。我想知道我们是否应该限制您的图片...

标签： android xml android-layout

【解决方案1】：

只需使用带有您需要嵌套的形状的 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>

【讨论】：

如果我选择这种方法，我怎样才能把一个textview放在蓝色部分，一个放在白色部分？
哦，更简单，我认为你需要将它们结合起来，哈哈。只需为您的 TextViews 使用 LinearLayout 水平，并为每个人提供适合您的圆角和颜色风格的可绘制背景。然后将背景设置为可绘制对象并调整样式以删除 Styles.xml 文件中的轮廓并将样式应用于 TextView 或 EditText 以避免出现轮廓。

【解决方案2】：

创建 2 个 XML 可绘制对象

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>

输出

【讨论】：

【解决方案3】：

在这里，您只需创建一个 xml 文件和可绘制文件来创建形状和边框。

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>

可绘制：- 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>

希望对你有所帮助。

【讨论】：