在工具栏上显示后退箭头


496

我正在从我的应用程序迁移ActionBarToolbar。但是我不知道如何Toolbar像在上那样在Back Arrow上显示和设置click事件Actionbar

在此处输入图片说明

ActionBar,我打电话mActionbar.setDisplayHomeAsUpEnabled(true)。但是,没有类似的方法。

有没有人遇到过这种情况,并以某种方式找到了解决方法?



在此处使用getSupportActionBar()示例 freakyjolly.com/how-to-add-back-arrow-in-android-activity
代码间谍

Answers:


900

如果您使用的是ActionBarActivity,你可以告诉Android的使用Toolbar作为ActionBar像这样:

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);

然后致电

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

将工作。您还可以在连接的片段中ActionBarActivities使用它,如下所示:

((ActionBarActivity) getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
((ActionBarActivity) getActivity()).getSupportActionBar().setDisplayShowHomeEnabled(true);

如果您没有使用,ActionBarActivities或者想获取Toolbar未设置为的向后箭头,SupportActionBar则可以使用以下命令:

mActionBar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_action_back));
mActionBar.setNavigationOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
       //What to do on back clicked
   }
});

如果使用android.support.v7.widget.Toolbar,则应将以下代码添加到您的AppCompatActivity

@Override
public boolean onSupportNavigateUp() {
    onBackPressed();
    return true;
}


70
如果您使用的是最新版本的appcompat-v7(21.0.3或更高版本),则可以将R.drawable.abc_ic_ab_back_mtrl_am_alpha用于后退箭头可绘制对象,该对象包含在支持库中。
Taeho Kim

23
请注意,不赞成使用getResources()。getDrawable(...)。您应该改用ContextCompat.getDrawable(context,...)。
Quentin S.

7
没有工作,找不到既R.drawable.abc_ic_ab_back_mtrl_am_alpha没有R.drawable.ic_action_back
Henrique de Sousa

10
从支持库中获取“返回”图标 toolbar.setNavigationIcon(android.support.v7.appcompat.R.drawable.abc_ic_ab_back_material);
Bolein95'2

215

我看到了很多答案,但这是我之前没有提到的。它可以从API 8+开始工作。

public class DetailActivity extends AppCompatActivity

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_detail);

    // toolbar
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    // add back arrow to toolbar
    if (getSupportActionBar() != null){
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // handle arrow click here
    if (item.getItemId() == android.R.id.home) {
        finish(); // close this activity and return to preview activity (if there is any)
    }

    return super.onOptionsItemSelected(item);
}

3
仅在将工具栏设置为ActionBar时有效。它不适用于独立的工具栏。
Kuffs '16

20
为此的支持onOptionItemSelected()完成MrEngineer13尚未在其答案中涵盖的内容。
Atul 2013年

2
谢谢,这对我有用。似乎比使用单击侦听器更好,我不太在乎独立的工具栏
Mike76,2016年

如何更改箭头的颜色?
德米特里(Dmitry)'18

我不需要“工具栏”注释行下的行,效果很好。
Hack06

173

有很多方法可以实现,这是我的最爱:

布局:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:navigationIcon="?attr/homeAsUpIndicator" />

活动:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // back button pressed
        }
    });

13
使用主题属性比该问题中的大多数其他建议要好得多
Pedro Loureiro

3
而不是使用,setNavigationOnClickListener()您可以case android.R.id.home:在'onOptionsItemSelected()`中添加。
尤金(Eugene)2016年

1
case android.R.id.home没为我工作。因此,搜索了一会儿之后,您的答案就成功了..谢谢。
节目播音员

这是最可靠的解决方案,尤其是如果您要使用android系统的默认后退图标。
瑙曼·阿斯兰

使用toolbar.setNavigationOnClickListener {onBackPressed()}
filthy_wizard

74

您可以使用工具栏的setNavigationIcon方法。 Android文档

mToolBar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);

mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        handleOnBackPress();
    }
});

1
您能在回答中添加一些解释吗?仅有代码的答案在SO上不被接受。
2015年

1
请注意方法setNavigationOnClickListener()已在API级别21及以上的被添加
阿里Mehrpour

