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>

P.S。如果解释不是很清楚，我真的很抱歉，写下我的问题有点困难

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>

Answer 2

使用以下代码获取您的实际布局。

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

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/a"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_gravity="fill_horizontal"
                android:layout_marginBottom="15dp"
                app:srcCompat="@drawable/ic_size_plus" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="18dp"
                android:textStyle="bold"
                android:gravity="center"
                android:text="AA" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/b"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_gravity="fill_horizontal"
                android:layout_marginBottom="15dp"
                app:srcCompat="@drawable/ic_size_plus" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="18dp"
                android:textStyle="bold"
                android:gravity="center"
                android:text="BB" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/c"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_gravity="fill_horizontal"
                android:layout_marginBottom="15dp"
                app:srcCompat="@drawable/ic_size_plus" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="18dp"
                android:textStyle="bold"
                android:gravity="center"
                android:text="CC" />

        </LinearLayout>
    </GridLayout>

Answer 3

您应该使用网格视图，请查看本教程：https://www.viralandroid.com/2016/04/android-gridview-with-image-and-text.html

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

3 个答案: