logo标签列表

Android工具栏后退箭头与WhatsApp类似的图标

androidtoolbarandroid-support-libraryandroid-appcompat
9
如何在Android工具栏中像WhatsApp一样显示带后退箭头的图标？
我使用以下代码在工具栏中设置后退箭头和图标。
 toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);
 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 getSupportActionBar().setDisplayShowHomeEnabled(true);
 getSupportActionBar().setHomeButtonEnabled(true);
 toolbar.setLogo(icon);

但我得到的结果如下图所示。

在此输入图片描述

我想要的是箭头后面立即出现图标。 我不想在箭头与图标之间留任何间隙，就像 WhatsApp 下面的图片一样。

在此输入图片描述

如何在工具栏中设置带有返回箭头的图标，就像 WhatsApp 一样？

在用户体验方面，将背景图和个人资料图片合并在一起不是一个好主意。如果您在图像右侧添加间距，则您的结果似乎更为适宜。 - Hugo Gresse
@HugoGresse 我不想将个人资料图片与返回箭头合并。我只想将其放在箭头旁边，没有任何边距或填充间隙。 - Priyank Patel
是的，但它会显著减小按钮的交互尺寸，这违背了材料设计原则并降低了可访问性。 - Hugo Gresse
7个回答
21
据我所知，WhatsApp没有使用 App-compat Support Library Toolbar，而是使用自定义操作栏。
actionBar.setCustomView(R.layout.conversation_actionbar);

这是 conversation_actionbar.xml 文件，WhatsApp 正在使用它。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@id/custom_view"
android:layout_width="fill_parent"
android:layout_height="?actionBarSize"
android:clipChildren="false" >

<LinearLayout
    android:id="@id/back"
    style="@style/ActionBarButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:contentDescription="@string/abc_action_bar_up_description"
    android:enabled="false"
    android:orientation="horizontal"
    android:padding="@dimen/abc_action_bar_default_padding_material" >

    <ImageView
        android:id="@id/up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center"
        android:scaleType="center"
        android:src="?homeAsUpIndicator" />

    <FrameLayout
        android:id="@id/conversation_contact_photo_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center"
        android:layout_marginRight="0.0dip" >

        <ImageView
            android:id="@id/conversation_contact_photo"
            android:layout_width="35.0dip"
            android:layout_height="35.0dip"
            android:scaleType="fitCenter" />

        <View
            android:id="@id/transition_start"
            android:layout_width="35.0dip"
            android:layout_height="35.0dip" />

        <ProgressBar
            android:id="@id/change_photo_progress"
            style="?android:attr/progressBarStyleSmallInverse"
            android:layout_width="35.0dip"
            android:layout_height="35.0dip"
            android:layout_gravity="center"
            android:visibility="gone" />
    </FrameLayout>
</LinearLayout>

<LinearLayout
    android:id="@id/conversation_contact"
    style="@style/ActionBarButtonStyle"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/back"
    android:clickable="true"
    android:clipChildren="false"
    android:orientation="vertical"
    android:paddingBottom="2.0dip"
    android:paddingLeft="4.0dip"
    android:paddingRight="0.0dip"
    android:paddingTop="0.0dip" >

    <com.whatsapp.TextEmojiLabel
        android:id="@id/conversation_contact_name"
        style="@style/Theme.ActionBar.TitleTextStyle.Condensed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:ellipsize="end"
        android:gravity="left"
        android:lines="1"
        android:scrollHorizontally="true"
        android:singleLine="true" />

    <LinearLayout
        android:id="@id/conversation_contact_status_holder"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:orientation="horizontal" >

        <TextView
            android:id="@id/conversation_contact_status_prefix"
            style="@style/Theme.ActionBar.SubtitleTextStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:lines="1"
            android:paddingRight="3.5sp"
            android:singleLine="true"
            android:text="@string/conversation_last_seen"
            android:visibility="gone" />

        <TextView
            android:id="@id/conversation_contact_status"
            style="@style/Theme.ActionBar.SubtitleTextStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:ellipsize="end"
            android:lines="1"
            android:singleLine="true" />

        <View
            android:layout_width="0.0dip"
            android:layout_height="1.0dip"
            android:layout_weight="1.0" />
    </LinearLayout>
</LinearLayout>

我建议您遵循 Materail Design 规则并使用 App-compat Support Library 的 ToolBar。

您可以通过使用以下代码，在屏幕上获得如下所示的结果xPxIA.png

使用以下代码：

your_activity.xml:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_chats"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            <include layout="@layout/toolbar_conversation"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

