Android

Question

我想创建以下视图：

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

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>

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

<?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。您 post 中的图片适合横向，不适合纵向。考虑使用两种不同的方向。

NOTE: This example is lack of android:id. To use any adapter or set text programmatically you need add to every view id.

希望对您有所帮助

Android - 带有 Header 和附加文本的按钮

Android - Button with Header and additional text

android-layout

android-button

android-gridlayout

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