工具栏图像居中

时间：2014-12-17 20:32:21

标签： android android-toolbar

使用上一个android.support.v7.widget.Toolbar我想在工具栏中居中一个图像，但它一直停留在左边。

对我而言，最好的方法是使用toolbar.setLogo()方法并将徽标置于中心位置，但我看不到任何方法。

我使用Toolbar的布局：

  <android.support.v7.widget.Toolbar style="@style/ToolBarStyle"
                                   xmlns:android="http://schemas.android.com/apk/res/android"
                                   android:layout_width="match_parent"
                                   android:layout_height="wrap_content"
                                   android:background="?attr/colorPrimary"
                                   android:minHeight="@dimen/abc_action_bar_default_height_material">

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

是否有可能将图像（徽标）添加到工具栏并居中？ 以编程方式或在布局中？

9 个答案:

答案 0 :(得分：121)

工具栏只是一个ViewGroup，您可以根据需要自定义。

试试这个：

<android.support.v7.widget.Toolbar
   style="@style/ToolBarStyle"
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="?attr/colorPrimary"
   android:minHeight="@dimen/abc_action_bar_default_height_material">

    <ImageView
        android:layout_width="wrap_content"
        android:contentDescription="@string/logo"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>

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

这应该将您的imageView置于工具栏的中心。

答案 1 :(得分：32)

如果您有任何视图且无法使徽标居中，那将是因为居中基于剩余空间而非整个工具栏。

要确保徽标居中，请尝试使用图层列表作为工具栏的背景，而不是尝试将图像用作视图。

<强> toolbar.xml 

<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="?attr/actionBarSize"
    android:background="@drawable/toolbar_background"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways"
    app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>

<强> toolbar_background.xml 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="@color/colorPrimary" />
    </shape>
  </item>
  <item>
    <bitmap android:src="@drawable/logo" android:gravity="center" />
  </item>
</layer-list>

这应该确保具有特定背景颜色的居中徽标。

答案 2 :(得分：8)

这不是最好的解决方案，但即使你有按钮或菜单项，也可以解决这个问题。

试

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

    <android.support.v7.widget.Toolbar
       style="@style/ToolBarStyle"
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:minHeight="@dimen/abc_action_bar_default_height_material"/>

    <ImageView
        android:layout_width="wrap_content"
        android:contentDescription="@string/logo"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>

</FrameLayout>

答案 3 :(得分：2)

我有类似的问题。我尝试使用Blueberry建议的图层列表方法，但是一旦我为徽标投入高分辨率资产，该解决方案就不再适用了。图层列表中的位图有一个错误：它会放大较小的图像以适应空间但不会缩小较大的图像。因此，只要你可以使用在放大时看起来有颗粒/像素化的微小图像，图层列表就可以正常工作。

要解决此问题并设置居中的高分辨率徽标，我已从工具栏中完全删除android:background属性，将android:background="?attr/colorPrimary"添加到我的AppBarLayout父级，然后抛出这个可怕的代码进入我的活动的onCreate方法：

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

    ActionBar ab = getSupportActionBar();
    if (ab != null && toolbar != null)
    {
        // Hide the title text.
        ab.setDisplayShowTitleEnabled(false);

        // Convert and show the logo.
        toolbar.addOnLayoutChangeListener(new View.OnLayoutChangeListener()
        {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom)
            {
                ActionBar ab = getSupportActionBar();
                if (ab != null)
                {
                    Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.logo);
                    Bitmap bmp2 = Bitmap.createBitmap(toolbar.getWidth(), toolbar.getHeight(), bmp.getConfig());
                    Bitmap bmp3 = Bitmap.createScaledBitmap(bmp, bmp.getWidth() * toolbar.getHeight() / bmp.getHeight(), toolbar.getHeight(), true);
                    Canvas canvas = new Canvas(bmp2);
                    canvas.drawBitmap(bmp3, (toolbar.getWidth() / 2) - (bmp3.getWidth() / 2), 0, null);
                    BitmapDrawable background = new BitmapDrawable(getResources(), bmp2);
                    ab.setBackgroundDrawable(background);
                }
            }
        });
    }

