Question

我正在开发一个应用，该应用需要显示带有汉堡图标和后图标的后图标，如下图所示。

我应该如何实现？

Answer 1

唯一的解决方案是创建一个自定义工具栏，您必须在其中手动放置这两个图标（后退按钮和hamburg菜单图标），并在运行时实现抽屉功能。

这意味着您必须分别实现后退按钮和汉堡菜单按钮功能。

Answer 2

我建议使用波纹管之类的自定义工具栏

 PASS  src/stackoverflow/58948797/index.spec.ts
  main
    ✓ should enable (13ms)
    ✓ should disable (1ms)

  console.log node_modules/jest-mock/build/index.js:860
    enable redis cache

  console.log node_modules/jest-mock/build/index.js:860
    disable redis cache

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |       75 |      100 |      100 |                   |
 index.ts |      100 |       75 |      100 |      100 |                 2 |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.07s, estimated 9s

现在将工具栏设置为

<androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:id="@+id/mImgBack"
                android:src="@drawable/ic_back"
                android:layout_height="wrap_content"/>
            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:id="@+id/mImgHamburger"
                android:src="@drawable/ic_mImgHamburger"
                android:layout_height="wrap_content"/>
        </LinearLayout>
    </androidx.appcompat.widget.Toolbar>

执行操作，然后根据需要单击图像视图

Answer 3

我不确定这是否是您要寻找的解决方案，但是如果您实现自定义工具栏（也像其他人提到的那样），则可以将ImageView与DrawerArrowDrawable一起使用。

然后您可以通过编程方式将图标从hambruger转换为来回箭头，而无需处理多个视图。

您可以像这样初始化DrawerArrowDrawable：

homeDrawable = DrawerArrowDrawable(context)
homeDrawable.setColor(ContextCompat.getColor(context, R.color.white))
homeDrawable.setBarThickness(dimen(R.dimen.toolbar_home_bars_thickness).toFloat())
homeDrawable.setBarLength(dimen(R.dimen.toolbar_home_bars_length).toFloat())
homeDrawable.setGapSize(dimen(R.dimen.toolbar_home_bars_gap).toFloat())
homeDrawable.setArrowShaftLength(dimen(R.dimen.toolbar_home_arrow_shaft_length).toFloat())
homeDrawable.setArrowHeadLength(dimen(R.dimen.toolbar_home_arrow_head_length).toFloat())

然后将其设置为您的imageview背景：

imageView.setImageDrawable(homeDrawable)

您可以使用简单的动画（ValueAnimator）来切换图标，如下所示：

private fun toggleDrawerIcon(show: Boolean) {
    val currentProgress = homeDrawable.progress
    val animator = ValueAnimator.ofFloat(currentProgress, if (show) 0.0F else 1.0F)
    animator.addUpdateListener { valueAnimator ->
        var value = valueAnimator.animatedValue
        if (value is Float)
            homeDrawable?.progress = value
    }
    animator.duration = 200
    animator.start()
}

请记住，每当点击图标时，您都需要确定其当前状态，以确保其能够执行所需的操作。

如何在汉堡菜单中添加图标？

3 个答案: