Question

我想创建以下视图：

我选择了一个GridLayout并在其中添加了4个按钮。现在每个Button都应该有一个标题和一个附加文本（就像我的概念）。实现这一目标的最佳方法是什么？

Answer 1

这是我对此按钮的解决方案

这是我的activity_main.xml文件内容：

<!-- THIS IS YOUR SINGLE BUTTON-->
<!-- It has three parts-->
<LinearLayout
    android:id="@+id/item"
    android:layout_width="300dp"
    android:layout_height="100dp"
    android:background="#FFFFFFFF"
    android:gravity="center_horizontal"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">

    <!-- PART I.-->
    <!-- THIS IS YOUR BAR ON THE LEFT-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:background="@color/colorAccent"/>

    <!-- PART II.-->
    <!-- THIS IS YOUR MIDDLE WITH TEXTS AND LINE-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="6"

        android:orientation="vertical">

        <!-- I thought that line has the same margin as strings-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:background="#FFFFFFFF"
            android:layout_weight="2"
            android:orientation="horizontal">

            <!-- ViewGroup with texts-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_marginTop="5dp"
                android:layout_marginRight="10dp"
                android:background="#FFFFFFFF"
                android:orientation="vertical">

                <!-- First is fitted with triangle - I think -->
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:rotation="90.0"
                        android:src="@drawable/triangle"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Trainingsmodus"
                    android:textStyle="bold"
                    android:textAppearance="?android:attr/textAppearanceMedium"/>
                </LinearLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Trainiere nach Themen sortiert"
                    android:paddingLeft="20dp"
                    android:textAppearance="?android:attr/textAppearanceSmall"/>/>

            </LinearLayout>

            <!-- nothing more than single vertical line-->
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#F1999999"></View>
        </LinearLayout>

    </LinearLayout>

    <!-- PART III.-->
    <!--LET'S SAY BUTTON ON THE RIGHT-->
    <TextView
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text=">"
        android:textAlignment="gravity"
        android:textSize="40dp"
        android:textStyle="bold"
        android:textColor="@color/colorAccent"
        android:layout_weight="6"/>

</LinearLayout>

在项目目录drawable内的triangle.xml文件夹中创建并输入：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-40%"
            android:pivotY="87%" >
            <shape
                android:shape="rectangle" >
                <solid
                    android:color="@color/colorAccent" />
            </shape>
        </rotate>
    </item>
</layer-list>

这是如何制作上述按钮的唯一示例。玩它，制作你的GridView。你的帖子中的图片适合风景，不适合肖像。考虑使用两种不同的方向。

注意：此示例缺少android:id。要以编程方式使用任何适配器或设置文本，您需要添加到每个视图id。

希望有所帮助

Android - 带标题和附加文本的按钮

1 个答案:

这是我对此按钮的解决方案