如何在 viewpager 上获得透明的操作栏答案

【问题标题】：How to get a transparent actionbar over viewpager如何在 viewpager 上获得透明的操作栏
【发布时间】：2015-11-30 10:07:38
【问题描述】：

我正在尝试在 viewpager 上获得一个透明的操作栏。

我将windowActionBarOverlay 设置为true，将背景设置为

@android:color/transparent.

viewpager的顶部在actionBar的下方，但是actionBar是白色的，不透明。如何使 actionBar 透明，以便 viewpager 的顶部可见？

我到处搜索，只能找到将 windowActionBarOverlay 设置为 true 并且背景透明的答案，但这似乎不起作用。

我的活动扩展 AppCompatActivity 并在 onCreate 中将工具栏设置为操作栏：

  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);

活动xml是：

<android.support.v4.widget.DrawerLayout 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" android:id="@+id/drawer_layout"
android:layout_width="match_parent" android:layout_height="match_parent"
android:fitsSystemWindows="true" tools:openDrawer="start">

<include layout="@layout/app_bar_daily" android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView android:id="@+id/nav_view"
    android:layout_width="wrap_content" android:layout_height="match_parent"
    android:layout_gravity="start" android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_daily" app:menu="@menu/activity_daily_drawer" />

app_bar_daily xml：

<android.support.design.widget.CoordinatorLayout
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" android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
tools:context=".DailyActivity">

<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
    android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
        android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_daily" />

content_daily xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

样式 xml：

<!-- Base application theme. -->
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ACTION BAR STYLES -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowActionBarOverlay">true</item>

    <!-- Support library compatibility -->
    <item name="background">@android:color/transparent</item>
    <item name="windowActionBarOverlay">true</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />


<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

【问题讨论】：

标签： android android-actionbar

【解决方案1】：

使用没有操作栏的主题

使用工具栏创建布局（具有透明背景

 <LinearLayout  
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/darker_gray">

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

    <!-- Your view pager -->

</LinearLayout>

以编程方式将工具栏设置为您的操作栏 (setActionbar / setSupportActionBar)

【讨论】：

【解决方案2】：

在java类中，添加这个函数：

public void setCustomActionBar() {
        ActionBar actionBar = getActionBar();
        actionBar.setBackgroundDrawable(new         ColorDrawable(Color.parseColor("#60000000")));
        getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); 
        getActionBar().setCustomView(R.layout.actionbar_global);

    }

此外，您还可以创建一个 Action Bar 的布局 xml 作为其他普通布局文件。

【讨论】：