工具栏对话框.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="?attr/selectableItemBackgroundBorderless"
android:layout_width="fill_parent"
android:layout_height="?actionBarSize"
>
<!-- android:background="?attr/selectableItemBackgroundBorderless" will cause this Custom View to make ripple effect -->

<LinearLayout
    android:id="@+id/conversation_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:contentDescription="@string/abc_action_bar_up_description"
    android:orientation="horizontal">

        <ImageView
            android:id="@+id/conversation_contact_photo"
            android:layout_width="35.0dip"
            android:layout_height="35.0dip"
            android:src="@drawable/icon"
            android:scaleType="fitCenter" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/conversation_image"
    android:orientation="vertical"
    android:paddingBottom="2.0dip"
    android:paddingLeft="4.0dip"
    android:paddingRight="0.0dip"
    android:paddingTop="0.0dip" >


    <TextView
        android:id="@+id/action_bar_title_1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="6dp"
        android:layout_weight="0.6"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:textSize="18sp"
        android:text="shanraisshan"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/action_bar_title_2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginLeft="6dp"
        android:layout_weight="0.4"
        android:ellipsize="end"
        android:text="last seen 1 hour ago"
        android:maxLines="1"
        android:textSize="12sp" />


</LinearLayout>

Activity.java

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_chats);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.e("Toolbar","Clicked");
    }
});

请耐心等待，Whatsapp 将来会转移到 App-compat 支持库。

1
请问在应用自定义布局后，我如何在运行时更改图像？ - Syed Muhammad Oan
箭头和图标之间有更多的空间。如何在运行时减少空间并更改图像？ - Make it Simple
3

您可以通过创建一个包含箭头和图像图标的自定义 Drawable，然后将其添加到工具栏 toolbar.setNavigationIcon(drawable) 中来实现此结果，如下所示。

        setSupportActionBar(mBinding.toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        Drawable drawable = new Drawable() {
            @Override
            public void draw(Canvas canvas) {

                int width = canvas.getWidth();
                int height = canvas.getHeight();

                Bitmap bMap = CircularImageView.getCircularBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.beautiful_eyes_small));    
                canvas.drawBitmap(bMap,(width-(bMap.getWidth())), (height/2)-(bMap.getHeight()/2), null);

                Bitmap bMap2 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back);
                canvas.drawBitmap(bMap2,0, (height/2)-(bMap2.getHeight()/2), null);
            }

            @Override
            public void setAlpha(int i) {

            }

            @Override
            public void setColorFilter(ColorFilter colorFilter) {

            }

            @Override
            public int getOpacity() {
                return PixelFormat.TRANSLUCENT;
            }
        };
        mBinding.toolbar.setNavigationIcon(drawable);

Resulting toolbar

1
我找不到CircularImageView类。 - Uchechukwu Nnabugwu
1
似乎您需要设置与操作栏相关的三个值才能显示图标：

actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setDisplayShowHomeEnabled(true); actionBar.setIcon(R.drawable.ic_cast_dark);

我本以为setDisplayHomeAsUpEnabled和setIcon就足够了，但似乎并不是这样。
我正在使用android.support.v7.app.ActionBar。
1
getSupportActionBar().setDisplayShowHomeEnabled(true);

along with

getSupportActionBar().setIcon(R.drawable.ic_launcher);
对我来说它没有起作用。返回箭头和图标之间的间距仍然存在。 - Priyank Patel
如果任何图像周围有透明部分，请确保图像的大小与所示相同。 - Salah Nour ElDin
0

你不能使用工具栏中的普通返回箭头来完成此操作，因为它具有最小宽度56dp和居中缩放类型，你可以尝试以下方法：

<android.support.v7.widget.Toolbar 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:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary">

    <ImageButton
        android:id="@+id/ibCustomBack"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:src="@drawable/ab_back_mtrl_am_alpha" />

    <ImageView
        android:id="@+id/yourImage"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@drawable/pb" />

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

并且自己处理 ibCustomBack。

0

我认为您应该尝试对后退按钮图像进行一些编辑，比如应用一些简洁性，减少图像宽度，并使其透明。可能会有所帮助。

0
你可以使用以下代码设置主页图标的填充。
((ImageView) findViewById(android.R.id.home)).setPadding(x, x, x, x);
x = set your value.
使用此代码时应用程序崩溃。在此行发生了空指针异常。 - Priyank Patel
@Priyank，你的项目中使用了app-compat支持库吗？ - Prashant
是的，我正在使用 appcompat-v7-r22.2。 - Priyank Patel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接