Android工具栏后退箭头，带有类似WhatsApp的图标 [英] Android toolbar back arrow with icon like WhatsApp
本文介绍了Android工具栏后退箭头，带有类似WhatsApp的图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在类似WhatsApp的android工具栏中显示带有后退箭头的图标?
How to display icon with back arrow in android toolbar like WhatsApp ?
我使用以下代码设置后退箭头&工具栏中的图标.
I use below code to set back arrow & icon in toolbar.
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
toolbar.setLogo(icon);
但是我得到的结果如下图.
but i got result as below image.
我希望后退箭头后立即显示图标.我不希望后退箭头&之间有任何缝隙图标，类似于下面的WhatsApp图片.
I want icon immediate next after back arrow. I don't want any gap between back arrow & icon like below image of WhatsApp.
如何在类似WhatsApp的工具栏中设置带有后退箭头的图标?
How to set icon with back arrow in toolbar like WhatsApp ?
推荐答案
据我所知， WhatsApp 未使用与应用程序兼容的支持库工具栏， Whatsapp 正在使用
As far as I Know, WhatsApp is not using App-compat Support Library Toolbar, Whatsapp is setting the Custom Action Bar using
actionBar.setCustomView(R.layout.conversation_actionbar);
随附的是session_actionbar.xml， Whatsapp 正在使用
Attached is the conversation_actionbar.xml , Whatsapp is using
<?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设计规则并使用App兼容支持库的工具栏，
您可以得到如下图所示的结果
You can get the following result as shown in the Picture below
通过使用以下代码
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>
toolbar_conversation.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兼容的支持库中.
Just wait for it, Whatsapp will shift to App-compat Support Library in future.
这篇关于Android工具栏后退箭头，带有类似WhatsApp的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
