Android 实现点击动态全屏显示

最新推荐文章于 2021-05-26 01:50:29 发布

JasonChen嘉生

最新推荐文章于 2021-05-26 01:50:29 发布

阅读量2.6k

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/qq402164452/article/details/54137388

版权

Android 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

在很多APP应用中有些需求是点击实现Activity全屏显示来显示更多的信息，比如点击图片全屏显示等等，例如图片全屏显示的效果。
这里写图片描述

分析

实现这种效果有两个重点：
1 动态显示和隐藏系统的状态栏
2 Toolbar和底部Bottom的动画效果
3 顶部Toolbar设置系统状态栏高度padding

动态显示和隐藏系统状态栏

动态显示和隐藏系统状态栏可以使用WindowManager里面LayoutParams属性FLAG_FULLSCREEN来实现，当需要显示系统状态栏时，给当前的window添加Flags:WindowManager.LayoutParams.FLAG_FULLSCREEN标志位,当需要隐藏系统状态栏时，调用clear来清除Flags:WindowManager.LayoutParams.FLAG_FULLSCREEN标志位。

有两种实现方法，一种是使用window里面自带的封装好的方法。

    public void fullScreen(boolean isFull) {//控制是否全屏显示
        if (isFull) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        } else {
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
    }

一种是自己添加标志位，上面的方法就是对下面这种方法的一种封装实现。

    public void full(boolean isFull) {//控制是否全屏显示
        if (isFull) {
            WindowManager.LayoutParams lp = getWindow().getAttributes();
            lp.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;
            getWindow().setAttributes(lp);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
        } else {
            WindowManager.LayoutParams attr = getWindow().getAttributes();
            attr.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);
            getWindow().setAttributes(attr);
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
        }
    }

动画效果

顶部Toolbar和底部Bottom的动画效果都是类似的，主要都是使用translateAnimation位移动画来实现。但是两者的参数有些不一样，虽然看起来都是上下移动。
分析：
1 顶部的效果
顶部显示，也就是从上到下移动，是从-100%的位置移动到0%的位置，-100%位置在view左上角往上view的高度的位置。
顶部隐藏，从下到上移动，从0%位置到-100%位置移动。

这里写图片描述

anim文件在res/anim文件夹中定义：
top_down_to_up_translate_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="300">

    <translate
        android:fromYDelta="0"
        android:toYDelta="-100%"/>

</set>

top_up_to_down_translate_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="300">

    <translate
        android:fromYDelta="-100%"
        android:toYDelta="0"/>

</set>

2 底部Bottom的效果
底部Bottom显示，从100%的位置移动到0%的位置，100%位置就是在view的左下角往下view高度的位置。
底部Bottom隐藏，从0%的位置移动到100%的位置。

这里写图片描述

bottom_down_to_up_translate_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="300">

    <translate
        android:fromYDelta="100%"
        android:toYDelta="0%"/>

</set>

bottom_up_to_down_translate_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fillAfter="true">

    <translate
        android:fromYDelta="0%"
        android:toYDelta="100%"/>

</set>

使用动画也很简单，使用AnimationUtils工具类的loadAnimation把上面的xml文件解析成Animation对象就可以直接使用了，得到Animation对象直接使用View.startAnimation（）就可以显示动画效果了。

    public void startAnimation(View view, int animationId) {//开始动画
        if(view!=null&&animationId!=0){
            Animation animation= AnimationUtils.loadAnimation(this,animationId);
            view.startAnimation(animation);
        }
    }

顶部Toolbar设置系统状态栏高度padding

要实现全屏效果，还必须实现getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);来设置系统状态栏透明，当设置透明之后，Toolbar的位置就被显示在系统状态栏的位置了，那么我们就可以给Toolbar设置Padding来使Toolbar显示在系统状态栏的位置了。
这里需要注意设置Toolbar的高度的wrap_content,里面的view就是android:layout_height=”?attr/actionBarSize”的高度设置。

设置Theme为NoActionBar
在res/vaules/styles里面设置主题Theme

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="toolbarStyle">@style/MyToolbar</item>
    </style>

    <!--去掉Toolbar开始位置的空白-->
    <style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetStartWithNavigation">0dp</item>
    </style>

