自定义半透明 Android ActionBar

发布于 2024-11-24 21:47:20 字数 2926 浏览 2 评论 0原文

我一直在互联网上搜索(例如 Android 文档、此处的答案等),寻找我认为相当琐碎问题的答案。如何实现类似 Google Music< 中的半透明操作栏/a> 和 YouTube(链接是图像示例)?

我希望视频内容能够全屏显示,并且不受操作栏的限制/下推,同时仍然利用内置 UI 组件的优势。显然我可以使用完全自定义的视图,但如果可能的话我宁愿利用 ActionBar。

清单

<activity
    android:name="videoplayer"
    android:theme="@android:style/Theme.Holo"
    android:launchMode="singleTop"
    android:configChanges="keyboardHidden|orientation"/>

活动

// Setup action bar
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
View customActionBarView = getLayoutInflater().inflate(R.layout.player_custom_action_bar, null);
actionBar.setCustomView(customActionBarView,
                        new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
                                                   R.dimen.action_bar_height));
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

菜单

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/button1"
        android:icon="@drawable/button1"
        android:showAsAction="always"/>

    <item
        android:id="@+id/button2"
        android:icon="@drawable/button2"
        android:showAsAction="always"/>
</menu>

自定义操作栏视图

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_action_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:background="@color/TranslucentBlack">

    <!--Home icon with arrow-->
    <ImageView
        android:id="@+id/home"
        android:src="@drawable/home"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

    <!--Another image-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:visibility="visible"/>

    <!--Text if no image-->
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:visibility="gone"/>

    <!--Title-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingLeft="20dp"
        android:gravity="center_vertical"/>
</LinearLayout>

I've been scouring the interwebs (e.g. Android documentation, answers here, etc.) for the answer to what I thought would be a fairly trivial question. How do you achieve a translucent action bar like the ones in Google Music and YouTube (links are image examples)?

I want video content to be full screen and not constrained/pushed down by the action bar while still leveraging the benefits of a built in UI component. I can obviously use a completely custom view, but I'd rather leverage the ActionBar if possible.

Manifest

<activity
    android:name="videoplayer"
    android:theme="@android:style/Theme.Holo"
    android:launchMode="singleTop"
    android:configChanges="keyboardHidden|orientation"/>

Activity

// Setup action bar
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
View customActionBarView = getLayoutInflater().inflate(R.layout.player_custom_action_bar, null);
actionBar.setCustomView(customActionBarView,
                        new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
                                                   R.dimen.action_bar_height));
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

Menu

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/button1"
        android:icon="@drawable/button1"
        android:showAsAction="always"/>

    <item
        android:id="@+id/button2"
        android:icon="@drawable/button2"
        android:showAsAction="always"/>
</menu>

Custom ActionBar View

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_action_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:background="@color/TranslucentBlack">

    <!--Home icon with arrow-->
    <ImageView
        android:id="@+id/home"
        android:src="@drawable/home"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

    <!--Another image-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:visibility="visible"/>

    <!--Text if no image-->
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:visibility="gone"/>

    <!--Title-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingLeft="20dp"
        android:gravity="center_vertical"/>
</LinearLayout>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

青衫负雪 2024-12-01 21:47:20

如果您希望 Activity 全屏显示,但仍显示操作栏,但使用 alpha,则必须在 Activity 的 onCreate() 中请求操作栏的叠加模式:

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

//getWindow().requestFeature(WindowCompat.FEATURE_ACTION_BAR_OVERLAY); << Use this for API 7+ (v7 support library) 

然后 after您调用 setContentView(..) (因为 setContentView(..) 还会在设置内容旁边初始化操作栏)您可以在操作栏上设置背景可绘制对象

getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_bg));

:是一个可绘制的形状将 alpha 放入 res/drawable 中:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="#BB000000" /> 
</shape>

您也可以通过创建 ColorDrawable 来完全以编程方式完成此操作:

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(128, 0, 0, 0)));

否则,您当然可以完全隐藏操作栏;在这种情况下,您可以在清单中为您的活动设置自定义主题:

@android:style/Theme.NoTitleBar.Fullscreen

或通过调用以编程方式设置

getActionBar().hide();

If you want your activity to be fullscreen but still show an actionbar, but with an alpha you have to request overlaymode for the actionbar in onCreate() of your activity:

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

//getWindow().requestFeature(WindowCompat.FEATURE_ACTION_BAR_OVERLAY); << Use this for API 7+ (v7 support library) 

Then after you call setContentView(..) (since setContentView(..) also initializes the actionbar next to setting the content) you can set a background drawable on your actionbar:

getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_bg));

which can be a shape drawable with an alpha put in res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="#BB000000" /> 
</shape>

You could also do this completely programatically by creating a ColorDrawable:

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(128, 0, 0, 0)));

Otherwise ofcourse you can hide the actionbar completely; in that case you can set a custom theme on your activity in your manifest:

@android:style/Theme.NoTitleBar.Fullscreen

or programmatically by calling

getActionBar().hide();
只是偏爱你 2024-12-01 21:47:20

除了正确答案之外,如果您使用的是 AppcomatActivity,请调用 supportRequestWindowFeature 而不是

旧版本:
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

您要使用:

