Question

中有这样的图片

我需要为字母绘制单元格。我不记得风格的名字，在我看来numpy，当细胞向内凹时。

事实是，我没有使用Inner进行绘制，并将其与Photoshop一起使用。在浩瀚的互联网上没有找到（或没有正确搜索）。

所以问题是如何在9-Patch中绘制这样的按钮或单元格？

Answer 1

1。为drawable黑色bg_rounded_corners.xml形状创建自定义rounded文件box，并将此drawable放入您的res/drawable {1}}文件夹。

<强> bg_rounded_corners.xml

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

    <!-- Bottom Shadow -->
    <item>

        <shape android:shape="rectangle" >

            <solid android:color="#2F2F3D" />
            <corners android:radius="4dp" />

        </shape>
    </item>

    <!-- Top Shadow -->
    <item android:bottom="2dp">

        <shape android:shape="rectangle" >

            <solid android:color="#000000" />
            <corners android:radius="4dp" />

        </shape>
    </item>

    <!-- Center Filled Color -->
    <item
        android:top="1dp"
        android:bottom="1.5dp">

        <shape android:shape="rectangle" >

            <gradient
                android:startColor="#160A0F"
                android:centerColor="#190B0F"
                android:endColor="#1B0C13"
                android:angle="270"/>

            <corners android:radius="4dp" />

        </shape>
    </item>
</layer-list>

2。使用LinearLayout方向使用Horizontal设计您的布局XML，并在TextView内放置所需数量的LinearLayout。使用属性drawable为每个TextView设置自定义android:background="@drawable/bg_rounded_corners"。

<强> activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:padding="16dp"
    android:background="#202531">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal">

        <TextView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:gravity="center"
            android:paddingBottom="2dp"
            android:textSize="22sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:text="H"
            android:background="@drawable/bg_rounded_corners"/>

        <TextView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginLeft="2dp"
            android:paddingBottom="2dp"
            android:gravity="center"
            android:textSize="22sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:text="E"
            android:background="@drawable/bg_rounded_corners"/>

        <TextView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginLeft="2dp"
            android:paddingBottom="2dp"
            android:gravity="center"
            android:textSize="22sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:text="L"
            android:background="@drawable/bg_rounded_corners"/>

        <TextView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginLeft="2dp"
            android:paddingBottom="2dp"
            android:gravity="center"
            android:textSize="22sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:text="L"
            android:background="@drawable/bg_rounded_corners"/>

        <TextView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginLeft="2dp"
            android:paddingBottom="2dp"
            android:gravity="center"
            android:textSize="22sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:text="O"
            android:background="@drawable/bg_rounded_corners"/>

    </LinearLayout>
</LinearLayout>

<强>输出：

仅供参考，我使用了颜色 #202531 作为background颜色。对于您的情况，您可以使用其他color或使用任何image作为根LinearLayout的背景。

希望这会有所帮助〜

Answer 2

你需要的就是这里。首先，您必须在values.xml的values.xml中定义这些颜色。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="darkBackground">#13161b</color>
    <color name="silveryBackground">#262d37</color>

</resources>

然后你需要在drawable文件夹中创建一个文件，例如layout_corners_dark.xml，并将此代码复制到此文件中。

    <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/darkBackground"/>
    <stroke
        android:width="0dip"/>
    <corners android:radius="15dip"/>
    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip"/>
</shape>

然后，您需要使用android:background

将layout_corners_dark.xml应用于您的activity_main.xml中添加按钮小部件

你的按钮xml就像这样

  <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="K"
            android:textColor="@color/whiteTextColor"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/layout_corners_dark"/>

使用父布局

中的这一行android:background="@color/silveryBackground"将银色背景应用于您的activity_main.xml

最后，您的activity_main.xml将如下所示。

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/silveryBackground"
    tools:context="com.example.user1.myapplication.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="K"
            android:textColor="@color/whiteTextColor"
            android:textSize="30sp"
            android:layout_margin="5dp"
            android:background="@drawable/layout_corners_dark"/>

        <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="H"
            android:layout_margin="5dp"
            android:textColor="@color/whiteTextColor"
            android:textSize="30sp"
                android:background="@drawable/layout_corners_dark"/>
        <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="N"
            android:layout_margin="5dp"
            android:textColor="@color/whiteTextColor"
            android:textSize="30sp"
            android:background="@drawable/layout_corners_dark"/>

</LinearLayout>
</LinearLayout>

这是此布局的屏幕截图。 See output here

如何绘制内部细胞？

2 个答案: