it-swarm.com.ru

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

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

 enter image description here

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

 enter image description here

Вот мой макет:

<?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, но при этом моя панель инструментов просто скрывается, например:

 enter image description here

Заранее спасибо.

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

16
dynamitem

Я бы удалил 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>

Затем я бы создал новый стиль для полупрозрачного ActionBarvalues/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>

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

 enter image description here

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

6
mmBs

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

«Я уже пытался поместить панель инструментов в 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>
Для создания контента за статусбаром используйте эту ссылку

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

6
Akhilesh Kumar

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

<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>
2
Haris Qureshi

Не рассматривайте строку состояния как нечто отдельное от вашего приложения. Изображение идет под панелью инструментов, потому что вы использовали 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));

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

1
Roadblock

TLDR; Вы должны обернуть панель инструментов в 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>

Я надеюсь, что это помогает.

1
Francisco Junior

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

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

1
Bret Deasy

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

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

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

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

0
azizbekian