@Override
protected void onCreate(Bundle savedInstanceState) {
    supportRequestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
    super.onCreate(savedInstanceState);
}

In addition to the correct answer, if you are using AppcomatActivity, call supportRequestWindowFeature instead of

Old Version:
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

You want to use:

@Override
protected void onCreate(Bundle savedInstanceState) {
    supportRequestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
    super.onCreate(savedInstanceState);
}
无边思念无边月 2024-12-01 21:47:20

我认为您应该能够使用窗口标志FEATURE_ACTION_BAR_OVERLAY来做到这一点。

在您的 Activity 中调用 setContentView() 之前,

调用:

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

它将使用覆盖的 ActionBar 而不是下推窗口。

I think you should be able to do this using the Window flag FEATURE_ACTION_BAR_OVERLAY.

Before you call setContentView() in your activity,

Call:

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

And it will use an overlaid ActionBar instead of pushing down your window.

度的依靠╰つ 2024-12-01 21:47:20

上面的代码对于制作操作栏来说是完全正确的。

而不是

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(128, 0, 0, 0)))

使用

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

这种方式,您将能够看到操作栏完全透明。

The above code is absolutely correct for making an action bar.

Instead of

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(128, 0, 0, 0)))

use

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

In this way, you will able to see the action bar fully transparent.

可是我不能没有你 2024-12-01 21:47:20

这是我如何让它工作的:

以编程方式请求操作栏覆盖

       getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

1)必须通过您的活动“onCreate()”方法请求通过调用此“requestFeature()” 在调用“setContentView(R.layout.my_layout)”之前:

2) 通过调用 setBackgroundDrawable() 设置操作栏颜色,如下所示:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00212121")) );

此方法需要引用到可绘制对象,或者您也可以使用颜色解析器来解析十六进制颜色值(前 2 位数字用于从 #00 到 #FF 开始的 alpha 通道)

请注意,我正在使用 actionBarSherlok getSupportActionBar()但这应该适用于任何操作栏。

如果您仍然无法使其工作,请尝试将其添加到您的主题样式中

<item name="windowActionBarOverlay">true</item>
 <item name="android:actionBarStyle">@style/ActionBar.Transparent.Example</item>
 <item name="android:windowActionBarOverlay">true</item>

Here is how I got this to work:

1) Request for actionbar overlay programmatically by calling

       getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

this 'requestFeature()' must be requested from your activity 'onCreate()' method before calling for 'setContentView(R.layout.my_layout)':

2) set the actionbar color by calling setBackgroundDrawable() like so:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00212121")) );

this method requires either a reference to a drawable or you can also use a color parser to parse a hex color value (first 2 digits are used for alpha channel starting at #00 to #FF)

Note that I am using actionBarSherlok getSupportActionBar() but this should work with any action bar.

If you still cant get this to work, try adding this to your theme style

<item name="windowActionBarOverlay">true</item>
 <item name="android:actionBarStyle">@style/ActionBar.Transparent.Example</item>
 <item name="android:windowActionBarOverlay">true</item>
舂唻埖巳落 2024-12-01 21:47:20

我只是想与您分享我为实现此目标而采取的步骤:

1)在您的活动的 OnCreate 中,

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

然后

getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

这是在 setContentView 之前完成的。

2)setContentView之后,可以执行以下操作

 getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(0, 100, 181, 246)));

其中alpha值为0表示完全透明。

I just like to share with you the steps I took to achieve this:

1) At the OnCreate of your activity,

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

then

getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

This is done before setContentView.

2) After setContentView, you can do the following

 getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(0, 100, 181, 246)));

Where the alpha value of 0 means it is fully transparent.

审判长 2024-12-01 21:47:20

步骤一:
首先,在 styles.xml 设置主题

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

第二步:
其次,您必须在 AndroidManifest.xml

    <activity android:name=".activity.YourActivity"
        android:theme="@style/AppTheme.NoActionBar"/>

步骤 III 中为您的活动设置主题:
现在,在您的活动布局文件中设置如下:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/agri_bg_login">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tool_bar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    </RelativeLayout>

最后,您可以在活动中设置它。

    Toolbar tool_bar = findViewById(R.id.tool_bar);
    setSupportActionbar(tool_bar);
    getSupportActionbar().setTitle("Your actionbar title");
    getSupportActionbar().setDisplayHomeAsUpEnabled(true);

就这样,您将获得透明操作栏的结果。另外,如果您想显示抽屉切换按钮和菜单,它会显示它们。

Step I :
Firstly, Set your theme at styles.xml

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

Step II :
Second, you have to set theme to your activity at AndroidManifest.xml

    <activity android:name=".activity.YourActivity"
        android:theme="@style/AppTheme.NoActionBar"/>

Step III :
Now, In your activity layout file set like this:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/agri_bg_login">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tool_bar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    </RelativeLayout>

Finally, You can set it in your activity.

    Toolbar tool_bar = findViewById(R.id.tool_bar);
    setSupportActionbar(tool_bar);
    getSupportActionbar().setTitle("Your actionbar title");
    getSupportActionbar().setDisplayHomeAsUpEnabled(true);

That's all, You'll get result with transparent Actionbar. Also, Here if you want to display drawer toggle button and menu, It'll show them.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文