android - 在可点击的 ImageView 下方添加文本

Question

我想在可点击的 ImageView 下方添加文本。这就像我想命名 ImageView 但我无法放置我想要的文本。 ScrollView 中可点击的 ImageView。当我试图在图像正下方添加 TextView 时，它弄乱了我的 ScrollView

这是我想要制作的示例图片

这是我的xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    tools:context=".Huruf">


    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:weightSum="10"
        android:background="#00bedc"
        android:layout_height="wrap_content">


        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_gravity="center"
            android:background="#fe8f2f"
            android:padding="20dp"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/huruf_close"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/back_white"
                android:layout_gravity="left" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="30dp"
                android:text="@string/huruf"
                android:textColor="#FFFFFF" />


        </LinearLayout>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_marginBottom="15dp"
            android:layout_height="wrap_content">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="4sp"
            android:layout_weight="8"
            android:alignmentMode="alignBounds"
            android:columnCount="3"
            android:columnOrderPreserved="false"
            android:useDefaultMargins="true"
            >

            <ImageView
                android:id="@+id/a"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/aa"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/b"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/bb"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/c"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/cc"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/d"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/dd"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/e"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/ee"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/f"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/ff"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/g"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/gg"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/h"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/hh"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/i"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/ii"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/j"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/jj"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/k"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/kk"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/l"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/ll"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/m"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/mm"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/n"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/nn"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/o"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/oo"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/p"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/pp"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/q"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/qq"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/r"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/rr"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/s"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/ss"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/t"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/tt"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/u"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/uu"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/v"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/vv"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/w"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/ww"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/x"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/xx"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/y"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/yy"
                android:layout_marginBottom="15dp"
                />

            <ImageView
                android:id="@+id/z"
                android:layout_height="100dp"
                android:layout_width="0dp"
                android:layout_columnWeight="1"
                android:layout_gravity="fill_horizontal"
                android:src="@drawable/zz"
                android:layout_marginBottom="15dp"
                />

        </GridLayout>
        </ScrollView>
    </LinearLayout>
</RelativeLayout>

附言如果解释的不是很清楚，真的很抱歉，写下我的问题有点困难

Answer 1

我认为你应该自己做布局。让它像这里一样: How it's look like

只需创建您自己的包含 textView 和 imageView 的布局:

public class ImageWithText extends LinearLayout {

String description;
Drawable image;

public ImageWithText(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);

    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.image_with_text, this);

    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ImageWithText, 0, 0);

    ImageView imageImageView = findViewById(R.id.image);
    image = a.getDrawable(R.styleable.ImageWithText_image);
    imageImageView.setImageDrawable(image);

    TextView descriptionTextView = findViewById(R.id.description);
    description = a.getString(R.styleable.ImageWithText_description);
    descriptionTextView.setText(description);

}

接下来需要在values/attrs.xml中添加属性:

<resources>
<declare-styleable name="ImageWithText">
    <attr name="image" format="reference"/>
    <attr name="description" format="string" />
</declare-styleable>

创建项目的新布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/image_with_text"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher" />

<TextView
    android:id="@+id/description"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textAlignment="center" />

然后像这样使用它:

<android.support.v4.widget.NestedScrollView 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">


<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:columnCount="3">


    <com.example.empty.myapplication.Layout.ImageWithText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="1"
        android:layout_columnWeight="1"
        android:gravity="center"
        app:description="google"
        app:image="@drawable/common_google_signin_btn_icon_dark" />

    <com.example.empty.myapplication.Layout.ImageWithText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="1"
        android:layout_columnWeight="1"
        android:gravity="center"
        app:description="google"
        app:image="@drawable/common_google_signin_btn_icon_dark" />

    <com.example.empty.myapplication.Layout.ImageWithText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="1"
        android:layout_columnWeight="1"
        android:gravity="center"
        app:description="google"
        app:image="@drawable/common_google_signin_btn_icon_dark" />


</GridLayout>