它的工作原理是创建一个工具栏大小的画布和一个比例缩放版本的徽标，将新调整大小的徽标绘制到中心的画布上，最后将绘制的位图设置为动作的背景杆

从好的方面来说，这种方法可以让您完全控制放置，大小调整等。不限于您在XML中可以做的任何事情。这很糟糕，因为只要工具栏布局发生变化，它就会被定期调用，这意味着会有性能影响。但是，当你的设计团队（不关心材料设计的第一件事）需要有背景标识并且浪费五个小时寻找上面的解决方案时，性能就会停止 - 你只是希望该死的东西能起作用。上面的代码非常糟糕，绝望。

在Android开发中，我会让比我更强大的人指出“我做错了”并修复了上述代码中出现的任何性能问题/错误。它并没有改变层列表位图被破坏的事实，这是一个修复Android中愚蠢的错误（也应该不存在）的黑客攻击（应该不存在）。

答案 4 :(得分：1)

如果用户设置：

activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true); activity.getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_iconmenu);

之后做了类似

的事情 
<Toolbar ... >
   <ImageView ...>
   </ImageView>
</Toolbar>

然后工具栏内的图像也不会居中，导致主页按钮从布局中占用一些空间。图像的水平中心将偏向主图标宽度。所以最佳解决方案：
1.从原始图像.png资源中创建9-patch png 2.使用layer-list作为示例toolbar_background.xml创建来自9-patch with xml的drawable：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/white"/><!-- fill color under image(optional) -->
    <item>
        <nine-patch
        android:src="@drawable/toolbar_image" />
    </item>
</layer-list>


然后将toolbar_background资源设置为工具栏元素的背景：

<Toolbar android:background="toolbar_background" ...>
</Toolbar>


这就是全部。

答案 5 :(得分：1)

我喜欢Ruben Yoo's answer because of its simplicity给出的方法。它是明确的，易于遵循的，并且将所有代码更改保持在一起。

这是具有一些小的改进的更新版本：

<android.support.design.widget.AppBarLayout
    android:id="@+id/layout_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            android:src="@mipmap/ic_launcher"/>
    </FrameLayout>

</android.support.design.widget.AppBarLayout>

更改：

  1. 介绍了AppBarLayout父级
  2. 为框架和工具栏提供的显式尺寸?attr/actionBarSize
  3. ImageView与宽度和高度上的父尺寸匹配
  4. 徽标的大小调整为centerInside

答案 6 :(得分：0)

如果您需要在工具栏中居中一个更复杂的布局，而不仅仅是图片，这就是我放置到我的活动 onCreate（）中的内容： 

mToolbar.addOnLayoutChangeListener(
            new View.OnLayoutChangeListener() {
                @Override
                public void onLayoutChange(View view, int i, int i1, int i2, int i3, int i4, int i5, int i6, int i7) {
                    // Push layout to the center
                    int toolbarCenterX = (int) (mToolbar.getWidth() / 2.0 - mMiddleToolbarLayout.getWidth() / 2.0));
                    if(mMiddleToolbarLayout.getX() != toolbarCenterX) {
                        mMiddleToolbarLayout.setX(toolbarCenterX);
                    }
                }
            }
    );

当调用 onLayoutChange 时，您的布局宽度已经确定，因此您只需将其推到中心即可。

注意：当它不居中时，仅对中心工具栏（参见if条件）很重要，否则将在无限循环中重新调用此回调。

XML文件如下所示：

<android.support.v7.widget.Toolbar
...
>
    <LinearLayout
        android:id="@+id/middle_toolbar_layout"
        ...
    >
</android.support.v7.widget.Toolbar>

答案 7 :(得分：0)

您可以使用此代码：

     <android.support.v7.widget.Toolbar


        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"

        android:background="?attr/colorPrimary"

        app:popupTheme="@style/AppTheme.PopupOverlay">


        <ImageView
            android:layout_width="250dp"
            android:layout_height="match_parent"
            android:src="@drawable/apptitle"/>

答案 8 :(得分：0)

尝试：

in the first row

工具栏是一个ViewGroup，您可以对其进行自定义。

相关问题
最新问题