如何设置操作栏的主题以匹配此图片?

时间:2017-01-10 23:43:11

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

我正在处理应用的用户界面,我想让操作栏看起来像这样:enter image description here

这就是它现在的样子:enter image description here

这是我的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中尝试过几个不同的东西,但似乎无法获得徽标和&#34;详细信息&#34;要同时显示的文本。另外,有没有办法让箭头匹配?或者这只取决于API级别?

感谢您的帮助!

1 个答案:

答案 0 :(得分: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>

there