Android开发笔记之Toolbar 透明状态栏及透明度变化

先上效果图

看到很多主流应用有这个效果，例如qq空间，淘宝商品详情、百度贴吧、微博个人主页等等…
这边就简单的模仿了一下，

1、首先实现透明状态栏，仅支持API 19以上

  //实现透明状态栏效果  并且toolbar 需要设置 android:fitsSystemWindows="true"
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
            layoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | layoutParams.flags);
        }

2、接下来就是toolbar的透明度渐变效果，布局用的是RelativeLayout，下面是一个ScrollView，并且添加滑动监听，上面就一个toolbar,布局如下

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


    <com.ly.toolbardemo.MonitorScrollView
        android:id="@+id/sv_translu"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_pic"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="fitXY"
                android:src="@mipmap/pic" />
        </LinearLayout>
    </com.ly.toolbardemo.MonitorScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:fitsSystemWindows="true"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

</RelativeLayout>

自定义的MonitorScrollView：

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

public class MonitorScrollView extends ScrollView {

    private OnScrollChangedListener mOnScrollListener;

    public MonitorScrollView(Context context) {
        super(context);
    }

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

    public MonitorScrollView(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 (mOnScrollListener != null) {
            mOnScrollListener.onScrollChanged(this, l, t, oldl, oldt);
        }
    }

    public void setOnScrollChangedListener(OnScrollChangedListener listener) {
        mOnScrollListener = listener;
    }

    public interface OnScrollChangedListener {
        void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);
    }
}

toolbar根据ScrollView的滑动改变，这边主要是根据图片的高度与滑动距离来改变的,可自行定义

    @Override
    public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
        float height = ivPic.getHeight();  //获取图片的高度
        if (oldt < height){
            int i = Float.valueOf(oldt/height * 255).intValue();    //i 有可能小于 0
            mToolbarTb.getBackground().setAlpha(Math.max(i,0));   // 0~255 透明度
        }else {
            mToolbarTb.getBackground().setAlpha(255);
        }
    }

MainActivity全部代码

import android.content.Context;
import android.os.Build;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutCompat;
import android.support.v7.widget.Toolbar;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements MonitorScrollView.OnScrollChangedListener {

    private Context mContext;
    private LinearLayout llContent;
    private Toolbar mToolbarTb;
    private MonitorScrollView svTranslu;
    private ImageView ivPic;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = this;
        initView();
        initListener();
    }

    private void initView() {

        llContent = (LinearLayout) findViewById(R.id.ll_content);
        svTranslu = (MonitorScrollView) findViewById(R.id.sv_translu);
        ivPic = (ImageView) findViewById(R.id.iv_pic);
        mToolbarTb = (Toolbar) findViewById(R.id.toolbar);
        mToolbarTb.setTitle("ToolBar");
        mToolbarTb.getBackground().setAlpha(0);  //先设置透明
        setSupportActionBar(mToolbarTb);
        ActionBar actionBar =  getSupportActionBar();
        if(actionBar != null) {
            //设为 false
//           actionBar.setDisplayShowTitleEnabled(false);  //是否隐藏标题
            actionBar.setDisplayHomeAsUpEnabled(true);     //是否显示返回按钮
        }

        //实现透明状态栏效果  并且toolbar 需要设置  android:fitsSystemWindows="true"
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
            layoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | layoutParams.flags);
        }

        for (int i = 0;i<20;i++){
            TextView textView = new TextView(mContext);
            textView.setText("第" + i+"个");
            textView.setGravity(Gravity.CENTER);
            LinearLayoutCompat.LayoutParams params = new LinearLayoutCompat.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,dp2px(60));
            llContent.addView(textView,params);
        }
    }

    private void initListener(){
        svTranslu.setOnScrollChangedListener(this);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //Toolbar上的左上角的返回箭头的键值为Android.R.id.home  不是R.id.home
        if(item.getItemId()==android.R.id.home){
            finish();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }


    private int dp2px(int dp){
        return  (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,dp,
                getResources().getDisplayMetrics());
    }
    private int sp2px(int sp){
        return  (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP,sp,
                getResources().getDisplayMetrics());
    }

    @Override
    public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
        float height = ivPic.getHeight();  //获取图片的高度
        if (oldt < height){
            int i = Float.valueOf(oldt/height * 255).intValue();    //i 有可能小于 0
            mToolbarTb.getBackground().setAlpha(Math.max(i,0));   // 0~255 透明度
        }else {
            mToolbarTb.getBackground().setAlpha(255);
        }
    }
}

资源下载