Android开发之实现QQ空间、美团首页沉浸式状态栏

最新推荐文章于 2023-03-30 22:16:46 发布

等待着冬天的风

最新推荐文章于 2023-03-30 22:16:46 发布

阅读量2.5k

点赞数 2

分类专栏：安卓系列文章标签：安卓沉浸式开发 QQ控件状态栏美团首页状态栏

本文链接：https://blog.csdn.net/qq_32306361/article/details/72784481

版权

安卓系列专栏收录该内容

69 篇文章 1 订阅

订阅专栏

前言：QQ空间和美团首页的状态栏是图片充满了状态栏，往上滑动，状态栏会慢慢变成ToolBar的颜色或者是我们自定义组件的背景颜色，今天我们就来实现这一效果！

-------------------------分割线-----------------------------

关于ToolBar的讲解请移步《Android开发之ToolBar的使用》，

如果你还对沉浸式这一概念比较模糊的话请移步我的博客：

《Android开发之Android5.x的状态栏变色相关东西》、

《Android开发之Android4.4的状态栏变色相关的东西》！

-------------------------分割线-----------------------------

效果图展示：

-------------------------分割线-----------------------------

整个UI的组成：

1.最上部是ToolBar（当然你也可以自定义TextView）

2.图片简单不解释，但是你也可以用相对布局包裹住图片然后在图片上加上自己想要的东西。

3.滑动的Hello页面，我这里比较简单用的都是TextView，当然你也可以用RecyclerView，这时候就要和最外层的ScrollView做滑动判断，本篇暂时不涉及ScrollView和RecyclerView兼容性判断！

4.最外层是加了带滑动监听的ScrollView，方便做状态栏的渐变！

-------------------------分割线-----------------------------

带滑动监听的ScrollView实现：

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

/**
 * 带滑动监听的scrollview
 */
public class GradationScrollView extends ScrollView {

    private ScrollViewListener scrollViewListener = null;
    
    public GradationScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }

    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }

    public interface ScrollViewListener {
        void onScrollChanged(GradationScrollView scrollView, int x, int y, int oldx, int oldy);
    }
}

渐变实现的方法：

滑动的时候，动态的获取图片的高度，然后根据高度，设置滑动的百分比，然后设置给ToolBar！

完整代码奉上（为了方便，本篇文章只做了5.0以上的效果，大家可以根据我的博客《Android开发之Android4.4的状态栏变色相关的东西》自行适配安卓4.4）：

import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements GradationScrollView.ScrollViewListener {

    private Toolbar toolbar;
    private int height;
    private ImageView imageView;
    private GradationScrollView scrollView;
    private TextView toolbar_title;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        setImgTransparent(this);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

        imageView = (ImageView) findViewById(R.id.iv_banner);
        toolbar_title = (TextView) findViewById(R.id.toolbar_title);
        scrollView = (GradationScrollView) findViewById(R.id.scrollview);

        imageView.setFocusable(true);
        imageView.setFocusableInTouchMode(true);
        imageView.requestFocus();

        ViewTreeObserver vto = imageView.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                toolbar.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                height = imageView.getHeight();
                scrollView.setScrollViewListener(MainActivity.this);
            }
        });
    }

    @Override
    public void onScrollChanged(GradationScrollView scrollView, int x, int y, int oldx, int oldy) {
        if (y <= 0) {   //设置标题的背景颜色
            toolbar.setBackgroundColor(Color.argb((int) 0, 144, 151, 166));
        } else if (y > 0 && y <= height) { //滑动距离小于图片的高度时，设置背景和字体颜色颜色透明度渐变
            float scale = (float) y / height;
            float alpha = (255 * scale);
            toolbar_title.setTextColor(Color.argb((int) alpha, 255, 255, 255));
            toolbar.setBackgroundColor(Color.argb((int) alpha, 144, 151, 166));
        } else {    //滑动到下面设置普通颜色
            toolbar.setBackgroundColor(Color.argb((int) 255, 144, 151, 166));
        }
    }

    //版本判断
    public void setImgTransparent(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = activity.getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
            window.setNavigationBarColor(Color.TRANSPARENT);
        }
    }
}

下面贴出布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <com.fly.lsn29_qzone1.GradationScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_banner"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                android:src="@drawable/img" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center"
                android:text="Hello"
                android:textSize="20sp" />

            //......省略N个TextView

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center"
                android:text="Hello"
                android:textSize="20sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center"
                android:text="Hello"
                android:textSize="20sp" />
        </LinearLayout>
    </com.fly.lsn29_qzone1.GradationScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#00000000"
            android:singleLine="true"
            android:text="fly学院"
            android:textColor="#00000000"
            android:textSize="20sp" />
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

-------------------------如有不懂的欢迎留言讨论-----------------------------