如何展现动作条和放大器的阴影;支持库对所有的Andr​​oid版本的工具栏？ [英] How to show the shadow of the ActionBar&Toolbar of the support library on all Android versions?

查看：329
本文介绍了如何展现动作条和放大器的阴影;支持库对所有的Andr​​oid版本的工具栏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个简单的问题：

我用的是新的支持库，它让我有一个工具栏的实例，甚至将其设置为活动的动作条（或使用默认的）。

如何自定义被抛在工具栏（或默认动作条）？

阴影

我试图用setElevation（他们两人的），但它似乎并没有在Android棒棒堂做任何事情。

另外，我找不到如何自定义在pre-棒棒糖版本的影子。是否有可能为这一个API？或者至少被拉伸（我没有找到，即使我已经尝试过）？

好了，我已经成功地找到下一个事情：

对于这两个棒棒糖和pre-棒棒糖，当你的活动使用正常AppCompat主题（如Theme.AppCompat.Light为例），阴影看起来应该很好。

然而，当你使用setSupportActionBar（并使用适当的主题，如Theme.AppCompat.Light.NoActionBar为例），你就会有阴影的一些问题。

有关pre-棒棒糖，你可以把工具栏下方的FrameLayout，这看起来完全像使用正常的主题之一，​​因为这样的：

 ＆LT; RelativeLayout的的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：工具=htt​​p://schemas.android.com/tool​​s
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：方向=垂直＆GT;

    ＆LT; android.support.v7.widget.Toolbar
        机器人：ID =@ + ID /工具栏
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：=了minHeight？ATTR / actionBarSize
        应用程序：主题=@风格/ ThemeOverlay.AppCompat.ActionBar/＆GT;

    ＆LT;的FrameLayout
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_below =@ + ID /工具栏
        机器人：前景=？机器人：windowContentOverlay
        机器人：能见度=@整数/ action_bar_shadow_background_visibility/＆GT;

    ＆LT;的TextView
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_below =@ + ID /工具栏
        机器人：文本=@字符串/参考hello world/＆GT;

＆LT; / RelativeLayout的＆GT;

您可以使用的FrameLayout作为活动的内容，或者用我做了什么。您还可以设置它的可见性通过把整数0 pre-棒棒糖2棒棒糖及以上，因为我已经与action_bar_shadow_background_visibility完成的。

这是一个丑陋的解决方案，但它的工作原理，但只适用于pre-棒棒糖版本。

在任何情况下，我还是没能找到一个方式来展现阴影很好的棒棒糖，如果我用setSupportActionBar。我尝试了工具栏和动作条上使用setElevation（用getSupportActionBar，之后调用setSupportActionBar）。

我还没有得到如何让动作条的标准高度，因为我注意到，有很多教程说用了minHeight的工具栏。请问这个AP preciate的帮助了。

谁能帮助我？

再次要清楚，这是我要问：

  • 为pre-棒棒糖，表明人关于这两个工具栏和动作条的支持库中使用相同的影子。
  • 在相同的棒棒糖（但使用一个棒棒糖了）
  • 附加：自定义阴影要对棒棒糖比较娇嫩（也许在所有版本的定制）
  • 附加：为什么工具栏得到了minHeight，而不是高度本身
    • 操作栏高度的价值，？

编辑：OK，这是据我已经做了这么远模仿棒棒堂的影子：

 ＆LT; RelativeLayout的的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：工具=htt​​p://schemas.android.com/tool​​s
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：方向=垂直＆GT;

    ＆LT; android.support.v7.widget.Toolbar
        机器人：ID =@ + ID /工具栏
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：=了minHeight？ATTR / actionBarSize
        应用程序：主题=@风格/ ThemeOverlay.AppCompat.ActionBar/＆GT;

    ＆LT;包括
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_below =@ + ID /工具栏
        布局=@布局/ toolbar_action_bar_shadow/＆GT;

    ＆LT;的TextView
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_below =@ + ID /工具栏
        机器人：文本=@字符串/参考hello world/＆GT;

＆LT; / RelativeLayout的＆GT;

RES /布局/ toolbar_action_bar_shadow.xml 

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;的FrameLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：前景=？机器人：windowContentOverlay/＆GT;

RES /布局-V21 / toolbar_action_bar_shadow.xml 

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; ImageView的的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：SRC =@可绘制/ msl__action_bar_shadow/＆GT;

RES /绘制-V21 / RES /布局/ msl__action_bar_shadow.xml 

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;层列表的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;

    ＆所述;！ - 用于棒棒糖和以上 - ＆GT;

    ＆LT;项目＆GT;
        ＆LT;形状
            机器人：抖动=真
            机器人：形状=矩形＆GT;
            ＆LT;梯度
                机器人：角=270
                机器人：endColor =＃00000000
                机器人：startColor =＃3300/＆GT;

            ＆LT;大小机器人：身高=10dp/＆GT;
        ＆LT; /形状＆GT;
    ＆LT; /项目＆GT;

