如何绘制内部单元格？

Question

游戏里有这么一张图4 photos 1 word

我需要为字母绘制单元格。样式的名字我不记得了，好像是Inner，当cell向内凹的时候。

事实是我没有使用 Photoshop 来绘图，而是使用 9-Patch。在浩瀚的互联网上没有找到（或者没有正确搜索到）。

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

Answer 1

你需要的都在这里。首先，您必须在值文件夹中的 colors.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

Answer 2

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

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。使用属性 android:background="@drawable/bg_rounded_corners".

将自定义 drawable 设置为每个 TextView

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.

的背景

希望对你有所帮助~

如何绘制内部单元格？

How to draw a inner cell?

photoshop

android

android-xml

android-drawable