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

时间:2015-10-20 10:13:52

标签: android android-appcompat android-toolbar appcompat-v7-r23

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

  1. 左侧的自定义按钮(图标+文字)
  2. 自定义按钮后的分隔符
  3. 按钮高度应与工具栏(无边距)相同
  4. 以下示例图片说明了我的要求: enter image description here

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

    1. 右侧按钮有上/下边距 - 它们小于工具栏
    2. 我无法添加分隔符。
    3. 左按钮(来自自定义视图)小于工具栏高度。
    4. 我的问题:

      1. 我是否真的需要自定义视图才能在左侧添加自定义按钮?
      2. 如何在左侧添加分隔符?
      3. 如何使按钮高度与工具栏高度相同?

2 个答案:

答案 0 :(得分:31)

Toolbar基本上是FrameLayout,因此您可以随意添加布局标记。在你的情况下,似乎以下内容似乎足够了:

<强> layout.xml

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="?attr/actionBarSize"
        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_width="match_parent"
            android:layout_height="match_parent"
            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:width="1dp" />

    <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.*资源。

<强>结果

result image

答案 1 :(得分:0)

 <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
      />

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