如何使用左侧的自定义按钮创建工具栏?

Posted

技术标签:

【中文标题】如何使用左侧的自定义按钮创建工具栏?【英文标题】:How to create toolbar with custom button on the left? 【发布时间】:2015-10-20 10:13:51 【问题描述】:

我是 android 开发新手,在创建自定义工具栏时遇到了很大的问题。我的要求:

    左侧的自定义按钮(图标 + 文本) 自定义按钮后的分隔符 按钮高度应与工具栏相同(无边距)

这是解释我的要求的示例图像:

我尝试使用actionBar.setCustomView(v);,但它没有解决我的问题:

    右按钮有上/下边距 - 它们比工具栏小 我无法添加分隔线。 左键(来自自定义视图)小于工具栏高度。

我的问题:

    我真的需要自定义视图才能在左侧添加自定义按钮吗? 如何在左侧添加分隔线? 如何使按钮高度与工具栏高度相同?

【问题讨论】:

您有机会测试提供的解决方案吗? 【参考方案1】:

Toolbar 基本上是FrameLayout,因此您可以在布局标签中添加任何您想要的内容。在您的情况下,以下内容似乎就足够了:

layout.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_
    android:layout_
    android:background="?colorPrimary"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <LinearLayout
        android:layout_
        android:layout_
        android:divider="@drawable/divider"
        android:dividerPadding="8dp"
        android:orientation="horizontal"
        android:showDividers="end">

        <TextView
            android:id="@+id/toolbar_save"
            style="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle"
            android:layout_
            android:layout_
            android:background="?attr/selectableItemBackground"
            android:drawableLeft="@drawable/ic_action_check"
            android:drawablePadding="8dp"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="Save"
            android:textAllCaps="true" />

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

divider.xml

将此添加到您的/res/drawable 文件夹。这在上面的代码中用作LinearLayout 分隔符。

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

    <size android: />

    <solid android:color="@android:color/white" />

</shape>

代码

private void setupToolbar() 
    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
    // Hide the title
    getSupportActionBar().setTitle(null);
    // Set onClickListener to customView
    TextView tvSave = (TextView) findViewById(R.id.toolbar_save);
    tvSave.setOnClickListener(new View.OnClickListener() 
        @Override
        public void onClick(View v) 
            // TODO
        
    );

就右侧的项目而言:只需使用默认的onCreateOptionsMenu 方法并膨胀对应的R.menu.* 资源即可。

结果

【讨论】:

【参考方案2】:
 <android.support.v7.widget.Toolbar
        android:layout_
        android:layout_
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
      />

你还需要 app:contentInsetStartWithNavigation="0dp" 到工具栏

【讨论】:

以上是关于如何使用左侧的自定义按钮创建工具栏?的主要内容,如果未能解决你的问题,请参考以下文章

来自图像的自定义 UIToolBar

在我的自定义按钮中打开 Airplay 弹出框

如何从 textAngular 工具栏上的自定义按钮插入文本/符号

如何在单独的自定义视图中为按钮创建操作

如何使用创建的自定义 IBDesignable 类从情节提要中更改按钮的角半径

SignIn with Apple 的自定义圆形按钮