【问题标题】:Padding between ActionBar's home icon and titleActionBar 的主页图标和标题之间的填充
【发布时间】:2012-03-16 12:18:58
【问题描述】:

有人知道如何在 ActionBar 的主页图标和标题之间设置填充吗?

【问题讨论】:

  • 欢迎来到黑客世界:Android。如果我们在其他 UI 技术和应用程序编程中需要这个简单的东西,任何人(甚至是新手)都应该找到它。然而在Android中,它真的很神秘。他们故意隐藏功能,使其复杂化,只是为了让Android成为黑客世界。我不知道他们的最终目的是什么。
  • 这个question 和答案让位于工具栏内的属性来实现这一点(支持v7)
  • Android 比 iOS 更烂。

标签: android android-actionbar


【解决方案1】:

EDIT:确保将此可绘制对象设置为 LOGO,而不是像某些评论者那样设置为您的应用程序图标。

只需制作一个 XML 可绘制,并将其放在资源文件夹“可绘制”中(无需任何密度或其他配置)。

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:drawable="@drawable/my_logo"
        android:right="10dp"/>


</layer-list>

最后一步是在清单中(或在活动中的 Actionbar 对象上)将此新的可绘制对象设置为徽标

祝你好运!

【讨论】:

  • 这个解决方案有一个大问题。我使用了它,@Alesqui 是对的 - 应用程序图标发生了变化并且变得更小......您可以更改图标,但由于不同手机的 dp 不同,因此该解决方案不会在生产应用程序中削减它。
  • 确保您将此可绘制对象设置为 LOGO,而不是您的应用程序图标。祝你好运!
  • 我也看到了失真。如果我如上所述应用右侧填充,图像的右侧将被裁剪。
  • 有趣的解决方案,但对我不起作用 - 我可以通过这种方式添加额外的填充或裁剪徽标图像 - 不好 (4.3)
  • @Cliffus - 不错的解决方案。我的要求是将徽标向左,所以我使用了:android:left="-4dp"。
【解决方案2】:

我调整了 Cliffus 答案并在我的操作栏样式定义中分配了 logo-drawable,例如在 res/style.xml 中:

<item name="android:actionBarStyle">@style/MyActionBar</item>

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#3f51b5</item>
        <item name="android:titleTextStyle">@style/ActionBar.TitleText</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">18sp</item>
        <item name="android:logo">@drawable/actionbar_space_between_icon_and_title</item>
</style>

在 res/drawable/actionbar_space_between_icon_and_title.xml 中的 drawable 看起来像 Cliffus 的(这里带有默认的应用启动器图标):

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_launcher"
        android:right="20dp"/>
</layer-list>