3
R.drawable.abc_ic_ab_back_mtrl_am_alpha现在已不在支持23.2.0中,请改用可接受的答案。
2016年

25

如果您不想创建自定义Toolbar,则可以这样做

public class GalleryActivity extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        ...  
        getSupportActionBar().setTitle("Select Image");
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        }
        return super.onOptionsItemSelected(item);
    }
}                     

在你里面 AndroidManifest.xml

<activity
    android:name=".GalleryActivity"
    android:theme="@style/Theme.AppCompat.Light">        
</activity>

您也可以将其添加android:theme="@style/Theme.AppCompat.Light"<aplication>标签中,以应用于所有活动

在此处输入图片说明


2
感谢您if (item.getItemId() == android.R.id.home)
Adizbek Ergashev

22
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setNavigationIcon(R.drawable.back_arrow); // your drawable
    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            onBackPressed(); // Implemented by activity
        }
    });

对于API 21+ android:navigationIcon

<android.support.v7.widget.Toolbar
    android:navigationIcon="@drawable/back_arrow"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"/>

应该是公认的答案。
安东·马利舍夫

17

我使用了Google Developer文档中的这种方法:

@Override
public void onCreate(Bundle savedInstanceState) {
  ...
  getActionBar().setDisplayHomeAsUpEnabled(true);
}

如果出现空指针异常,则可能取决于主题。尝试在清单中使用其他主题,或交替使用此主题:

@Override
public void onCreate(Bundle savedInstanceState) {
  ...
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

然后在清单中,在此处为当前活动设置父活动:

<activity
        android:name="com.example.myapp.MyCurrentActivity"
        android:label="@string/title_activity_display_message"
     android:parentActivityName="com.example.myfirstapp.MainActivity" >
    <!-- Parent activity meta-data to support 4.0 and lower -->
    <meta-data
        android:name="android.support.PARENT_ACTIVITY"
        android:value="com.example.myapp.MyMainActivity" />
</activity>

我希望这能帮到您!


1
谷歌文档链接和getSupportActionBar()工作。谢谢!
瑞克,

15

如果您使用AppCompatActivity和已经下降不使用它的路径,因为你想没有得到自动ActionBar,它提供了,因为你要分开了Toolbar,因为你的材料设计需求和CoordinatorLayoutAppBarLayout,那么,考虑一下:

您仍然可以使用AppCompatActivity,而不必停止使用它,以便可以<android.support.v7.widget.Toolbar>在xml中使用。只需按如下所示关闭操作栏样式即可

首先,从您喜欢的NoActionBar主题之一派生一种样式styles.xml,我这样使用Theme.AppCompat.Light.NoActionBar

<style name="SuperCoolAppBarActivity" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>

    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/primary_dark</item>
    ...
    ...
</style>

在您的应用清单中,选择刚定义的子样式主题,如下所示:

    <activity
        android:name=".activity.YourSuperCoolActivity"
        android:label="@string/super_cool"
        android:theme="@style/SuperCoolAppBarActivity">
    </activity>

在Activity Xml中,如果工具栏的定义如下:

...
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        />
...

然后,这是重要的部分,将支持的操作栏设置为要扩展的AppCompatActivity,以使xml中的工具栏成为操作栏。我觉得这是一种更好的方法,因为您可以简单地执行ActionBar允许的许多操作,例如菜单,自动活动标题,项目选择处理等,而无需诉诸添加自定义点击处理程序等。

在活动的onCreate覆盖中,执行以下操作:

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_super_cool);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    setSupportActionBar(toolbar);
    //Your toolbar is now an action bar and you can use it like you always do, for example:
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
} 

8
MyActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        toolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setNavigationOnClickListener(arrow -> onBackPressed());
    }

您可以使用retrolambda。
Artemiy

这就是我所拥有的,并且无法正常工作。无法弄清楚。
filthy_wizard

7

显示工具栏上的后退按钮的简便方法

将此代码粘贴到onCreate方法中

 if (getSupportActionBar() != null){

            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }

将此覆盖方法粘贴到onCreate方法之外

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if(item.getItemId()== android.R.id.home) {

        finish();
    }
    return super.onOptionsItemSelected(item);
}

