webentwicklung-frage-antwort-db.com.de

Transluzente Statusleiste und Symbolleiste

Ich möchte so etwas integrieren:

 enter image description here

Und ich habe es so gemacht, aber ich kann die Bildansicht nicht unter die Symbolleiste stellen. Ohne die Symbolleiste kann ich es unter der Statusleiste erstellen, aber die Kombination dieser beiden Optionen ist nicht möglich.

 enter image description here

Hier ist mein Layout:

<?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>

In meiner Aktivität habe ich Folgendes getan:

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

Ich habe auch eine Datei styles-v21.xml deklariert:

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

Und legen Sie es als Standardstil für PhotoActivity fest. Ich habe bereits versucht, die Symbolleiste in ein FrameLayout zu setzen, aber meine Symbolleiste verbirgt sich einfach wie folgt:

 enter image description here

Danke im Voraus.

Das Problem wurde behoben, aber die Symbolleiste überlappt die Statusleiste. Gibt es sowieso die Polsterung zu reparieren? Wenn ich Android benutze: fitsSystemWindows = "true", ist die Statusleiste nicht mehr durchscheinend.

16
dynamitem

Ich würde die Toolbar aus Ihrem Layout entfernen und eine Implementierung einer ActionBar aus dem AppCompat.Theme verwenden:

<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>

Dann würde ich einen neuen Stil für die semi-transparente ActionBar erstellen (in values/styles.xml:

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

Und in v21/styles.xml:

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

Ich gehe davon aus, dass Ihre ActivityAppCompatActivity erweitert, so dass Sie in onCreate() folgendes aufrufen können:

Zum Aktivieren einer Rücktaste:

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

Zur Einstellung Ihrer durchscheinenden Farbe:

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

So entfernen Sie Ihren ActionBar-Titel:

getSupportActionBar().setDisplayShowTitleEnabled(false);

Außerdem würde ich Ihre Wurzel LinearLayout in CoordinatorLayout ändern, da Sie dadurch mehr Kontrolle über Ihre Layouts haben (es ist eine leistungsfähigere FrameLayout).

Die Farbe, die ich verwendete, ist:

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

Natürlich sollten Sie daran denken, dieses Thema auf Ihre Activity im AndroidManifest.xml anzuwenden:

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

Wenn Sie all diese Schritte ausführen, sollten Sie Folgendes erhalten:

 enter image description here

Bitte lass es mich wissen, wenn es für dich funktioniert.

6
mmBs

Wie du gesagt hast, 

Msgstr "Ich habe bereits versucht, die Symbolleiste in ein FrameLayout zu setzen, aber meine Symbolleiste verbirgt sich einfach wie folgt:". 


Das Problem dabei ist die Reihenfolge des Hinzufügens von childView in FrameLayout, Sie haben die Toolbar als erstes Kind hinzugefügt und anschließend ImageView hinzugefügt. Aus diesem Grund verbirgt das Bild die Symbolleiste. Stattdessen sollte die Reihenfolge der Ansichten in FameLayout so sein 

<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>

Auch für die API-Ebene> = 19 können Sie dieses Attribut in der style.xml-Datei hinzufügen, um die Statusleiste transparent zu machen
<item name="Android:windowTranslucentStatus">true</item>
Um hinter statusBar Inhalte zu erstellen, verwenden Sie diesen Link

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

6
Akhilesh Kumar

Verwenden Sie den folgenden Code

<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

Behandeln Sie die Statusleiste nicht als etwas getrennt von Ihrer App. Das Bild kommt unter die Symbolleiste, weil Sie LinearLayout verwendet haben. Wenn Sie RelativeLayout verwendet hätten, würde Ihr Bild auf derselben Höhe wie die Symbolleiste beginnen.

Um nun die Statusleiste transparent zu machen und alles unter der Statusleiste zu starten, verwenden Sie Folgendes. 

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

Verwenden Sie den oben genannten Stil für Ihre Aktivität und alles beginnt unter der Statusleiste. Jetzt können Sie für die Symbolleiste die Höhe der Symbolleiste vergrößern, indem Sie die Höhe der Statusleiste als Abstand zur Symbolleiste hinzufügen. Dies kann wie folgt durchgeführt werden:

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);
            }
        });

Sie können eine Farbe auf die Statusleiste setzen und dieselbe mit AlphaTransparency in der Symbolleiste verwenden.

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

Jetzt können Sie alles steuern, einschließlich der Statusleiste und der Symbolleiste.

1
Roadblock

TLDR; Sie müssen die Symbolleiste in ein LinearLayout einschließen.

Was ich getan habe, damit es funktioniert, war dem Ansatz von @Akhilesh Kumar ähnlich, aber ich habe die Symbolleiste in ein LinearLayout eingebettet, wodurch die Symbolleiste überlappt wurde. Ich habe auch die FitsSystemWindows in diesem LinearLayout auf true gesetzt.

<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>

Ich hoffe, es hilft.

1

LinearLayout wird die ImageView automatisch unter die Toolbar setzen.

Verwenden Sie stattdessen eine RelativeLayout.

1
Bret Deasy

Das Problem wurde behoben, aber die Symbolleiste überlappt die Statusleiste. Gibt es sowieso die Polsterung zu reparieren? Wenn ich Android benutze: fitsSystemWindows = "true", ist die Statusleiste nicht mehr durchscheinend.

Ich habe kürzlich einen Beitrag über WindowInsets geschrieben, Sie können check out . Ich denke, das würde dein Problem lösen.

Um es kurz zu machen: Sie müssen Fensterinsets nur über ViewCompat.setOnApplyWindowInsetListener-API an Toolbar übergeben. Das übergeordnete Element Ihrer Toolbar sollte jedoch die Fensterinsets übergeben. In Ihrem Fall wird dies nicht passieren, da LinearLayout und Familienlayouts dies nicht tun, müssen Sie die onApplyWindowInsets-Methode subclass und überschreiben.

Ich empfehle Ihnen, den Artikel zu lesen, in dem alles genauer beschrieben wird.

0
azizbekian