Material Design - 沉浸式状态栏

效果图.png 设置状态栏全屏.png

StatusBarUtil

public class StatusBarUtil {
    /**
     * 为我们的 activity 的状态栏设置颜色
     *
     * @param activity
     * @param color
     */
    public static void setStatusBarColor(Activity activity, int color) {
        //4.4以下的系统是没有办法处理
        //所以主要处理的是4.4到5.0和5.0以上的
        //5.0以上
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //直接调用系统调用的方法
            activity.getWindow().setStatusBarColor(color);
        }
        //4.4到5.0之间,采用一个技巧，先设置成全屏(目前的状态栏会被消失)，再在状态栏的部分加个布局
        else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //电量，时间，网络状态都没有了，所以这个方法不行
            // activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
            //设置成全屏
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //在状态栏添加一个布局
            View view = new View(activity);
            ViewGroup.LayoutParams params = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.MATCH_PARENT
                    , getStatusBarHeight(activity));
            view.setLayoutParams(params);
            view.setBackgroundColor(color);
            ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
            //decorView是FrameLayout，会加载一个系统的布局(LinearLayout)
            decorView.addView(view);
            // 获取activity中setContentView布局的根布局
            ViewGroup contentView = activity.findViewById(android.R.id.content);
            contentView.setPadding(0, getStatusBarHeight(activity), 0, 0);
        }

    }

    /**
     * 获取状态栏的高度
     */
    private static int getStatusBarHeight(Activity activity) {
        // 插件式换肤：怎么获取资源的，先获取资源id，根据id获取资源
        Resources resources = activity.getResources();
        int statusBarHeightId = resources.getIdentifier("status_bar_height", "dimen", "android");
        Log.e("TAG", statusBarHeightId + " -> " + resources.getDimensionPixelOffset(statusBarHeightId));
        return resources.getDimensionPixelOffset(statusBarHeightId);
    }

    /**
     * 设置状态栏全屏
     * @param activity
     */
    public static void setActivityTranslucent(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
            View decorView = activity.getWindow().getDecorView();
            decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
        }
        // 4.4 - 5.0 之间  采用一个技巧，首先把他弄成全屏，在状态栏的部分加一个布局
        else if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

}

QQ好友动态的效果头部

效果图.gif

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.peakmain.customview.MainActivity">

    <com.peakmain.customview.materialdesign_status.MyScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/image_view"
                android:layout_width="match_parent"
                android:background="@color/colorAccent"
                android:layout_height="400dp" />

            <TextView
                android:layout_width="match_parent"
                android:text="text"
                android:layout_height="400dp" />
            <TextView
                android:layout_width="match_parent"
                android:text="text"
                android:layout_height="400dp" />
            <TextView
                android:layout_width="match_parent"
                android:text="text"
                android:layout_height="400dp" />
            <TextView
                android:layout_width="match_parent"
                android:text="text"
                android:layout_height="400dp" />
        </LinearLayout>
    </com.peakmain.customview.materialdesign_status.MyScrollView>

    <LinearLayout
        android:id="@+id/title_bar"
        android:layout_width="match_parent"
        android:gravity="center"
        android:background="@android:color/holo_blue_light"
        android:layout_height="70dp">
        <TextView
            android:layout_width="wrap_content"
            android:text="头部"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

自定义ScrollView

public class MyScrollView extends ScrollView {
    public MyScrollView(Context context) {
        super(context);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(mListener!=null){
            mListener.onScroll(l,t,oldl,oldt);
        }
    }

    public interface ScrollChangeListener{
        public void onScroll(int l, int t, int oldl, int oldt);
    }

    private ScrollChangeListener mListener;
    public void setOnScrollChangeListener(ScrollChangeListener listener){
        mListener = listener;
    }
}

MainActivity的使用

public class MainActivity extends AppCompatActivity {

    //兼容问题，5.0 以下头部状态栏默认是黑色
    // 5.0 以上是有颜色的，这个是系统帮我们做的处理，默认获取的 attrs -> color -> colorPrimaryDark
    private View mTitleBar;
    private MyScrollView mScrollView;
    private ImageView mImageView;
    private int mHeight;
    private int mTitleHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        StatusBarUtil.setActivityTranslucent(this);
        //刚进来，背景完全透明
        mTitleBar = findViewById(R.id.title_bar);
        mTitleBar.getBackground().setAlpha(0);
        //不断的监听滚动，判断当前滚动的位置跟ImageView来计算背景透明度
        mScrollView = findViewById(R.id.scroll_view);
        mImageView = findViewById(R.id.image_view);
        //测量onMeasure在onResume之后
        mImageView.post(new Runnable() {
            @Override
            public void run() {
                mHeight = mImageView.getMeasuredHeight();
                mTitleHeight=mTitleBar.getMeasuredHeight();
            }
        });
        mScrollView.setOnScrollChangeListener(new MyScrollView.ScrollChangeListener() {
            @Override
            public void onScroll(int l, int top, int oldl, int oldt) {
                if (mHeight == 0) return;
                //获取图片的高度，根据当前位置，计算alpha
                float alpha = (float) top / (mHeight -mTitleHeight);
                if (alpha <= 0) {
                    alpha = 0;
                }
                if (alpha > 1) {
                    alpha = 1;
                }
                mTitleBar.getBackground().setAlpha((int) (alpha * 255));
            }
        });
    }
}