web-dev-qa-db-ja.com

半透明のステータスバーとツールバー

私はこのようなものを統合したいと思います：

enter image description here

そして、私はこのようにそれをしましたが、ツールバーの下にimageviewを置くことができないようです。ツールバーがなければ、ステータスバーの下に作成できますが、これら2つを組み合わせることはできません。

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"を使用すると、ステータスバーは半透明になりません。

androidandroid-layoutmaterial-designandroid-toolbarandroid-statusbar
17
dynamitem

レイアウトからToolbarを削除し、_AppCompat.Theme_からActionBarの実装を使用します。

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

もちろん、このテーマを_AndroidManifest.xml_のActivityに適用することを忘れないでください：

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

これらのすべての手順を実行すると、次のような結果が得られます。

enter image description here

うまくいったら教えてください。

6
mmBs

あなたが言ったように、

「ツールバーをFrameLayoutに配置しようとしましたが、それを行うとツールバーは次のように単純に非表示になります。」.


これの問題は、FrameLayoutにchildViewを追加する順序です。最初の子としてツールバーを追加し、その後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ステータスバーを透明にするファイル
<item name="Android:windowTranslucentStatus">true</item>
statusBarの背後にあるコンテンツを作成するには、このリンクを使用します

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でツールバーをラップしました。また、そのLinearLayoutでfitsSystemWindowsをtrueに設定しました。

<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についての投稿を書きました。あなたは check out かもしれません。問題が解決すると思います。

要するに、あなたがしなければならないのは、ViewCompat.setOnApplyWindowInsetListener AP​​I経由でToolbarにのみウィンドウインセットを渡すことです。ただし、Toolbarの親はウィンドウのインセットを渡す必要があります。あなたの場合、デフォルトではLinearLayoutとファミリレイアウトはそれをしないので、それは起こりません。onApplyWindowInsetsメソッドをサブクラス化してオーバーライドする必要があります。

すべてをより正確に説明している記事を読むことをお勧めします。

0
azizbekian