1
votes

Ajoutez du texte sous le ImageView cliquable

Je souhaite ajouter du texte sous l'ImageView cliquable. C'est comme si je voulais nommer ImageView mais je ne pouvais pas placer le texte comme je le veux. ImageView cliquable dans ScrollView. Quand j'ai essayé d'ajouter TextView juste en dessous de l'image, cela a gâché mon ScrollView

Ceci est l'image d'exemple comme ce que je veux faire

et ceci est mon 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>

PS Je suis vraiment désolé si l'explication n'est pas très claire, c'est un peu difficile d'écrire mon problème

android android-imageview textview

2 commentaires

pourquoi n'utilisez-vous pas une vue sur le recyclage?

Utilisez GridLayoutManager avec Recyclerview et gonflez votre vue selon l'image.

3 Réponses :

0
votes

Utilisez le code ci-dessous pour obtenir votre mise en page réelle.

<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>

0 commentaires

0
votes

Vous devriez utiliser la vue en grille, consultez ce didacticiel: https://www.viralandroid.com/2016/04/android-gridview-with-image-and-text.html

0 commentaires

2
votes

Je pense que vous devriez créer votre propre mise en page. Pour faire comme ici: À quoi ça ressemble

Créez simplement votre propre mise en page contenant textView et imageView:

<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>

Ensuite, vous devez ajouter des attributs dans values / attrs.xml:

<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" />

Créer votre nouvelle mise en page de l'élément:

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

Et utilisez-la comme ceci:

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);

}

1 commentaires

Si vous n'obtenez aucun aperçu, essayez de reconstruire tout le projet