Android 滑動ScrollView 動態改變標題欄透明度及顏色

廢話不多說,上圖

項目需求是默認顯示白色返回按鈕,及白色文字欄爲透明.滑動到第一屏看不到的時候將白色背景以漸變的形式顯示.並且將文字及返回圖標變爲深色.

首先獲取要開始進行漸變位置的高及滑動到某處標題完全顯示的高並設置ScrollView滑動監聽,(使用kotlin,java自行轉換)

  titlHeight = DisplayUtil.dip2px(this, 60f)
  windowHeight = DisplayUtil.getDensityHeight(this) - titlHeight
  scrollHeight = DisplayUtil.getDensityHeight(this) - (titlHeight * 2)

因爲我的需求是先顯示一整屏,然後顯示到兩倍標題欄高度的時候開始漸變,到標題欄高度的時候完全顯示.

 sv.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
            when {
                scrollHeight > scrollY -> {
                    //滑動小於開始漸變的位置  標題欄爲透明  圖標及文字爲白色
                    setTitleViewAlpha(0f)
                }
                scrollY in scrollHeight..windowHeight -> {
                    //alpha 爲控件的透明程度  0完全透明  1 不透明
                    var alpha = (scrollY - scrollHeight) * 1.0 / titlHeight
                    setTitleViewAlpha(alpha.toFloat())
                }
                else -> {
                     //滑動大於完全顯示的位置  標題欄爲白色  圖標及文字爲深色
                    setTitleViewAlpha(1f)
                }
            }
        })
private fun setTitleViewAlpha(alpha: Float) {
        when (alpha) {
            0f -> { //爲0時 則白色文字及圖標顯示  父佈局background爲透明
                //設置控件的background的alpha 取值爲0~255
                //設置控件的alpha 取值爲0~1 
                ll_title.background.alpha = 0 
                ivLeft_white.alpha = 1f
                ivLeft.alpha = 0f
                tvTitleWhite.alpha = 1f
                tvTitle.alpha = 0f
                tvTitle.visibility = View.INVISIBLE
                tvTitleWhite.visibility = View.VISIBLE
                ivLeft.visibility = View.INVISIBLE
                ivLeft_white.visibility = View.VISIBLE
            }
            1f -> { //爲1時 則深色文字及圖標顯示  父佈局background爲白色
                ll_title.background.alpha = 255
                ivLeft_white.alpha = 0f
                ivLeft.alpha = 1f
                tvTitleWhite.alpha = 0f
                tvTitle.alpha = 1f
                tvTitle.visibility = View.VISIBLE
                tvTitleWhite.visibility = View.GONE
                ivLeft.visibility = View.VISIBLE
                ivLeft_white.visibility = View.GONE
            }
            else -> { //其餘則設置alpha即可   
                ll_title.background.alpha = (alpha * 255).toInt()
                ivLeft_white.alpha = 1f - alpha
                ivLeft.alpha = alpha
                tvTitleWhite.alpha = 1f - alpha
                tvTitle.alpha = alpha
                tvTitle.visibility = View.VISIBLE
                tvTitleWhite.visibility = View.VISIBLE
                ivLeft.visibility = View.VISIBLE
                ivLeft_white.visibility = View.VISIBLE
            }
        }
    }

佈局中兩個返回按鈕 兩個文本  一個白色一個深色,通過alpha來控制

補上工具類DisplayUtil

public class DisplayUtil {
	public static float getDensity(Context context) {
		Resources resources = context.getResources();
		DisplayMetrics dm = resources.getDisplayMetrics();
		return dm.density;
	}

	public static int getDensityWdith(Context context) {
		Resources resources = context.getResources();
		DisplayMetrics dm = resources.getDisplayMetrics();
		return dm.widthPixels;
	}

	public static int getDensityHeight(Context context) {
		Resources resources = context.getResources();
		DisplayMetrics dm = resources.getDisplayMetrics();
		return dm.heightPixels;
	}

	// 1.代碼中設置setXXSize的都是px單位,都需要把佈局中的dp,sp轉成px才能使用
	/**
	 * 根據手機分辨率從 px(像素) 單位 轉成 dp
	 */
	public static int px2dip(Context context, float pxValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (pxValue / scale + 0.5f);
	}

	/**
	 * 根據手機分辨率從 dp 單位 轉成 px(像素)
	 */
	public static int dip2px(Context context, float dpValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (dpValue * scale + 0.5f);
	}

	/**
	 * 將px值轉換爲sp值,保證文字大小不變
	 * 
	 * @param pxValue
	 * @param
	 *            (DisplayMetrics類中屬性scaledDensity)
	 * @return
	 */
	public static int px2sp(Context context, float pxValue) {
		final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
		return (int) (pxValue / fontScale + 0.5f);
	}

	/**
	 * 將sp值轉換爲px值,保證文字大小不變
	 * 
	 * @param spValue
	 * @param
	 *            (DisplayMetrics類中屬性scaledDensity)
	 * @return
	 */
	public static int sp2px(Context context, float spValue) {
		final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
		return (int) (spValue * fontScale + 0.5f);
	}
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章