最近看小说
微信阅读、三星阅读。
觉得全面屏的效果体验有点好。
稍做模仿了一下
简单效果
实现
思路：
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:隐藏底部的导航栏。正常情况下用户点击屏幕后导航栏即可重新出现，在沉浸模式下，用户上滑才会显示出来。
网友评论