简单实现一个全面屏切换效果

2019-03-14  本文已影响0人  苏先生Tongson

最近看小说

微信阅读、三星阅读。

觉得全面屏的效果体验有点好。

稍做模仿了一下

简单效果

实现

思路:

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:

https://developer.android.google.cn/training/system-ui/

上一篇下一篇

猜你喜欢

热点阅读