簡單實現一個全面屏切換效果

Tongson發表於2018-09-18

最近看小說

微信閱讀、三星閱讀。

覺得全面屏的效果體驗有點好。

稍做模仿了一下

簡單效果

實現

思路：

1.每個activity都會有他的主題。 很明顯是一個全屏的主題。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!--NoActionBar theme-->
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <!--Fullscreen theme-->
    <style name="AppTheme.NoActionBar.Fullscreen">
        <!--隱藏SYSTEM_UI_FLAG_LAYOUT_STABLE-->
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>


    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

</resources>
複製程式碼

2.內容是放在最底層的。 外層就放 STATUS_BAR、ActionBar、頭部工具欄、底部工具欄、NAVIGATION_BAR。

ActionBar佈局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>
複製程式碼

3.對外層內容的顯示。

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    public int fullOptions = View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE;
    @TargetApi(Build.VERSION_CODES.KITKAT)
    public int showNavigationBarOptions = View.SYSTEM_UI_FLAG_VISIBLE;

    @TargetApi(Build.VERSION_CODES.KITKAT)
    public void initFullscreen() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(fullOptions);
    }


    @TargetApi(Build.VERSION_CODES.KITKAT)
    public void showNavigationBar() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(showNavigationBarOptions);
    }
    @TargetApi(Build.VERSION_CODES.KITKAT)
    private void showContainer() {
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.show();
        }
        topView.setVisibility(View.VISIBLE);
        topView.startAnimation(mShowTopAction);
        bottomView.setVisibility(View.VISIBLE);
        bottomView.startAnimation(mShowBottomAction);
        showNavigationBar();
    }

複製程式碼

4.對外層內容的隱藏。


    @TargetApi(Build.VERSION_CODES.KITKAT)
    public int hindNavigationBarOptions = View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
    
    @TargetApi(Build.VERSION_CODES.KITKAT)
    private void hideContainer() {
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        topView.startAnimation(mHiddenTopAction);
        topView.setVisibility(View.GONE);
        bottomView.startAnimation(mHiddenBottomAction);
        bottomView.setVisibility(View.GONE);
        bottomView.postOnAnimationDelayed(new Runnable() {
            @Override
            public void run() {
                initFullscreen();
            }
        }, 300);
    }


    @TargetApi(Build.VERSION_CODES.KITKAT)
    public void hideNavigationBar() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(hindNavigationBarOptions);
    }
複製程式碼

5.加上動畫

    Animation mHiddenTopAction;
    Animation mShowTopAction;
    Animation mHiddenBottomAction;
    Animation mShowBottomAction;


    private void initAnim() {
        mShowTopAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, -1.0f, Animation.RELATIVE_TO_SELF, 0.0f);
        mHiddenTopAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, -1.0f);
        mShowTopAction.setDuration(500);
        mHiddenTopAction.setDuration(800);

        mShowBottomAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f);
        mHiddenBottomAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f);
        mShowBottomAction.setDuration(500);
        mHiddenBottomAction.setDuration(300);
    }
複製程式碼

完成。

對system-ui：

  • SYSTEM_UI_FLAG_VISIBLE:
  • View.SYSTEM_UI_FLAG_LOW_PROFILE :使狀態列和導航欄上的一些圖示變暗不可見，以降低使用者注意力的分散。單獨設定該標誌時，點選狀態列和導航欄即可使其重新恢復，並且清除這個標誌。
  • View.SYSTEM_UI_FLAG_FULLSCREENL:隱藏非必要的UI，比如狀態列。隱藏狀態列後使用者下滑即重新顯示，當沉浸模式同時開啟時，應用的可繪製區域擴大，下滑顯示狀態列時，狀態列以半透明方式顯示在app的上方。
  • View.SYSTEM_UI_FLAG_LAYOUT_STABLE:
  • View.SYSTEM_UI_FLAG_IMMERSIVE:沉浸模式必須與以上至少一種標誌合用才能生效，當使用者把狀態列或者導航欄滑出來後即退出沉浸模式，該標誌自動清除掉。
  • View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY:粘性沉浸模式與普通沉浸模式的區別在於兩點，一是滑出來的狀態列或導航欄呈半透明狀態。二是滑出來的狀態列或者導航欄短時間後會自動隱藏，該標誌也不會自動清除。
  • View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
  • View.SYSTEM_UI_FLAG_HIDE_NAVIGATION:隱藏底部的導航欄。正常情況下使用者點選螢幕後導航欄即可重新出現，在沉浸模式下，使用者上滑才會顯示出來。

developer.android.google.cn/training/sy…

相關文章