Добавить текст под кликабельным ImageView - PullRequest
Новая
       33

Добавить текст под кликабельным ImageView

1 голос
/ 24 мая 2019

Я хочу добавить текст ниже кликабельного ImageView. Как будто я хочу назвать ImageView, но я не могу разместить текст так, как я хочу. Кликабельный ImageView внутри ScrollView. Когда я попытался добавить TextView прямо под изображением, он испортил мой ScrollView

Это пример изображения, как то, что я хочу сделать

enter image description here

а это мой 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. Мне очень жаль, если объяснение не очень понятно, немного сложно записать мою проблему

Ответы [ 3 ]

2 голосов
/ 24 мая 2019

Я думаю, вы должны сделать свой собственный макет. Чтобы сделать это как здесь: Как это выглядит

Просто создайте свой собственный макет, содержащий 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>

0 голосов
/ 24 мая 2019

Вы должны использовать вид сетки, посмотрите этот урок: https://www.viralandroid.com/2016/04/android-gridview-with-image-and-text.html

0 голосов
/ 24 мая 2019

Используйте приведенный ниже код для получения вашего фактического макета. 

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