</resources>

获取系统状态栏高度的方法：

    public int getStatusBarHeight() {//获取系统状态栏的高度
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

Toolbar动态设置padding:

mToolbar= (Toolbar) findViewById(R.id.MainActivity_Toolbar);
mToolbar.setPadding(0,getStatusBarHeight(),0,0);//设置状态栏高度的padding

代码

BaseActivity基类：

package com.example.jason.fullscreendemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

/**
 * Created by Jason on 2017/1/6.
 */

public abstract class BaseActivity extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);

        initView();
        initListener();
        initData();
    }

    protected abstract void initView();
    protected abstract void initListener();
    protected abstract void initData();
}

Activity:

package com.example.jason.fullscreendemo;

import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends BaseActivity {
    private ImageView mImg;
    private Toolbar mToolbar;
    private LinearLayout mBottomViewGroup;

    private boolean isFull=false;
    private int ANIMATION_DURATION=300;

    @Override
    protected void initView() {
        setContentView(R.layout.activity_main);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        mToolbar= (Toolbar) findViewById(R.id.MainActivity_Toolbar);
        mToolbar.setPadding(0,getStatusBarHeight(),0,0);//设置状态栏高度的padding
        mImg= (ImageView) findViewById(R.id.MainActivity_ImageView);
        mBottomViewGroup= (LinearLayout) findViewById(R.id.MainActivity_Bottom_ViewGroup);
    }

    @Override
    protected void initListener() {
        mImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fullControl();
            }
        });
    }

    @Override
    protected void initData() {

    }

    public int getStatusBarHeight() {//获取系统状态栏的高度
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

    public void fullControl(){//控制是否全屏显示
        if(!isFull){
            isFull=true;
            exitAnimation();
        }else{
            isFull=false;
            enterAnimation();
        }
    }

    public void startAnimation(View view, int animationId) {//开始动画
        if(view!=null&&animationId!=0){
            Animation animation= AnimationUtils.loadAnimation(this,animationId);
            view.startAnimation(animation);
        }
    }

    private void enterAnimation(){
        startAnimation(mToolbar,R.anim.top_up_to_down_translate_anim);//Toolbar 从上到下动画
        startAnimation(mBottomViewGroup,R.anim.bottom_down_to_up_translate_anim);//Bottom 从下到上动画
        mToolbar.postDelayed(new Runnable() {//动画结束后再显示状态栏
            @Override
            public void run() {
                fullScreen(false);
            }
        },ANIMATION_DURATION);
    }

    private void exitAnimation(){
        startAnimation(mToolbar,R.anim.top_down_to_up_translate_anim);//Toolbar 从下到上动画
        startAnimation(mBottomViewGroup,R.anim.bottom_up_to_down_translate_anim);//Bottom 从上到下动画
        mToolbar.postDelayed(new Runnable() {//动画结束后再隐藏状态栏
            @Override
            public void run() {
                fullScreen(true);
            }
        },ANIMATION_DURATION);
    }


    public void fullScreen(boolean isFull) {//控制是否全屏显示
        if (isFull) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        } else {
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
    }
}

xml布局文件：
ImageView必须放最上面，防止Toolbar和Bottom被遮住。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <ImageView
        android:id="@+id/MainActivity_ImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/MainActivity_Toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:text="Full Screen"/>

    </android.support.v7.widget.Toolbar>

    <LinearLayout
        android:id="@+id/MainActivity_Bottom_ViewGroup"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Bottom"
            android:textSize="14sp"
            android:textColor="@android:color/white"/>

    </LinearLayout>


</RelativeLayout>

JasonChen嘉生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android 实现点击动态全屏显示

在很多APP应用中有些需求是点击实现Activity全屏显示来显示更多的信息，比如点击图片全屏显示等待，例如图片的效果。分析实现这种效果有两个重点： 1 动态显示和隐藏系统的状态栏 2 Toolbar和底部Bottom的动画效果 3 顶部Toolbar设置系统状态栏高度padding动态显示和隐藏系统状态栏动态显示和隐藏系统状态栏可以使用WindowManager里面LayoutParam
复制链接

扫一扫