在 10 分钟内创建一个基本的 android 自定义视图组件

你想创建一个可以在整个项目中重复使用的按钮式、文本视图式的 android 组件吗？你来对地方了！我保证这不会过于技术性，它直截了当。😅

Android 为我们提供了一种构建自定义 UI 元素的方法🧑🏽‍🏫。老实说，如果您有兴趣阅读更多关于这个有趣事实的信息，我建议您阅读文档。我们正在努力在 10 分钟内做出一些东西！- 懒惰的开发者…🙃

出于本课的目的，我将创建一个静态自定义视图组件，它是一个配置文件标题。视图组件将可在多个布局中重用。现在想起来💡，以后也可以作为recycler view的item layout——嗯！

好，开始吧

第 1 步：创建一个新的空项目，给它起一个聪明的名字。

我命名了我的 - Customcomponents101，我没有那个截图 - 抱歉。你的项目应该有一个基本的MainActivity.kt和layout_activity_main.xml

第 2 步：转到res文件夹并创建一个新布局。

第 3 步：添加您将在第 4 步中使用的可绘制图标。

重命名并单击“完成”。

第 4 步：将以下代码添加到您在第 2 步中创建的自定义视图组件布局文件中。

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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">
    <TextView
        android:id="@+id/profile_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="John Doe"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@id/profile_image"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/profile_role"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Junior Developer"
        app:layout_constraintLeft_toRightOf="@id/profile_image"
        app:layout_constraintTop_toBottomOf="@id/profile_name" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/profile_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="8dp"
        android:src="@drawable/ic_profile_pic"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

第 5 步：创建一个指向自定义视图组件布局文件的文件，并将其命名为ProfileHeader.kt（这将是您的自定义组件的名称，您将在第 6 步中看到）。

一个完美的选择是使用 Android 的 Jetpack 功能 View Binding 🥳。

让我们继续启用它！😋 转到模块的build.gradle文件

并在android标签内添加这段代码

  buildFeatures{
         viewBinding true
     }

并同步您的项目…

完美的！您现在启用了视图绑定。

我喜欢这个功能的地方在于，您不必像使用数据绑定时那样在布局中添加任何特殊标签。

添加这段代码。

class ProfileHeader @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
    defStyleRes: Int = 0
) :
    ConstraintLayout(context, attrs, defStyleAttr, defStyleRes) {

    val binding: LayoutProfileHeaderBinding =
        LayoutProfileHeaderBinding.inflate(LayoutInflater.from(context), this, true)

}

我不骗你，如果你错过了这里的任何东西，你的自定义视图组件将不会正确膨胀，从而导致编译错误。注意构造函数和视图绑定（如果找不到布局绑定类，请重建项目）。

在本课中，我们不会对绑定变量做任何事情。在这种情况下，我们只是在扩展布局 - layout_profile_header.xml。

第 6 步：在任何其他布局中插入您的自定义视图组件。

转到activity_main.xml（或任何选择的布局）并将其添加到那里。就像您要添加一个按钮或文本视图一样，搜索您的类的名称（第 5 步） - 这是您的新自定义视图组件的名称，然后就可以了！

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <com.libraries.android.customcomponents101.ui.components.ProfileHeader
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

  </LinearLayout>

你的布局应该是这样的

第 7 步：运行应用程序

你完成了！🥳

我希望你阅读愉快！