天天看點
傳回

【Android】仿淘寶商品詳情頁面的下拉漸變分析布局結構：

最近需要做一個和最新版淘寶相似的商品詳情頁。先看原版：

【Android】仿淘寶商品詳情頁面的下拉漸變分析布局結構：

淘寶的版本

我實作的效果：

【Android】仿淘寶商品詳情頁面的下拉漸變分析布局結構：

我的版本

因為單純實作漸變功能，是以背景隻用了一張尺寸較大的imageview。

先說實作效果要求：

  • 沉浸式狀态欄：當整個頁面下滑到一定高度時，變為白色；banner出現時，變為透明，期間顔色是漸變的；
  • toolbar的傳回鍵和後邊的“更多”鍵始終顯示，不受漸變影響，toolbar中間的商品圖示原始狀态為隐藏，banner開始隐藏時慢慢漸變顯示；
  • tablayout整體原始為隐藏，banner開始隐藏時，tablayout開始顯示，直至無透明度。

思路：簡單說就是檢測使用者手指的縱向滑動長度，就是Y方向，整體用一個NestedScrollView包裹着，而NestedScrollView有一個滾動監聽方法：addOnScrollChangedListener。

于是乎，動手吧！

先看布局：

<com.zhy.autolayout.AutoRelativeLayout 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="wrap_content">


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scrollview_goods_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


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

            <ImageView
                android:id="@+id/iv_big"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:layout_marginBottom="20dp"
                android:scaleType="centerCrop"
                android:src="@drawable/banner_a" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_marginBottom="20dp"
                android:src="@drawable/banner_a" />

            ........

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>


    <RelativeLayout
        android:id="@+id/rl_toolbar_and_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/view_goods_detail"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/immerse_white_color" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_goods_detail"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_below="@id/view_goods_detail"
            android:background="@color/color_white"
            app:contentInsetStart="0dp">

            <com.zhy.autolayout.AutoRelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/iv_back_goods_detail"
                    android:layout_width="60dp"
                    android:layout_height="match_parent"
                    android:scaleType="centerInside"
                    android:src="@mipmap/back_goods_detail" />

                <ImageView
                    android:id="@+id/iv_img_toolbar_goods"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:src="@mipmap/emoji" />

                <ImageView
                    android:id="@+id/iv_setting_goods_detail"
                    android:layout_width="60dp"
                    android:layout_height="match_parent"
                    android:layout_alignParentRight="true"
                    android:scaleType="centerInside"
                    android:src="@mipmap/setting_goods_detail" />


            </com.zhy.autolayout.AutoRelativeLayout>

        </android.support.v7.widget.Toolbar>

        <com.zhy.autolayout.AutoLinearLayout
            android:id="@+id/rl_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/toolbar_goods_detail"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:background="@color/background_color" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout_goods_detail"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="@color/color_white"
                android:layout_gravity="center"
                app:tabIndicatorHeight="0dp"
                app:tabSelectedTextColor="@color/theme_color"
                app:tabTextAppearance="@android:style/TextAppearance.Holo.Small"
                app:tabTextColor="@color/text_black" />

        </com.zhy.autolayout.AutoLinearLayout>

    </RelativeLayout>


</com.zhy.autolayout.AutoRelativeLayout>

中間用省略号的是幾張高度均為100dp的imageview，為了顯示滾動效果。

分析布局結構：

最外層用的是鴻洋大神的自動布局，AutoRelativeLayout。然後把toolbar，tablayout，還有用于沉浸式狀态欄用的view，放在一個RelativeLayout内。并将這個RelativeLayout放置在NestedScrollView的上層（視覺上的層次）。注意:NestedScrollView的高度需要設定為"wrap_content"，否則會導緻無法滑動的尴尬-_-|||

view_goods_detail：

用于填充狀态欄，在代碼中擷取狀态欄高度，并将此view的高度設定為狀态欄的高度，避免toolbar沖上狀态欄（我的activity繼承了一個沉浸式的baseactivity，後面會給出代碼）。

沉浸式狀态欄： 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // 實作透明狀态欄
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

在activity的onCreate方法中調用。

擷取狀态欄高度并設定為view的高度： 

private void initStatusBar() {
        int statusBarHeight = ViewColor.getStatusBarHeight(this);
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewGoodsDetail.getLayoutParams();
        params.height = statusBarHeight;
        viewGoodsDetail.setLayoutParams(params);
    }

viewGoodsDetail是那個自定義高度的view。

在開始漸變先說幾個方法：

  • setImageAlpha()，設定imageview的圖檔透明度，傳進去的是int，範圍是(0-255，全透明到不透明)
  • getBackground().mutate().setAlpha()，獲得該view的背景并設定為透明度，傳進去的參數和範圍和第一個方法一緻。

注意：調用此方法必須保證，控件設定了背景，否則會報空指針，原因你懂的。。

  • setAlpha()，直接設定view的透明度，傳進去的是0F---1F的float類型的值，也是從全透明到不透明。

    結合要實作的效果，我們可以知道

原始：
  • 填充狀态欄的背景透明
  • toolbar背景全透明，toolbar中間的圖示全透明
  • tablayout 整體透明 
//設定toolbar的背景為全透明
        toolbarGoodsDetail.getBackground().mutate().setAlpha(0);
        //設定填充狀态欄的的背景為全透明
        viewGoodsDetail.getBackground().mutate().setAlpha(0);
        //設定toolbar中間的圖示為全透明
        ivImgToolbarGoods.setImageAlpha(0);
        //設定tablayout整體為透明
        rlTablayout.setAlpha(0f);
.....
        //滾動監聽，實作漸變的關鍵代碼
         scrollviewGoodsDetail.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                //獲得實時的Y向滑動距離
                int scrollY = scrollviewGoodsDetail.getScrollY();
                // rlToolbarAndTablayout是包裹着狀态欄的view，toolbar和tablayout的布局
                //我這裡實作的是當rlToolbarAndTablayout完全蓋住背後的imageview時，從透明到白的漸變，ratio為變化速率
                float ratio = Math.min(1, scrollY / (ivBig.getHeight() - rlToolbarAndTablayout.getHeight() * 1f));
                ivImgToolbarGoods.setImageAlpha((int) (ratio * 0xFF));
                toolbarGoodsDetail.getBackground().mutate().setAlpha((int) (ratio * 0xFF));
                viewGoodsDetail.getBackground().mutate().setAlpha((int) (ratio * 0xFF));
                rlTablayout.setAlpha(ratio);
            }
        });

希望這篇文章可以幫助到各位同行，提供各位一點思路。

所參考的文章：

https://blog.csdn.net/caojian199012/article/details/56488499

(設定透明度的幾個方法的了解)；

https://blog.csdn.net/AnalyzeSystem/article/details/79442196?from=singlemessage

（imageAlpha的思路來源）

https://www.jianshu.com/p/3d990193dcfb

（背景漸變的速率的參考）

下次再見~

android開發 android添加水印 android仿淘寶 android view頁面 頁面android webview android開發分析
上一篇: Log.D的使用
下一篇: 安卓APP的運作方式

繼續閱讀