Android KitKat 中的半透明系统栏和内容边距

Translucent system bars and content margin in KitKat

提问by Krzysztof Kozmic

I'm trying to take advantage of the new KitKat translucent system bars, to get a full screen image in the background of my app.

我正在尝试利用新的 KitKat 半透明系统栏，在我的应用程序背景中获取全屏图像。

I'm having problems figuring out the right settings to get the behaviour I want. Right now I have a ViewPagerwith three Fragments each one composed of a RelativeLayoutcontaining an ImageView(for the background image) and a TextViewfor the content.

我在找出正确的设置以获得我想要的行为时遇到问题。现在我有一个ViewPager包含三个的Fragments，每个由一个RelativeLayout包含ImageView（用于背景图像）和一个TextView用于内容组成。

What I'm after is to have the content fit fully in the portion of the screen available for interactions, and the image to take the whole visible portion of the screen.

我所追求的是让内容完全适合可用于交互的屏幕部分，并使图像占据屏幕的整个可见部分。

If I just use android:Theme.Holo.Light.NoActionBar.TranslucentDecoras my theme it looks fine in portrait, but the navigation bar overlaps the content in landscape (see the screenshots below).

如果我只是android:Theme.Holo.Light.NoActionBar.TranslucentDecor用作我的主题，它在纵向上看起来不错，但导航栏在横向上与内容重叠（请参见下面的屏幕截图）。

Following the recommendation in the docs, I added android:fitsSystemWindows = trueto my theme, but that generates some weird artifacts (see below)

按照文档中的建议，我添加android:fitsSystemWindows = true到我的主题中，但这会产生一些奇怪的工件（见下文）

How can I make it behave like in the second example, but look good, without the visual artifacts?

我怎样才能让它表现得像第二个例子一样，但看起来不错，没有视觉伪影？

采纳答案by Rican7

I know this is old, but I've just run into the same problem and found an easy solution, so I wanted to share it in case this was run into by anyone Google'ing around.

我知道这是旧的，但我刚刚遇到了同样的问题并找到了一个简单的解决方案，所以我想分享它，以防万一谷歌周围的人遇到这个问题。

It seems that there is an Android bug when a ViewPager (especially an ImageSwitcher) is placed within a layout that has the attribute android:fitsSystemWindows="true". For some reason the system windows seem to be getting artifacts drawn all over them. :/

当 ViewPager（尤其是 ImageSwitcher）放置在具有属性的布局中时，似乎存在一个 Android 错误android:fitsSystemWindows="true"。出于某种原因，系统窗口似乎在它们上面绘制了工件。：/

Anyway, I found a fix. For my activity, I had an XML layout as follows:

无论如何，我找到了解决办法。对于我的活动，我有一个 XML 布局，如下所示：

<FrameLayout 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"
    <!-- NOT HERE! android:fitsSystemWindows="true" -->
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageSwitcher
        android:id="@+id/background_image_switcher"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="0dp"
        android:layout_margin="0dp"
        android:background="@color/background_dark_navy"
        android:inAnimation="@android:anim/fade_in"
        android:outAnimation="@android:anim/fade_out"
        >

        <ImageView
            style="@style/BlurredBackgroundImage"
            />
        <ImageView
            style="@style/BlurredBackgroundImage"
            />

    </ImageSwitcher>

    <FrameLayout
        android:fitsSystemWindows="true" <!-- Here!!! -->
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Fitted content here -->

    </FrameLayout>

The trick was to not contain the ImageSwitcher in a layout with the android:fitsSystemWindows="true"attribute, but to instead move the android:fitsSystemWindows="true"attribute to the innerFrameLayout containing the actual content I needed to fit (the title text in your case). Unfortunately, this allows for the ImageSwitcher/ViewPager's view to get slightly cut off by the system windows, but if the image is used like a background image anyway it doesn't matter too much and is a much better trade off than artifacts or maintaining all of the different dimensions/styles that may or may not have disabled navigation (such as the currently selected answer).

诀窍是不要在具有android:fitsSystemWindows="true"属性的布局中包含 ImageSwitcher ，而是将该android:fitsSystemWindows="true"属性移动到包含我需要适合的实际内容的内部FrameLayout （在您的情况下为标题文本）。不幸的是，这允许 ImageSwitcher/ViewPager 的视图被系统窗口稍微切断，但是如果图像被用作背景图像，无论如何它都没有太大关系，并且比工件或维护所有图像更好可能会或可能不会禁用导航的不同维度/样式（例如当前选择的答案）。

I hope this helps someone!

我希望这可以帮助别人！

回答by Tanner Perrien

My solution was to disable translucent navigation in landscape mode. You still get a translucent status bar, but it fixes the issue where the nav bar is opaque and overlaps in landscape.

我的解决方案是在横向模式下禁用半透明导航。您仍然会看到一个半透明的状态栏，但它解决了导航栏不透明和横向重叠的问题。

res/values-v19/styles.xml(these values are in my theme)

res/values-v19/styles.xml （这些值在我的主题中）

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">@bool/translucentNavBar</item>

res/values-v19/bools.xml(enable translucent nav)

res/values-v19/bools.xml （启用半透明导航）

<bool name="translucentNavBar">true</bool>

res/values-land-v19/bools.xml(disable translucent nav in landscape)

res/values-land-v19/bools.xml （禁用横向半透明导航）

<bool name="translucentNavBar">false</bool>

res/values-sw600dp-land-v19/bools.xml(enable translucent nav for tablets in landscape)

res/values-sw600dp-land-v19/bools.xml （为横向平板电脑启用半透明导航）

<bool name="translucentNavBar">true</bool>

回答by danh32

I've run into similar problems, but I wasn't using a ViewPager, so this may not work. I solved by doing some nesting as Gabe described: only the inner ViewGroup is fitSystemWindows="true", the outer ViewGroup which displays the background is therefore allowed to extend under the translucent bars. Then I'm also calling requestFitSystemWindows()on orientation changes. Again, your ViewPager might be complicating things and my solution won't work, but I hope this helps.

我遇到了类似的问题，但我没有使用 ViewPager，所以这可能不起作用。我通过做一些 Gabe 描述的嵌套来解决：只有内部 ViewGroup 是 fitSystemWindows="true"，因此允许显示背景的外部 ViewGroup 在半透明条下延伸。然后我还在方向更改时调用requestFitSystemWindows()。同样，您的 ViewPager 可能会使事情复杂化，我的解决方案不起作用，但我希望这会有所帮助。

回答by Gabe

Put another ViewGroup inside of the one with the image and fitsSystemWindowsto true

将另一个 ViewGroup 放在带有图像的 ViewGroup 中，并将fitsSystemWindows 设置为 true

回答by user3339439

You should wrap this inside an Linear Layout and set fitsSystemWindowsto true.

您应该将其包装在线性布局中并设置fitsSystemWindows为 true。