7

在科特林,那将是

private fun setupToolbar(){
    toolbar.title = getString(R.string.YOUR_TITLE)
    setSupportActionBar(toolbar)
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
    supportActionBar?.setDisplayShowHomeEnabled(true)
}

// don't forget click listener for back button
override fun onSupportNavigateUp(): Boolean {
    onBackPressed()
    return true
}


5

AppCompatActivity比如你可以这样做

public class GrandStatActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grand_stat);
    }

    @Override
    public void onResume() {
        super.onResume();

        // Display custom title
        ActionBar actionBar = this.getSupportActionBar();
        actionBar.setTitle(R.string.fragment_title_grandstats);

        // Display the back arrow
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }

    // Back arrow click event to go to the parent Activity
    @Override
    public boolean onSupportNavigateUp() {
        onBackPressed();
        return true;
    }

}

4

在您要添加后退按钮的活动的清单文件中,我们将使用属性android:parentActivityName

        <activity
        android:name=".WebActivity"
        android:screenOrientation="portrait"
        android:parentActivityName=".MainActivity"
        />

PS此属性在API级别16中引入。


3

这很完美

public class BackButton extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chat_box);
        Toolbar chatbox_toolbar=(Toolbar)findViewById(R.id.chat_box_toolbar);
        chatbox_toolbar.setTitle("Demo Back Button");
        chatbox_toolbar.setTitleTextColor(getResources().getColor(R.color.white));
        setSupportActionBar(chatbox_toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        chatbox_toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //Define Back Button Function
            }
        });
    }
}

3

首先,您需要初始化工具栏:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

然后从操作栏中调用后退按钮:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

@Override
public boolean onSupportNavigateUp() {
    onBackPressed();
    return true;
}

2

如果要在未设置为SupportActionBar的工具栏上获得后退箭头,请执行以下操作:

(科特琳)

val resId = getResIdFromAttribute(toolbar.context, android.R.attr.homeAsUpIndicator)
toolbarFilter.navigationIcon = ContextCompat.getDrawable(toolbar.context, resId)
toolbarFilter.setNavigationOnClickListener { fragmentManager?.popBackStack() }

从属性获取资源:

@AnyRes
fun getResIdFromAttribute(context: Context, @AttrRes attr: Int): Int {
    if (attr == 0) return 0
    val typedValueAttr = TypedValue()
    context.theme.resolveAttribute(attr, typedValueAttr, true)
    return typedValueAttr.resourceId
}

1

将此添加到布局文件夹中活动的xml中:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.v7.widget.Toolbar
        android:id="@+id/prod_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

使工具栏可单击,将其添加到onCreate方法中:

Toolbar toolbar = (Toolbar) findViewById(R.id.prod_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        finish();
    }
});

1

可能是从主题中获取向上图标的更可靠方法(如果未使用工具栏作为操作栏):

toolbar.navigationIcon = context.getDrawableFromAttribute(R.attr.homeAsUpIndicator)

为了将主题属性变成可绘制对象,我使用了扩展功能:

fun Context.getDrawableFromAttribute(attributeId: Int): Drawable {
    val typedValue = TypedValue().also { theme.resolveAttribute(attributeId, it, true) }
    return resources.getDrawable(typedValue.resourceId, theme)
}

0

如果您将DrawerLayoutActionBarDrawerToggle一起使用,则要显示“ 后退”按钮而不是“ 菜单”按钮(反之亦然),则需要在“活动”中添加以下代码:

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

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.application_name, R.string.application_name);
    mDrawerLayout.addDrawerListener(mDrawerToggle);

    mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_arrow_back_white_32dp);
    mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            onBackPressed(); // Or you can perform some other action here when Back button is clicked.
        }
    });
    mDrawerToggle.syncState();
    // ...
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item))
        return true;

    switch (item.getItemId()) {
        case android.R.id.home:
            onBackPressed();
            return true;
        // ...
    }

    return super.onOptionsItemSelected(item);
}

