如何为我的操作栏设置主题以匹配此图像？答案

【问题标题】：How can I theme my action bar to match this image?如何为我的操作栏设置主题以匹配此图像？
【发布时间】：2017-05-25 15:04:17
【问题描述】：

我正在开发一个应用的 UI，我想让操作栏看起来像这样：

这就是现在的样子：

这是我的styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/sunshine_blue</item>
        <item name="colorPrimaryDark">@color/sunshine_dark_blue</item>
    </style>

    <!-- Main activity theme -->
    <style name="ForecastTheme" parent="AppTheme">
        <item name="actionBarStyle">@style/ActionBar.Solid.Sunshine.NoTitle</item>
    </style>

    <!-- Detail activity theme -->
    <style name="DetailTheme" parent="AppTheme">
        <item name="actionBarStyle">@style/ActionBar.Solid.Sunshine.Title</item>
    </style>

    <!-- Settings activity theme -->
    <style name="SettingsTheme" parent="AppTheme">
    </style>

    <!-- Main activity action bar styles -->
    <style name="ActionBar.Solid.Sunshine.NoTitle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="displayOptions">useLogo|showHome</item>
        <item name="logo">@drawable/ic_logo</item>
    </style>

    <!-- Detail activity action bar styles -->
    <style name="ActionBar.Solid.Sunshine.Title" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="displayOptions">useLogo|showHome</item>
        <item name="logo">@drawable/art_clear</item>
    </style>

    <!-- style for item selected on phone -->
    <style name="ForecastListStyle">
        <item name="android:choiceMode">none</item>
    </style>

</resources>

这是我的详细活动的布局文件：

<!-- Master layout -->
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-condensed"
            android:textSize="24sp"
            android:id="@+id/detail_day_textview" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-condensed"
            android:textSize="16sp"
            android:textColor="@color/fragment_detail_grey"
            android:id="@+id/detail_date_textview" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="16dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:textSize="96sp"
                    android:paddingStart="32dp"
                    android:paddingLeft="32dp"
                    android:id="@+id/detail_high_textview" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:textSize="48sp"
                    android:textColor="@color/fragment_detail_grey"
                    android:paddingStart="64dp"
                    android:paddingLeft="64dp"
                    android:id="@+id/detail_low_textview" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/detail_icon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textSize="22sp"
                    android:textColor="@color/fragment_detail_grey"
                    android:id="@+id/detail_forecast_textview" />

            </LinearLayout>
        </LinearLayout>

        <!-- Humidity, wind, pressure -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:textSize="22sp"
            android:layout_margin="2dp"
            android:id="@+id/detail_humidity_textview" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:textSize="22sp"
            android:layout_margin="2dp"
            android:id="@+id/detail_pressure_textview" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:textSize="22sp"
            android:layout_margin="2dp"
            android:id="@+id/detail_wind_textview" />

    </LinearLayout>

</ScrollView>

这是我的 AndroidManifest.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android.sunshine.app" >

    <!-- This permission is necessary in order for Sunshine to perform network access. -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:theme="@style/ForecastTheme"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".DetailActivity"
            android:theme="@style/DetailTheme"
            android:label="@string/title_activity_detail"
            android:parentActivityName=".MainActivity">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.example.android.sunshine.app.MainActivity" />
        </activity>
        <activity
            android:name=".SettingsActivity"
            android:label="@string/title_activity_settings"
            android:theme="@style/SettingsTheme"
            android:parentActivityName=".MainActivity" >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.example.android.sunshine.app.MainActivity" />
        </activity>
        <provider
            android:authorities="com.example.android.sunshine.app"
            android:name=".data.WeatherProvider" >
        </provider>
    </application>

</manifest>

我在 displayOptions 中尝试了几种不同的方法，但似乎无法同时显示徽标和“详细信息”文本。另外，有没有办法让箭头匹配？还是这仅取决于 API 级别？

感谢您的帮助！

【问题讨论】：

标签： android xml android-layout user-interface android-actionbar

【解决方案1】：

最好在工具栏/应用栏中使用菜单项。这样操作栏中不会有额外的空间或任何错位的项目。

<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_search"
        android:icon="@drawable/ic_action_search"
        android:orderInCategory="100"
        android:title="@string/action_share"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_share"
        android:icon="@drawable/ic_action_share"
        android:orderInCategory="101"
        android:title="@string/action_search"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="102"
        android:title="@string/action_settings"
        app:showAsAction="never" /> </menu>

请记住，使用工具栏更容易达到您的目的

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

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

Here's complete tutorial

【讨论】：

如果我想使用工具栏，我需要将什么导入到我的项目中？我在 gradle.build compile 'android.support.v7.widget.Toolbar:21.0.2' 中尝试这个，有我的活动类import android.widget.Toolbar; 并扩展 AppCompatActivity 但它只是在扩展子句上说“无法解析符号”。我如何知道要导入什么支持库以及如何使用它？
从 libs 目录中删除支持库 jar，因为您已经在 gradle 文件中定义了支持库。依赖项 { 编译 fileTree(dir: 'libs', include: ['*.jar']) 编译 'com.android.support:support-v4:18.0.+' 编译 'com.android.support:appcompat-v7:18.0 .+' } 支持库已更新，因此我会将您的 gradle 依赖项更新为： compile 'com.android.support:support-v4:19.1.+'