工具栏中的“关闭”按钮而不是返回按钮的材料设计

Question

我在谷歌的Inbox应用中看到，在撰写新电子邮件时，工具栏中有一个“关闭”按钮（参见图片）。

如何实现这一点？

- Marta Rodriguez

Answer 1

需要翻译的内容：

Use  

this.getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_action_close);

为了达到这个目的。

您可以创建自己的关闭图标，也可以从Material Design图标库中获取。另外，在上一行代码之前添加以下代码以使关闭功能作为返回箭头。

this.getSupportActionBar().setDisplayHomeAsUpEnabled(true);

- Alok Nair

---

它不起作用。它没有用新图标替换回箭头，两者都出现了。此外，使用此解决方案，该图标不会获得“colorPrimaryDark”属性。 - Marta Rodriguez

它能够工作，但并不完全符合我的期望。我希望它能像后退图标一样使用“colorPrimaryDark”来工作。但似乎“关闭”图标不是SDK的一部分。感谢@AlokNair！ - Marta Rodriguez

在使用ActionBarActivity并在清单文件中指定PARENT时，运行良好。对于这个答案点赞。谢谢伙计！ - PsyGik

我发现在调用 SetHomeAsUpIndicator 之前必须先调用 setDisplayHomeAsUpEnabled，否则图标将无法被替换。 - CodeChimp

如何改回原来的状态？ - Michel Feinstein

Answer 2

如果您使用支持应用程序栏，则需要在清单中定义一个父项，然后覆盖 onSupportNavigationUp()。此外，可以访问这个方便的网站获取图标包：https://www.google.com/design/icons/

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.yourAwesomeLayout);

    setupToolBar();    
}

private void setupToolBar() {
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    if (toolbar == null) return;

    setSupportActionBar(toolbar);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close_white_24dp);
}

@Override
public boolean onSupportNavigateUp() {
    finish(); // close this activity as oppose to navigating up

    return false;
}

- worked

---

为什么在onSupportNavigateUp()方法中返回false？文档说明它只是一个成功的标志。 - brainmurphy1

Answer 3

抱歉回复晚了。我为您找到了最简单的解决方案。在此之前，上面所有的答案对我来说都不起作用（因为我想使用工具栏而不是ActionBar，因为主题）。所以尝试通过xml布局添加关闭按钮。这样就可以了。

下面是在工具栏(v7)中添加关闭按钮的xml语法。

app:navigationIcon="@drawable/ic_close_black_24dp"

以下是输出图片

- Rk215 Tech

---

@drawable/ic_close_black_24dp 是从哪里来的？ - CACuzcatlan

@CACuzcatlan 这只是他在drawable文件夹中随机选择的一张图片。你可以选择任何图标。 - Mikkel Larsen

@CACuzcatlan，您可以在Android Studio的矢量资源中找到它。 - Sourav Bagchi

Answer 4

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("Search");
toolbar.setNavigationIcon(R.drawable.abc_ic_clear_mtrl_alpha);
setSupportActionBar(toolbar);

- krishnan

Answer 5

在清单文件中定义父活动的另一种方法是像此示例中的onOptionsItemSelected方法一样处理要采取的操作：

 @Override
public boolean onOptionsItemSelected(MenuItem item){
    switch (item.getItemId()) {
        // Respond to the action bar's Up/Home/back button
        case android.R.id.home:
            finish();
            break;
    }
    return super.onOptionsItemSelected(item);
}

- 34m0

Answer 6

你可以使用这个函数。

fun setNavigationIcon(@DrawableRes resId: Int? = null) {
        this.supportActionBar?.apply {
            setDisplayHomeAsUpEnabled(true)
            setHomeAsUpIndicator(resId ?: R.drawable.ic_close)
        }
    }

- Owies AL omari

Answer 7

你可以定义一个样式：

<style name="Theme.Toolbar.Clear">
    <item name="toolbarNavigationIcon">@drawable/abc_ic_clear_mtrl_alpha</item>
</style>

并在您的主题中使用它：

<style name="Theme.Clear">
    <item name="toolbarTheme">@style/Theme.Toolbar.Clear</item>
</style>

- fabiozo