public void showBackInToolbar(boolean isBack) {
    // Remove next line if you still want to be able to swipe to show drawer menu.
    mDrawerLayout.setDrawerLockMode(isBack ? DrawerLayout.LOCK_MODE_LOCKED_CLOSED : DrawerLayout.LOCK_MODE_UNLOCKED);
    mDrawerToggle.setDrawerIndicatorEnabled(!isBack);
    mDrawerToggle.syncState();
}

因此,当您需要显示“ 后退”按钮而不是“ 菜单”按钮时,请调用showBackInToolbar(true),如果需要菜单按钮,请调用showBackInToolbar(false)

您可以在此处生成后退箭头(ic_arrow_back_white_32dp),在“ 剪贴画”部分中搜索arrow_back(使用默认的32dp和8dp填充)。只需选择所需的颜色即可。


0

您可以随时在其中添加Relative layoutLinear LayoutToolbar然后在工具栏中的任意位置放置“后退”图标或“关闭”图标的图像视图

例如,我在工具栏中使用了相对布局

 <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_top"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:minHeight="?attr/actionBarSize"
                android:nextFocusDown="@id/netflixVideoGridView"
                app:layout_collapseMode="pin">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">


                    <TextView

                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Myflix"
                        android:textAllCaps="true"
                        android:textSize="19sp"
                        android:textColor="@color/red"
                        android:textStyle="bold" />


                    <ImageView
                        android:id="@+id/closeMyFlix"
                        android:layout_alignParentRight="true"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        app:srcCompat="@drawable/vector_close" />


                </RelativeLayout>

            </android.support.v7.widget.Toolbar>

它看起来像这样:

在此处输入图片说明

您可以像这样在“活动”或片段中的图像视图上添加点击侦听器。

  closeMyFlix.setOnClickListener({
            Navigator.instance.showFireTV(  activity!!.supportFragmentManager)
        })

0

有了Kotlin,它变成了:

Xml:

<include
android:id="@+id/tbSignToolbar "
layout="@layout/toolbar_sign_up_in"/>

在您的活动中:-

setSupportActionBar(tbSignToolbar as Toolbar?)//tbSignToolbar :id of your toolbar 
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setDisplayShowHomeEnabled(true)

0

如果您使用的是JetPack导航。

这是MainActivity的布局

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                               xmlns:app="http://schemas.android.com/apk/res-auto"
                                               xmlns:tools="http://schemas.android.com/tools"
                                               android:layout_width="match_parent"
                                               android:layout_height="match_parent"
                                               tools:context=".MainActivity">

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolBar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

</androidx.appcompat.widget.Toolbar>

<fragment
        android:id="@+id/my_nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintTop_toBottomOf="@id/toolBar"
        app:layout_constraintBottom_toTopOf="parent"
        app:navGraph="@navigation/nav_graph"/>

在活动中设置工具栏,如下所示,在Activity类的onCreate()中。

val navHostFragment = supportFragmentManager
        .findFragmentById(R.id.my_nav_host_fragment) as NavHostFragment? ?: return

val navController = navHostFragment.findNavController()
val toolBar = findViewById<Toolbar>(R.id.toolBar)
setSupportActionBar(toolBar) // To set toolBar as ActionBar
setupActionBarWithNavController(navController)

setupActionBarWithNavController(navController)如果需要,将在工具栏上创建一个后退按钮,并处理backButton功能。如果您需要编写CustomBack功能,请在片段onCreate()方法上创建如下所示的callBack

val callback = requireActivity().onBackPressedDispatcher.addCallback(this) {
        // Handle the back button event
    }

从文档中获取:https : //developer.android.com/guide/navigation/navigation-custom-back


0

如果您使用的是androidx.appcompat.app.AppCompatActivity正当用途:

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

然后只需在Manifest.xml父活动中定义。

<activity
    android:name=".MyActivity"
    ...>
  <meta-data
      android:name="android.support.PARENT_ACTIVITY"
      android:value=".ParentActivity" />
</activity>

相反,如果您正在使用,Toolbar并且想要自定义行为,请使用:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar" 
    app:navigationIcon="?attr/homeAsUpIndicator"
    .../>

并在您的活动中:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //....
    }
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.