在 android_manifest.xml 中,您仍然可以设置不同的应用程序图标(“桌面”上的启动器图标。此处的任何不同徽标定义在没有操作栏的活动中可见。

【讨论】:

  • 为什么在Android 5.1上不生效
  • 对不起,我不能在 5.1 中说些什么。我切换到更灵活的工具栏控件。如果尚未完成,我建议在 StackOverflow 上打开一个新问题并写一些更多详细信息,哪些对您有用(
  • 谢谢@Minsky,我从你的回答中得到启发来解决我的问题,我将如何在下面的答案中说明:)
  • 如果使用mipmap会怎样?
【解决方案3】:

我也遇到了类似的问题,在我的情况下,我必须根据内容为每个活动动态设置标题。

所以这对我有用。

actionBar.setTitle("  " + yourActivityTitle);

如果你想要的只是间距,这是我能想到的最简单的解决方案。

【讨论】:

  • 为什么投反对票?不要认为这是一个错误的答案,只是另一种方式。
  • @idratherbeintheair 是的,我同意这不是“最干净”的方式,所以现在它只说最简单。但是,当您指出某些内容时,请发布替代解决方案。我遇到了这个问题,这是我在我的应用中使用的,所以我分享了。
  • 真的吗?此解决方案在具有不同 DPI 的不同屏幕上可能无法正常工作。
  • 我不会选择这个解决方案,因为我的应用程序确实需要更稳定的东西,但我想问问所有那些说“它不干净”的人。哦,天哪,这个问题的 CLEAN 解决方案在哪里?所有那些带有徽标的黑客,setPadding 在我看来也不干净!只是阅读 cmets,有多少人也有这些问题。在标题上设置 android:paddingLeft - 如果它有效,那将是 CLEAN。我们被留在黑暗中发明黑客,因为出于某种原因,它不能按照它应该工作的方式工作。所以没有什么是“不干净的”。
  • 更简洁的解决方案是在布局 XML 中使用 app:titleMarginStart 属性。
【解决方案4】:

这就是我能够在主页图标和标题之间设置填充的方式。

ImageView view = (ImageView)findViewById(android.R.id.home);
view.setPadding(left, top, right, bottom);

我找不到通过 ActionBar xml 样式自定义它的方法。也就是说,下面的 XML 不起作用:

<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">        
    <item name="android:titleTextStyle">@style/ActionBarTitle</item>
    <item name="android:icon">@drawable/ic_action_home</item>        
</style>

<style name="ActionBarTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingLeft">12dp</item>   <!-- Can't get this padding to work :( -->
</style>

但是,如果您希望通过 xml 实现此目的,这两个链接可能会帮助您找到解决方案:

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

(这是用于在操作栏中显示主页图标的实际布局) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml

【讨论】:

  • @Dushyanth 我刚刚尝试过,但在 imageview 上显示空指针异常。我在操作栏中同时拥有 homeUpIndicator 和主页图标。
  • 这仅适用于 API >= 11,因为 android.R.id.home 是在 API 11 中引入的。我使用 actionbarcompat 在预 Honeycomp 设备上也有一个操作栏。那里怎么处理?
  • 有点小技巧。请参阅下面 Cliffus 的答案以获得更清洁的解决方案。
  • home 间距不再使用padding 设置,它似乎从 api 17 开始使用marginEnd - 这可能会破坏这个解决方案。见下面我的
  • @tobias R.id.home 一直存在,甚至在 11 级之前。它只是不可用
【解决方案5】:

这是 Material Design 中的一个常见问题,因为您可能希望将工具栏标题与下面片段中的内容对齐。为此,您可以通过在您的工具栏.xml 布局中使用属性 contentInsetStart="72dp" 来覆盖“12dp”的默认填充,如下所示

工具栏.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/app_theme_color"
    app:contentInsetStart="72dp"/>

然后在你的活动中,调用

Toolbar toolbar = (Toolbar) activity.findViewById(R.id.toolbar);
toolbar.setTitle("Title Goes Here");

你最终会得到这个:

【讨论】:

  • 这对我来说根本不起作用。请告诉我设置为活动的样式
  • 这是正确的做法。还有app:titleMarginStart="dimension"直接定位标题。
  • 认为对于大多数用户来说这将是“正确”的答案。作为一种魅力,谢谢!
  • 如果问题是关于主页图标和标题之间的填充,这怎么是“正确”答案?此处未提及主页图标(也未提及徽标或任何变体)。如果contentInsetStart 在主页图标和标题之间放置空格,答案至少可以这样说。我刚才对contentInsetStart 的测试似乎将空格放在 徽标之前(诚然与主页图标不同)。
【解决方案6】:

如果您使用 AppCompat 中的工具栏(android.support.v7.widget.Toolbar,>= 修订版 24,2016 年 6 月),则可以使用以下值更改图标和标题之间的填充:

  app:contentInsetStartWithNavigation="0dp"

为了改进我的答案,您可以直接在 Activity 内的工具栏上使用它,也可以为工具栏创建一个新的布局文件。在这种情况下,您只需在每个需要的视图上使用 include 属性导入工具栏的 @id。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>

然后你可以在你的activity.xml中导入你的布局

<include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

【讨论】:

  • 太棒了。如果您可以提供与 XML 相关的示例以阐明将其放置在何处,那就更好了。 (我知道这条线应该放在哪里)
  • @JohnPang 我详细的回答了,希望能帮助你理解如何使用这个属性。
  • @Bolein95 你在使用支持库吗?为了能够帮助您,请提供更多信息。
  • 值得注意的是,这个参数是在设计库的第 24 版中引入的。因此,如果您在 23 版中被困在 Eclipse 中(就像我直到昨天一样……),您将无法访问它。
  • @FloriantT 谢谢你的精确,我已经更新了我对你评论的回答。
【解决方案7】:

对我来说,只有以下组合有效,从 API 18 到 24 进行了测试

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"

“app”中的位置是:xmlns:app="http://schemas.android.com/apk/res-auto"

例如。

 <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/SE_Life_Green"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                >
                .......
                .......
                .......
            </android.support.v7.widget.Toolbar>

【讨论】:

  • 非常感谢。 @Ajit
  • 太棒了。如果您可以提供与示例相关的 XML 以阐明将其放置在何处,那就更好了。 (我知道这条线应该放在哪里)
  • 你好@JohnPang,你可以把它放在你布局的工具栏中,如上所示。
【解决方案8】:

使用titleMarginStart 对我有用。 Xamarin 示例:

<android.support.v7.widget.Toolbar
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/toolbar"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:minHeight="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:titleMarginStart="24dp"/>

像这样设置标志:

mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
SetSupportActionBar(mToolbar);
SupportActionBar.SetLogo(Resource.Drawable.titleicon32x32);
SupportActionBar.SetDisplayShowHomeEnabled(true);
SupportActionBar.SetDisplayUseLogoEnabled(true);
SupportActionBar.Title = "App title";

【讨论】:

  • 你是个天才。 +1
【解决方案9】:

我在标题前使用了 \t 并为我工作。

【讨论】:

    【解决方案10】:

    我在我的应用程序徽标右侧使用自定义图像而不是默认标题文本。这是以编程方式设置的,如

        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setDisplayUseLogoEnabled(true);
        actionBar.setCustomView(R.layout.include_ab_txt_logo);
        actionBar.setDisplayShowCustomEnabled(true);
    

    上述答案对我来说的问题是 @Cliffus 的建议对我不起作用,因为其他人在 cmets 中概述了问题,而 @dushyanth 程序化填充设置在过去可能有效,我认为事实是现在使用 android:layout_marginEnd="8dip" 设置间距,因为 API 17 手动设置填充应该无效。查看他发布到 git 的链接以验证其当前状态。

    对我来说一个简单的解决方案是在 actionBar 中的自定义视图上设置负边距,就像 android:layout_marginLeft="-14dp" 一样。快速测试表明它适用于我在 2.3.3 和 4.3 上使用 ActionBarCompat

    希望这对某人有所帮助!

    【讨论】:

    • @Diri 你可以添加更多我们可以在上,下,左,右制作动作栏
    • @amitsharma - 我不确定你的意思是什么 - 你的意思是从屏幕顶部移动操作栏吗?如果是这样,我认为您需要创建一个自定义操作栏视图来执行此操作 - 听起来它可能不是很好的用户体验 :)
    • 在那种情况下,我不知道您所说的“你可以添加更多,我们可以在上、下、左、右制作操作栏吗”
    【解决方案11】:

    我通过使用自定义导航布局解决了这个问题

    使用它,您可以自定义操作栏标题中的任何内容:

    build.gradle

    dependencies {
        compile 'com.android.support:appcompat-v7:21.0.+'
        ...
    }
    

    AndroidManifest.xml

    <application
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name">
            <activity
                android:name=".MainActivity"
                android:theme="@style/ThemeName">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
    </application>
    

    样式.xml

    <style name="ThemeName" parent="Theme.AppCompat.Light">
       <item name="actionBarStyle">@style/ActionBar</item>
       <item name="android:actionBarStyle" tools:ignore="NewApi">@style/ActionBar</item>
    

    <style name="ActionBar" parent="Widget.AppCompat.ActionBar">
       <item name="displayOptions">showCustom</item>
       <item name="android:displayOptions" tools:ignore="NewApi">showCustom</item>
    
        <item name="customNavigationLayout">@layout/action_bar</item>
       <item name="android:customNavigationLayout" tools:ignore="NewApi">@layout/action_bar</item>
    
        <item name="background">@color/android:white</item>
       <item name="android:background">@color/android:white</item>
    

    action_bar.xml

    <?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/action_bar_title"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:gravity="center_vertical"
              android:drawableLeft="@drawable/ic_launcher"
              android:drawablePadding="10dp"
              android:textSize="20sp"
              android:textColor="@android:color/black"
              android:text="@string/app_name"/>
    

    【讨论】:

      【解决方案12】:

      我遇到了类似的问题,但操作栏中的 up 和自定义应用程序图标/徽标之间存在间距。 Dusyanth 以编程方式设置填充的解决方案对我有用(在应用程序/徽标图标上设置填充)。我试图找到 android.R.id.homeR.id.abs__homeActionBarSherlock only,因为这样可以确保向后兼容),它似乎适用于我测试过的 2.3-4.3 设备。

      【讨论】:

        【解决方案13】:

        对于我来说,是使用 Toolbar 解决的:

        ic_toolbar_drawble.xml

        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@drawable/ic_toolbar"
            android:right="-16dp"
            android:left="-16dp"/>
        </layer-list>
        

        在我的 Fragment 中,我检查了 api:

        if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
              toolbar.setLogo(R.drawable.ic_toolbar);
        else
              toolbar.setLogo(R.drawable.ic_toolbar_draweble);
        

        祝你好运!

        【讨论】:

          【解决方案14】:

          您可以像这样更改 DrawerArrow 的 drawableSize:

          <style name="MyTheme" parent="android:Theme.WithActionBar">
              <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
          </style>
          
          <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
              <item name="barLength">24dp</item>
              <item name="arrowShaftLength">24dp</item>
              <item name="arrowHeadLength">10dp</item>
              <item name="drawableSize">42dp</item> //this is your answer
          </style>
          

          这不是正确答案,因为在更改drawableSize(drawableSize = width = height)时,您不能选择填充边和DrawerArrow图标缩放。但是你可以从左边开始。从右边开始做

          findViewById(android.R.id.home).setPadding(10, 0, 5, 0);
          

          【讨论】:

            【解决方案15】:

            我用了setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight)这个方法,效果很好!

            int padding = getResources().getDimensionPixelSize(R.dimen.toolbar_content_insets);
            mToolbar.setContentInsetsAbsolute(padding, 0);
            

            【讨论】:

              【解决方案16】:

              当您使用自定义工具栏时,您可以使用

              toolbar = (Toolbar) findViewById(R.id.toolbar);
              toolbar.setTitle(R.string.activity_title);
              setSupportActionBar(toolbar);
              getSupportActionBar().setLogo(R.drawable.logo);
              

              并在您的工具栏布局中简单地设置app:titleMarginStart="16dp"

              注意一定要把icon设置成logo,不要用getSupportActionBar().setIcon(R.drawable.logo) 改为使用: getSupportActionBar().setLogo(R.drawable.logo)

              【讨论】:

                【解决方案17】:

                我使用AppBarLayout 和自定义ImageButton 这样做。

                <android.support.design.widget.AppBarLayout
                    android:id="@+id/appbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:elevation="0dp"
                    android:background="@android:color/transparent"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
                
                   <RelativeLayout
                       android:layout_width="match_parent"
                       android:layout_height="match_parent">
                
                       <ImageView
                           android:layout_width="32dp"
                           android:layout_height="32dp"
                           android:src="@drawable/selector_back_button"
                           android:layout_centerVertical="true"
                           android:layout_marginLeft="8dp"
                           android:id="@+id/back_button"/>
                
                       <android.support.v7.widget.Toolbar
                           android:id="@+id/toolbar"
                           android:layout_width="match_parent"
                           android:layout_height="?attr/actionBarSize"
                           app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
                    </RelativeLayout>    
                </android.support.design.widget.AppBarLayout>
                

                我的 Java 代码:

                findViewById(R.id.appbar).bringToFront();
                Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
                setSupportActionBar(toolbar);
                final ActionBar ab = getSupportActionBar();
                getSupportActionBar().setDisplayShowTitleEnabled(false);
                

                【讨论】:

                  【解决方案18】:

                  你也可以通过方法实现:

                  Drawable d = new InsetDrawable(getDrawable(R.drawable.nav_icon),0,0,10,0);
                  mToolbar.setLogo(d);
                  

                  【讨论】:

                    【解决方案19】:

                    在您的 XML 中,在您的工具栏视图中设置app:titleMargin,如下所示:

                    <androidx.appcompat.widget.Toolbar
                                android:id="@+id/toolbar"
                                android:layout_width="match_parent"
                                android:layout_height="?attr/actionBarSize"
                                app:titleMarginStart="16dp"/>
                    

                    或者在你的代码中:

                    toolbar.setTitleMargin(16,16,16,16); // start, top, end, bottom
                    

                    【讨论】:

                      【解决方案20】:

                      只需包括:

                          app:titleMargin="10dp"
                      

                      在您的 xml 文件中,例如:

                          <androidx.appcompat.widget.Toolbar
                          android:id="@+id/tbrMain"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          app:titleMargin="10dp"
                          android:minHeight="?attr/actionBarSize"
                          android:theme="?attr/actionBarTheme" />
                      

                      【讨论】:

                        【解决方案21】:

                        这项工作为我添加填充到标题和ActionBar 图标我以编程方式设置。

                         getActionBar().setTitle(Html.fromHtml("<font color='#fffff'>&nbsp;&nbsp;&nbsp;Boat App </font>"));
                        

                        【讨论】:

                          【解决方案22】:
                          <string name="app_name">"    "Brick Industry</string>
                          

                          只需为您的应用名称添加" " 它会在图标和标题之间添加空格

                          【讨论】:

                          • 这还不错,我不知道为什么它如此落伍
                          • 也许有时最简单的解决方案是最好的!谢谢