Прозрачная строка состояния и панель инструментов

Я хотел бы интегрировать что-то вроде этого:

И я сделал это так, но я не могу представить изображение под панелью инструментов. Без панели инструментов я могу сделать это в строке состояния, но объединение этих двух невозможно.

Здесь мой макет:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context="com.project.android.PhotoActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/photo_tl"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#59000000"
        tools:ignore="UnusedAttribute" />

    <ImageView
        android:id="@+id/photo_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitStart" />


</LinearLayout>

В моей деятельности я сделал следующее:

  getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

Я также объявил файл styles-v21.xml:

<style name="Project.Photo" parent="Project.Light">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">#59000000</item>
</style>

И установите его как стиль по умолчанию для PhotoActivity. Я уже пытался помещать панель инструментов в FrameLayout, но при этом моя панель инструментов просто скрывается, например:

Спасибо заранее.

Получил это исправление, но панель инструментов перекрывает строку состояния. Есть ли все-таки, чтобы исправить прокладку? Если я использую android: fitsSystemWindows = "true", строка состояния больше не будет полупрозрачной.

Ответы

Ответ 1

Как вы сказали,

"Я уже пробовал помещать панель инструментов в FrameLayout, но при этом моя панель инструментов просто скрывается, например:".

Проблема с этим - это порядок добавления childView в FrameLayout, вы добавили панель инструментов в качестве первого дочернего элемента, после чего вы добавили ImageView. поэтому изображение скрывает панель инструментов. Вместо этого порядок представлений внутри FameLayout должен быть таким, как это

<FrameLayout   
          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:fitsSystemWindows="true"
          tools:context="com.project.android.PhotoActivity">

          <ImageView
              android:id="@+id/photo_image"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:adjustViewBounds="true"
              android:scaleType="fitStart" />

          <android.support.v7.widget.Toolbar
              android:id="@+id/photo_tl"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:background="#59000000"
              tools:ignore="UnusedAttribute" />

    </FrameLayout>

Также для уровня API >= 19 вы можете добавить этот атрибут в файл style.xml, чтобы сделать statusBar прозрачным
<item name="android:windowTranslucentStatus">true</item>
Для создания контента позади statusBar используйте эту ссылку

https://developer.android.com/training/system-ui/status.html#behind

Ответ 2

LinearLayout автоматически разместит ImageView ниже Toolbar.

Попробуйте вместо этого использовать RelativeLayout.

Ответ 3

Я удаляю Toolbar из вашего макета и использую реализацию ActionBar из AppCompat.Theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Затем я создам новый стиль для полупрозрачного ActionBar (в values/styles.xml:

<style name="AppTheme.Transparent" parent="AppTheme">
    <item name="windowActionBarOverlay">true</item>
</style>

И в v21/styles.xml:

<style name="AppTheme.Transparent" parent="AppTheme">
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

Я предполагаю, что ваш Activity расширяет AppCompatActivity, а затем в onCreate() вы можете вызвать:

Для включения кнопки возврата:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

Для установки полупрозрачного цвета:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.yourTranslucentColor)));

Для удаления заголовка ActionBar:

getSupportActionBar().setDisplayShowTitleEnabled(false);

Более того, я бы изменил ваш корень LinearLayout на CoordinatorLayout, поскольку он дает вам больше контроля над вашими макетами (он более мощный FrameLayout).

Цвет, который я использовал:

<color name="yourTranslucentColor">#29000000</color>

Конечно, вы должны помнить, что примените эту тему к своему Activity в AndroidManifest.xml:

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

Выполняя все эти шаги, вы должны получить что-то вроде этого:

Пожалуйста, дайте мне знать, если это сработает для вас.

Ответ 4

Используйте код ниже

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/AppTheme.CollapsingToolbarLayoutExpandedTextStyle"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:theme="@style/YourTheme"
                app:layout_collapseMode="pin" />

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

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

<!-- Rest of your view-->

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

Ответ 5

Не обрабатывайте строку состояния как нечто отдельное от вашего приложения. Изображение идет под панелью инструментов, потому что вы использовали LinearLayout. Если бы вы использовали RelativeLayout, ваше изображение начиналось с той же высоты, что и панель инструментов.

Теперь для создания прозрачной прозрачности и для запуска всех объектов из панели состояния используйте следующее.

<style name="AppTheme.TranslucentStatusBar" >
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

Используйте приведенный выше стиль для своей деятельности, и все начинается с панели статусов. Теперь для панели инструментов вы можете увеличить высоту панели инструментов, добавив высоту строки состояния в качестве дополнения к панели инструментов. Это можно сделать следующим образом:

toolbarContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                Rect frame = new Rect();
                getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
                toolbarContainer.setPadding(0, frame.top, 0, 0);
            }
        });

Вы можете установить цвет в строку состояния и использовать тот же цвет с помощью AlphaTransparency на панели инструментов.

getWindow().setStatusBarColor(ContextCompat.getColor(this, android.R.color.transparent));

Теперь вы контролируете все, включая панель состояния и панель инструментов.

Ответ 6

TL;DR; Вы должны обернуть панель инструментов в LinearLayout.

То, что я сделал, чтобы заставить его работать, было похоже на подход @Akhilesh Kumar, но я завернул панель инструментов в LinearLayout, которая зафиксировала перекрытие панели инструментов. Я также поместил fitsSystemWindows в true в LinearLayout.

<FrameLayout 
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:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">

<ImageView
    android:id="@+id/photo_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="fitStart"/>

<LinearLayout

    android:id="@+id/content_card_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/photo_tl"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#59000000"
        tools:ignore="UnusedAttribute"/>

</LinearLayout>
</FrameLayout>

Надеюсь, это поможет.

Ответ 7

Получено, что исправлено, но панель инструментов перекрывает строку состояния. Есть ли все-таки, чтобы исправить прокладку? Если я использую android: fitsSystemWindows = "true", строка состояния больше не будет полупрозрачной.

Недавно я написал сообщение о WindowInsets, вы можете проверить его. Я думаю, что это решит вашу проблему.

Короче говоря, вам нужно пройти через окно Toolbar с помощью ViewCompat.setOnApplyWindowInsetListener API. Но родительский элемент Toolbar должен передать вставки окна. В вашем случае это не произойдет, потому что по умолчанию LinearLayout и семейные макеты этого не сделают, вы должны подклассифицировать и переопределить метод onApplyWindowInsets.

Я предлагаю вам прочитать статью, где все описано более точно.

Ответ 8

просто измените высоту панели инструментов на wrap_content:

<android.support.v7.widget.Toolbar
    android:id="@+id/photo_tl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#59000000"
    tools:ignore="UnusedAttribute" />