Estoy tratando de recrear una pantalla de una aplicación (ver foto). El problema que estoy enfrentando está enfocado en los elementos de la cuadrícula de la pantalla. ¿Es posible crear una vista personalizada que sea una combinación de una imagen y una vista de texto (como en la imagen) o si debo agregar la vista de imagen y las vistas de texto por separado en cada fila de la vista de cuadrícula?

two muppets

-1
Vasko Vasilev 27 jun. 2019 a las 16:25

1 respuesta

La mejor respuesta

Paso 1 :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="134dp"
    android:layout_height="154dp"
    android:background="@drawable/grey_rounded_background"
    android:gravity="center"
    android:padding="16dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="70dp"
        android:layout_marginBottom="8dp"
        tools:src="@color/colorPrimary" />

    <TextView
        android:id="@+id/caption"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="Caption of the Image"
        android:textAlignment="center"
        android:textColor="#666"
        android:textSize="12sp"/>

</LinearLayout>

Paso 2

<declare-styleable name="BenefitView">
    <attr name="image" format="reference"/>
    <attr name="text" format="string"/>
</declare-styleable>

Paso 3

class BenefitView(context: Context, attrs: AttributeSet): LinearLayout(context, attrs) {

    init {
        inflate(context, R.layout.benefit_view, this)

        val imageView: ImageView = findViewById(R.id.image)
        val textView: TextView = findViewById(R.id.caption)

        val attributes = context.obtainStyledAttributes(attrs, R.styleable.BenefitView)
        imageView.setImageDrawable(attributes.getDrawable(R.styleable.BenefitView_image))
        textView.text = attributes.getString(R.styleable.BenefitView_text)
        attributes.recycle()

    }
}

Uso:

<com.iacovelli.customview.BenefitView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:text="Apply and chat with our hosts"
      app:image="@drawable/first_image"
      android:layout_marginEnd="12dp"/>
3
akshay_shahane 27 jun. 2019 a las 13:32