Android 中分离式可重用 UI：打造沉浸式自定义导航栏

Android

2023-09-12 20:17:35

分离式 UI 的魅力：构建可重用且可自定义的 Android 组件

在 Android 开发的广阔世界中，分离式 UI 的思想正以其众多优势崭露头角。它是一种将 UI 组件分解为可重用模块的创新方法，为开发者提供了前所未有的灵活性、可维护性和可扩展性。

分离式 UI 的优势

可重用性： 分离的组件可以在不同的活动或片段中重复使用，从而消除代码冗余并大幅提高开发效率。
松散耦合： 组件之间的相互依赖性极低，这使得维护和扩展变得轻而易举。
可测试性： 独立的组件易于进行单元测试，确保代码的高质量和可靠性。

构建自定义导航栏

为了展示分离式 UI 的强大功能，让我们逐步构建一个可重用且可自定义的导航栏组件：

1. 创建导航栏布局

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <!-- 左侧图标 -->
    <ImageButton
        android:id="@+id/leftIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_back" />

    <!-- 标题 -->
    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" />

    <!-- 右侧图标 -->
    <ImageButton
        android:id="@+id/rightIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_more" />
</LinearLayout>

2. 创建导航栏类

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

    private val leftIcon: ImageButton
    private val title: TextView
    private val rightIcon: ImageButton

    init {
        inflate(context, R.layout.custom_navigation_bar, this)
        leftIcon = findViewById(R.id.leftIcon)
        title = findViewById(R.id.title)
        rightIcon = findViewById(R.id.rightIcon)
    }

    // 设置左侧图标
    fun setLeftIcon(drawable: Drawable?) {
        leftIcon.setImageDrawable(drawable)
    }

    // 设置标题
    fun setTitle(text: String?) {
        title.text = text
    }

    // 设置右侧图标
    fun setRightIcon(drawable: Drawable?) {
        rightIcon.setImageDrawable(drawable)
    }

    // 设置点击事件委托
    fun setOnLeftIconClickListener(listener: View.OnClickListener) {
        leftIcon.setOnClickListener(listener)
    }

    fun setOnRightIconClickListener(listener: View.OnClickListener) {
        rightIcon.setOnClickListener(listener)
    }
}

3. 在布局中使用

<com.example.app.ui.CustomNavigationBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:leftIcon="@drawable/ic_back"
    app:title="标题"
    app:rightIcon="@drawable/ic_more"
    app:onLeftIconClickListener="onLeftIconClicked"
    app:onRightIconClickListener="onRightIconClicked" />

4. 在活动或片段中

class MainActivity : AppCompatActivity() {

    private lateinit var navigationBar: CustomNavigationBar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navigationBar = findViewById(R.id.navigationBar)
        navigationBar.setOnLeftIconClickListener { finish() }
        navigationBar.setOnRightIconClickListener { /* 你的操作 */ }
    }
}