實現沉浸式狀態列 + scrollView頂部伸縮 + actionBar漸變完美結合，打造屬於自己的View

codeGoogle發表於2017-12-21
View

最近需求要做一個拉縮漸變的狀態列，往上拉的時候，需要顯示actionBar，這個過程是漸變的，頂部的圖片背景能實現拉縮，並且還要實現狀態列沉浸式

效果如如下：

  • 實現狀態列的透明化
  • 實現ScrollView的拉縮
  • 實現ActionBar的漸變

實現

1、至於試下實現ScrollView的拉縮這個效果很簡單重寫onTouchEvent方法，利用滑動的垂直方向的距離，然後在設定圖片的大小

......
 case MotionEvent.ACTION_MOVE:
                    if (!mScaling) {
                        if (getScrollY() == 0) {
                            mFirstPosition = event.getY();
                        } else {
                            break;
                        }
                    }

                    int distance = (int) ((event.getY() - mFirstPosition) * 0.6);
                    if (distance < 0) {
                        break;
                    }
                    mScaling = true;
                    params.height = zoomViewInitHeight + distance;

                    Log.d(TAG, "params.height == " + params.height + ", zoomViewInitHeight == " + zoomViewInitHeight + ", distance == " + distance);
                    zoomView.setLayoutParams(params);
                    return true;
複製程式碼

這裡要注意的是：在手指釋放的時候需要進行恢復圖片的高度

2、ActionBar的透明度很簡單了，在onScrollChanged裡進行操作即可

 @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        int transAlpha = getTransAlpha();

        if (transView != null) {
            Log.d(TAG, "[onScrollChanged .. in ], 透明度 == " + transAlpha);
            transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, transAlpha));
        }
        if (translucentChangedListener != null) {
            translucentChangedListener.onTranslucentChanged(transAlpha);
        }
    }

複製程式碼

3、至於沉浸式狀態列就很簡單了，之前寫過帖子

這裡我簡單的封裝了一些工具類

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }
複製程式碼

在相應的Activity或基類執行這段程式碼就ok了。

可見在4.4到5.0的系統、5.0及以上系統的處理方式有所不同

除了這種程式碼修改額方式外，還可以通過主題來修改，需要在values、values-v19、values-v21目錄下分別建立相應的主題：

//values
<style name="TranslucentTheme" parent="AppTheme">
</style>//values-v19<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">false</item>
</style>//values-v21<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
</style>
複製程式碼

給相應Activity或Application設定該主題就ok了。

兩種方式根據需求選擇就好了，到這裡我們就完成了第一步，將狀態列透明化了。

完成了第一步，我們開始給狀態列加上想要的色彩吧！

在values、values-v19目錄新增如下尺寸：

//values<dimen name="padding_top">0dp</dimen>//values-v19<dimen name="padding_top">25dp</dimen>
複製程式碼

關於25dp，在有些系統上可能有誤差，這裡不做討論！

2.1 頁面頂部使用Toolbar（或自定義title） 一般情況狀態列的顏色和Toolbar的顏色相同，既然狀態列透明化後，佈局頁面延伸到了狀態列，何不給Toolbar加上一個狀態列高度的頂部padding呢：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:paddingTop="@dimen/padding_top"
    android:theme="@style/AppTheme.AppBarOverlay" />
複製程式碼

效果圖下：

實現沉浸式狀態列 + scrollView頂部伸縮 + actionBar漸變完美結合，打造屬於自己的View

實現沉浸式狀態列 + scrollView頂部伸縮 + actionBar漸變完美結合，打造屬於自己的View

部落格地址：

http://www.jianshu.com/p/05aa5329c3d3

專案地址：

https://github.com/androidstarjack/TranslucentScrollView

相信自己，沒有做不到的，只有想不到的

如果你覺得此文對您有所幫助， 歡迎加入微信公眾號：終端研發部

技術+職場

相關文章