＆LT; /层列表＆gt;

这是不完全一样，但它是相似的。

编辑：我仍然不知道为什么会发生。我认为，code我写上的问题是误导性的，因为所有有做的是设置背景。然而，在App我测试它仍然没有帮助。该应用程序我试图修复有上面的抽屉式导航工具栏上的。

对于一个时刻，我认为这可能是因为我做了一个自定义工具栏（从工具栏扩展），并且改变其阿尔法值（根据导航抽屉），但即使我使用普通的工具栏和禁用所有内容到相关的字母，它仍然无法正常工作。此外，不仅如此，但在一个完全新的项目，我试图设置一个半transpared背景的工具栏，并按照setElevation的方法得到了阴影。

现在，它甚至更难，我找到了原因这个问题，因为现在看来，这是不是因为透明度和自定义工具栏类，不是因为...

下面是有工具栏活动的布局，在此情况下，可以以任何方式帮助：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;的FrameLayout的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：工具=htt​​p://schemas.android.com/tool​​s
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent＆GT;

    ＆LT; android.support.v4.widget.DrawerLayout
        机器人：ID =@ + ID / activity_main__drawerLayout
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent＆GT;

        ＆LT;的FrameLayout
            机器人：ID =@ + ID / activity_main__fragmentContainer
            机器人：layout_width =match_parent
            机器人：layout_height =match_parent/＆GT;

        ＆LT;包括
            机器人：layout_width =240dp
            机器人：layout_height =match_parent
            机器人：layout_gravity =左
            机器人：layout_marginTop =？ATTR / actionBarSize
            布局=@布局/ activity_main__sliding_menu/＆GT;
    ＆LT; /android.support.v4.widget.DrawerLayout>

    ＆LT;的LinearLayout
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：方向=垂直＆GT;

        ＆LT; com.app.ui.Toolbar
            机器人：ID =@ + ID / activity_main__toolbar
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            机器人：ATTR / colorPrimary后台=
            安卓的layoutDirection =升
            机器人：=了minHeight？ATTR / actionBarSize
            应用程序：主题=@风格/ ThemeOverlay.AppCompat.ActionBar
            工具：忽略=UnusedAttribute/＆GT;

        ＆LT;！ - ＆LT;包括 - ＆GT;
        ！＆LT;  - 机器人：layout_width =match_parent - ＆GT;
        ！＆LT;  - 安卓layout_height =WRAP_CONTENT - ＆GT;
        ＆LT;！ - 布局=@布局/ toolbar_action_bar_shadow/＆GT; - ＆GT;
    ＆LT; / LinearLayout中＆GT;

＆LT; /的FrameLayout＆GT;

解决方案

据我所知/可以读取的AppCompat库目前不提供任何阴影。该调用似乎有（如 ViewCompat.setElevation（查看视图，浮动高度）），但它似乎并没有做任何事情。

所以我猜你将需要采取添加自己的影子就目前而言，至少要等到支持库实现了阴影渲染。

纵观谷歌IO 2014年源$ C ​​$ C，他们已经实施了这样的：

  • <一个href="https://github.com/google/iosched/blob/dfaf8b83ad1b3e7c8d1af0b08d59caf4223e0b95/android/src/main/java/com/google/samples/apps/iosched/ui/widget/DrawShadowFrameLayout.java"相对=nofollow> DrawShadowFrameLayout 它可以使背景绘制的阴影
  • <一个href="https://github.com/google/iosched/blob/dfaf8b83ad1b3e7c8d1af0b08d59caf4223e0b95/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png"相对=nofollow> bottom_shadow.9.png 从而重新presents下面的动作条阴影
  • <一个href="https://github.com/google/iosched/blob/dfaf8b83ad1b3e7c8d1af0b08d59caf4223e0b95/android/src/main/res/layout/activity_video_library.xml"相对=nofollow>应用程序：shadowDrawable 属性设置阴影绘制
  • setShadowTopOffset（）在DrawShadowFrameLayout移动的影子下来，它很好地出现在下面的动作条。 （您需要设置自己）

在此<一个更多信息href="https://www.reddit.com/r/androiddev/comments/2kd843/so_how_are_you_guys_doing_with_your_current/"相对=nofollow> reddit的线程和计算器。

This is a simple question:

I use the new support library, which allows me to have a Toolbar instance and even set it as the actionBar of the activity (or use the default one).

How do I customize the shadow being cast by the Toolbar (or the default ActionBar) ?

I've tried to use "setElevation" (on both of them), but it didn't seem to do anything on Android Lollipop.

