带有自定义图标的Android ActionBar？答案

【问题标题】：Android ActionBar with custom Icons?带有自定义图标的Android ActionBar？
【发布时间】：2015-11-24 06:29:40
【问题描述】：

我想创建一个如下所示的 Android ActionBar。

我怎样才能建立这样一个ActionBar。是否可以使用 Android Material Design 构建它？

【问题讨论】：

操作栏标签——你在左边的东西——作为 Android 5.0 的设计模式已被弃用，不属于 Material Design。材料设计文档describes their tab designs.
有没有和我在 Material Design 中展示的类似的东西？

标签： java android android-actionbar material-design

【解决方案1】：

我会使用 Android 设计支持库中的新工具栏

http://android-developers.blogspot.it/2015/05/android-design-support-library.html

使用 ToolBar 代替 ActionBar 可以让您更好地控制元素本身。

你可以在这里找到一篇好文章：

http://www.android4devs.com/2014/12/how-to-make-material-design-app.html

app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#3F51B5"
    android:theme="@style/ThemeOverlay.AppCompat.Dark" >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.TabLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:id="@+id/tabLayout"/>
    </FrameLayout>
</android.support.v7.widget.Toolbar>

main_activity_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">
    <include layout="@layout/app_bar" />
</RelativeLayout>

main_activity_onCreate()

toolBar = (Toolbar) findViewById(R.id.appBar);
toolBar.setTitle("Titolo");
setSupportActionBar(toolBar);

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_2));

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
</style>

【讨论】：

请解释Toolbar 将如何解决 OP 的问题。仅仅因为它会“让你对元素本身有更多的控制权”并不意味着Toolbar 直接支持 OP 正在寻找的 UI，也没有说明 Material Design 是否支持这一点。
我想我已经解释过了

【解决方案2】：

从技术上讲，您可以将这样的布局与多个元素拼接在一起。例如，您有一个标题布局，其中包含左侧的 TabLayout 和右侧的 Toolbar，而不是使用标准的 ActionBar。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:orientation="horizontal">

    <android.support.design.widget.TabLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <android.support.v7.widget.Toolbar
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

</LinearLayout>

此示例使用 AppCompat v7 和设计支持库。

您可以以某种方式（例如，相同的背景颜色）设置视图的样式，使其看起来像是一个单一的 UI 元素。

【讨论】：