如何在android的工具栏中将图标居中答案

【问题标题】：how to center icons in toolbar in android如何在android的工具栏中将图标居中
【发布时间】：2015-07-01 06:30:59
【问题描述】：

我问了一个类似的问题here... 我在答案中有一些教程。但这个问题是不同的。因为这些方法都不适用于我的项目。

我希望工具栏中的所有图标居中

我测试了所有可用的方式...但图标总是浮动在左侧。

我希望图标居中（我更喜欢左图标向左浮动，右图标向右浮动，其他图标浮动居中）

Activity.Main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"   // I add vertical
    tools:context=".MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"  // I add match_parent
        android:layout_gravity="center" />   // I add center
</LinearLayout>.

也在 tool_bar.xml 中

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:layout_height="wrap_content"
    android:layout_height="match_parent"
    android:background="@color/ColorPrimary"
    android:elevation="2dp"
    android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"
    android:layout_gravity="center"  // I add center
    xmlns:android="http://schemas.android.com/apk/res/android" />

在 main_menu.xml

中

<menu 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" tools:context=".MainActivity">

<item
    android:id="@+id/action_forward"

    android:title="forward"
    android:icon="@drawable/ic_action_arrow_forward"
    app:showAsAction="always"
    ></item>


<item
    android:id="@+id/action_zoom_in"
    android:title="zoom in"
    android:icon="@drawable/ic_action_zoom_in"
    app:showAsAction="always"
    ></item>
<item ...

对于<item> 中的上述代码（main_menu.xml），我尝试了所有这些代码：

android:layout_width="match_parent"
android:layout_weight=".2" // 20%
android:gravity="center"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"

我真的不知道该怎么做才能对齐图标。我用谷歌搜索了几个小时，我尝试了所有的 senario

我怎么了？对于所有测试，我看不到任何变化...

之前我想要 pic2（在上图中）但现在我只想居中！

对于我的所有测试，我只得到图片 1。没有任何变化。

【问题讨论】：

实际上，您并没有将所有项目都居中对齐。一个是左对齐，一个是右对齐，4 个是居中对齐。所以我的建议是不要在Toolbar 中使用菜单，而是使用RelativeLayout。
为什么不使用自定义布局来代替工具栏？

标签： android android-layout android-toolbar android-menu

【解决方案1】：

解决问题，享受:)

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    android:background="?attr/colorPrimary">
    <!-- Code for your Left Button -->
    <ImageView
        android:id="@+id/yourId"
        android:src="@mipmap/yourLeftIcon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:layout_gravity="left" />
        <!-- Here is the main code for your Middle Buttons -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_gravity="center"
            android:gravity="center">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button2"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button3"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher"
                android:id="@+id/button4" />
        </LinearLayout>
    <!-- Code for your Right Button -->
    <ImageView
        android:id="@+id/yourId"
        android:src="@mipmap/yourRightIcon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:layout_gravity="right" />
</android.support.v7.widget.Toolbar>

【讨论】：

通过 (a) 取出所有边距 (b) 具有固定的图标高度和宽度以及 (c) 将 android:layout_weight="1" 添加到中间按钮的 LinearLayout 中，我得到了更好的结果它填充了剩余的中间空间并更好地居中。

【解决方案2】：

工具栏与任何其他视图一样。您可以直接向其中添加子项，然后像普通视图一样访问。

这不是你问题的确切答案，但它会告诉你要走的路。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar   xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@android:color/holo_red_light"
    android:elevation="2dp"
    android:theme="@style/Base.ThemeOverlay.AppCompat.Dark">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button2"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button3"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:id="@+id/button4" />

    </LinearLayout>

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

然后在你的主要片段或其他任何地方你可以访问这样的东西。

    Toolbar mToolbar = (Toolbar) root.findViewById(R.id.tool_bar);

    Button button1 = (Button) mToolbar.findViewById(R.id.button1);
    Button button2 = (Button) mToolbar.findViewById(R.id.button2);
    Button button3 = (Button) mToolbar.findViewById(R.id.button3);
    Button button4 = (Button) mToolbar.findViewById(R.id.button4);

您可以使用此方法以任何您喜欢的方式制作自定义工具栏。您可能希望使用相对布局。

【讨论】：

【解决方案3】：

也许对你有帮助：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

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

            <ImageView
                android:id="@+id/imgBack"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="left"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="4dp"
                android:src="@drawable/ic_action_back" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imgClear"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15dp"
                    android:src="@drawable/ic_action_discard" />

                <ImageView
                    android:id="@+id/imgStop"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15dp"
                    android:src="@drawable/ic_action_stop" />

                <ImageView
                    android:id="@+id/imgPath"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15dp"
                    android:src="@drawable/ic_action_merge" />

                <ImageView
                    android:id="@+id/imgToggle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_action_map" />
            </LinearLayout>

            <ImageView
                android:id="@+id/imgForward"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="right"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="4dp"
                android:src="@drawable/ic_action_forward" />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>


    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/mapPath"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appBar" />

</RelativeLayout>

在你的style.xml 写：

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

然后在manifest.xml：

<application
    android:name="com.ir.zanis.app.AppController"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme.NoActionBar"> <===See here===
      .......
      .............
       .............

【讨论】：

【解决方案4】：

你可以尝试申请

app:buttonGravity="center"

在工具栏上，这对我来说非常有用。

【讨论】：

【解决方案5】：

您应该尝试为父布局应用任何对齐方式。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<Button ...any attributes.../>
...any items...
</LinerLayout>

【讨论】：

我是为所有父母做的...没有变化...所有图标都向左浮动。
可能与另一个子对齐或父对齐冲突。给我们您的布局 xml

【解决方案6】：

我知道，这个解决方案很糟糕，但对我来说它有效。

首先，在 LinearLayout 中，您可以放置 3 个工具栏而不是 1 个：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <android.support.v7.widget.Toolbar android:id="@+id/bottomToolbarLeft"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="1.0"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <android.support.v7.widget.Toolbar android:id="@+id/bottomToolbarRight"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="1.0"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

</LinearLayout>

每个工具栏都应该有自己的菜单资源。

然后，你会得到类似的东西： Icons are centered, but left icon is not aligned to left border

最后，要对齐左图标，您可以简单地为左工具栏设置此参数：

android:layoutDirection="rtl"

结果是： The desired order

【讨论】：

【解决方案7】：

您可以通过以下方式编程：

mToolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            ImageView imageView = (ImageView)mToolbar.findViewById(R.id.logo);
            if( mToolbar == null ){
                return;
            }
            int toolbarWidth = mToolbar.getWidth();
            int imageWidth = imageView.getWidth();
            imageView.setX((toolbarWidth-imageWidth)/2);
        }
    });

自定义您的 layout_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"
            style="@style/Toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/toolbar_height"                                                                   
            android:background="@drawable/toolbar_background"
            android:focusable="false"                                
            app:titleTextAppearance="@style/AppTheme.Toolbar.Title">
            <ImageView
                android:id="@+id/logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/toolbar_logo"/>

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

【讨论】：