Also, I can't find how to customize the shadow on pre-Lollipop versions. Is there maybe an API for this? or at least a drawable (I didn't find, even though I've tried) ?

OK, I've managed to find the next things:

For both Lollipop and pre-Lollipop, when your activity uses the normal AppCompat themes (like "Theme.AppCompat.Light" for example) , the shadow should look well.

However, when you use "setSupportActionBar" (and use an appropriate theme, like "Theme.AppCompat.Light.NoActionBar" for example) , you will have some issues with the shadow.

For pre-Lollipop, you can put a FrameLayout below the toolbar, that will look exactly like the one used for the normal themes, as such:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:foreground="?android:windowContentOverlay"
        android:visibility="@integer/action_bar_shadow_background_visibility" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:text="@string/hello_world" />

</RelativeLayout>

You can use the FrameLayout as your content of the activity, or use what I've done. You can also set its visibility by putting integer 0 for pre-lollipop and 2 for Lollipop and above, as I've done with "action_bar_shadow_background_visibility".

It's an ugly solution, but it works, but only for pre-Lollipop versions.

In any case, I still couldn't find a way to show the shadow well for Lollipop, in case I use "setSupportActionBar". I tried using "setElevation" on the toolbar and the actionbar (using "getSupportActionBar", right after calling "setSupportActionBar") .

I also don't get how to get the standard height of the actionbar , as I noticed that a lot of tutorial say to use "minHeight" for the toolbar. Would appreciate help for this too.

Can anyone help me with this?

Again, to make it clear, this is what I ask:

  • for Pre-Lollipop, show the same shadow that's used on the support library for both Toolbar and ActionBar.
  • Same for Lollipop (but use the one that Lollipop has)
  • Extra: customize the shadow to be more "delicate" on Lollipop (and maybe customize it on all versions).
  • Extra: why does the minHeight of the toolbar get a value of the action bar height, instead of the height itself?

EDIT: OK, this is as far as I've done so far to mimic the shadow of Lollipop :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        layout="@layout/toolbar_action_bar_shadow" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:text="@string/hello_world" />

</RelativeLayout>

res/layout/toolbar_action_bar_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:windowContentOverlay" />

res/layout-v21/toolbar_action_bar_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/msl__action_bar_shadow" />

res/drawable-v21/res/layout/msl__action_bar_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- intended for lollipop and above -->

    <item>
        <shape
            android:dither="true"
            android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#33000000" />

            <size android:height="10dp" />
        </shape>
    </item>

</layer-list>

It's not exactly the same, but it's similar.

EDIT: I still don't know why it happens. I think the code I've written on the question is misleading, as all there is to do is to set a background. Yet on the app I'm testing it still doesn't help. The app I'm trying to fix has the toolbar above the navigation drawer.

For a moment I thought that it might be because I've made a customized toolbar (which extends from Toolbar) and that changes its alpha value (according to the navigation drawer), but even if I use the normal toolbar and disable everything that's related to alpha, it still doesn't work. Also, not only that, but on a totally new project, I've tried to set a semi-transpared background for the toolbar, and it got a shadow according to the "setElevation" method.

Now it's even harder for me to find the cause for this problem, because it seems it's not because of transparency and not because of a custom Toolbar class...

Here's the layout of the activity that has the toolbar, in case this can help in any way:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/activity_main__drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:id="@+id/activity_main__fragmentContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <include
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:layout_marginTop="?attr/actionBarSize"
            layout="@layout/activity_main__sliding_menu" />
    </android.support.v4.widget.DrawerLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <com.app.ui.Toolbar
            android:id="@+id/activity_main__toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:layoutDirection="ltr"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            tools:ignore="UnusedAttribute" />

        <!-- <include -->
        <!-- android:layout_width="match_parent" -->
        <!-- android:layout_height="wrap_content" -->
        <!-- layout="@layout/toolbar_action_bar_shadow" /> -->
    </LinearLayout>

</FrameLayout>

解决方案

As far as I know/can read, the AppCompat library currently does not render any shadows. The calls seem to be there (e.g. ViewCompat.setElevation(View view, float elevation)) but it doesn't seem to be doing anything.

So I guess you will need to resort to adding your own shadows for now, at least until the support library implements the shadow rendering.

Looking at the Google IO 2014 source code, they have implemented like this:

  • DrawShadowFrameLayout which can render a background drawable as a shadow
  • bottom_shadow.9.png which represents a shadow below an actionbar
  • app:shadowDrawable attribute to set the shadow drawable
  • setShadowTopOffset() on the DrawShadowFrameLayout shifts the shadow down so it appears nicely below the actionbar. (you need to set this yourself)

More information on this Reddit Thread and stackoverflow.

这篇关于如何展现动作条和放大器的阴影;支持库对所有的Andr​​oid版本的工具栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