您可以创建自定义视图吗?

时间:2019-06-27 13:25:20

标签: android image android-gridview custom-view

我正在尝试从一个应用程序重新创建屏幕(请参见图片)。我面临的问题集中在屏幕的网格元素上。是否可以创建将图像和文本视图组合在一起的自定义视图(如图所示),还是应该在网格视图的每一行中分别添加图像视图和文本视图?

two muppets

1 个答案:

答案 0 :(得分:3)

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

第2步

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

第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()

    }
}

使用:

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