Android開發之仿淘寶商品詳情頁

原博主，找了好多，感覺這個寫的蠻不錯，主要是這種實現思想很厲害

看到有人在問如何實現淘寶商品詳情頁效果，手癢了就擼了一個，獻上效果圖 

 

大致梳理一下思路，這裏不提供源碼

狀態欄透明使用開源庫StatusBarCompat，爲了兼容手機4.4

dependencies {
        compile ('com.github.niorgai:StatusBarCompat:2.1.4', {
            exclude group: 'com.android.support'
        })
    }

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

標題欄圖標透明度變化參考Api setAlpha()已過時

icon.setImageAlpha(0);

Banner控件爲ViewPager,淘寶顯示爲正方形，這裏需要修改ViewPager measure函數

public class IdeaViewPager extends ViewPager {

    private Point point;

    public IdeaViewPager(Context context) {
        this(context,null);
    }

    public IdeaViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        point = new Point();
        windowManager.getDefaultDisplay().getSize(point);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(point.x,point.x);
    }
}

測量View高度，獲取到高度集合綁定到ScrollView,根據ScrollView滑動距離判斷是屬於哪一個Tab選項

    public int getMeasureHeight(View view){
        int width = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        int height = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        view.measure(width, height);
        return view.getMeasuredHeight();
    }

重新onScrollChanged函數，實現ViewPager滑動速度比其他View慢

  @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (viewPager != null && t != oldt) {
            viewPager.setTranslationY(t/2);
        }
    }

根據限定距離（Banner）計算百分比偏移量，實現顏色漸變、透明度漸變（淘寶商品詳情頁有二次顏色漸變）

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

        if(viewPager!=null&&t<=point.x-headerHeight&&getOnScrollChangedColorListener()!=null){

            getOnScrollChangedColorListener().onChanged(Math.abs(t)/Float.valueOf(point.x-headerHeight));
            if(t<=(point.x-headerHeight)/2){
                getOnScrollChangedColorListener().onChangedFirstColor(t/(point.x-headerHeight)/2);
            }else{
                getOnScrollChangedColorListener().onChangedSecondColor((t-(point.x-headerHeight)/2)/(point.x-headerHeight)/2);
            }

        }

        int currentPosition = getCurrentPosition(t,arrayDistance);
        if(currentPosition!=position&&getOnSelectedIndicateChangedListener()!=null){
            getOnSelectedIndicateChangedListener().onSelectedChanged(currentPosition);
        }
        this.position = currentPosition;
    }

單一顏色漸變透明度，還原argb通道，修改a值

 ideaScrollView.setOnScrollChangedColorListener(new IdeaScrollView.OnScrollChangedColorListener() {
            @Override
            public void onChanged(float percentage) {

                int color = getAlphaColor(percentage>0.9f?1.0f:percentage);
                header.setBackgroundDrawable(new ColorDrawable(color));
                radioGroup.setBackgroundDrawable(new ColorDrawable(color));
                icon.setImageAlpha((int) ((percentage>0.9f?1.0f:percentage)*255));
                radioGroup.setAlpha((percentage>0.9f?1.0f:percentage)*255);

                setRadioButtonTextColor(percentage);

            }

            @Override
            public void onChangedFirstColor(float percentage) {

            }

            @Override
            public void onChangedSecondColor(float percentage) {

            }
        });

        ideaScrollView.setOnSelectedIndicateChangedListener(new IdeaScrollView.OnSelectedIndicateChangedListener() {
            @Override
            public void onSelectedChanged(int position) {
                isNeedScrollTo = false;
                radioGroup.check(radioGroup.getChildAt(position).getId());
                isNeedScrollTo = true;
            }
        });

    public int getAlphaColor(float f){
        return Color.argb((int) (f*255),0x09,0xc1,0xf4);
    }

Tab選項屬性不能太頻繁，會有顏色值閃爍情況出現，這裏需要策略

 public void setRadioButtonTextColor(float percentage){
        if(Math.abs(percentage-currentPercentage)>=0.1f){
            for(int i=0;i<radioGroup.getChildCount();i++){
                RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
                radioButton.setTextColor(radioButton.isChecked()?getRadioCheckedAlphaColor(percentage):getRadioAlphaColor(percentage));
            }
            this.currentPercentage = percentage;
        }
    }

判斷當前屬於哪個選項，根據滑動距離與傳入綁定的View高度集合來計算

private int getCurrentPosition(int t, ArrayList<Integer> arrayDistance) {

        int index = 0;
        for (int i=0;i<arrayDistance.size();i++){
            if(i==arrayDistance.size()-1){
                index = i;
            }else {
                if(t>=arrayDistance.get(i)&&t<arrayDistance.get(i+1)){
                    index = i;
                    break;
                }
            }
        }
        return index;
    }

切換選項卡以及回到頂部按鈕的具體實現參考scrollTo函數

    private void scrollToPosition(int position){
        scrollTo(0,arrayDistance.get(position));
    }

以上代碼實現了上圖效果，當然也可以使用RecyclerView AbsListView做容器 

【稍後我會把GitHub地址還有csdn的地址都發出來】

GitHub：https://github.com/lanyan520/Idea-ScrollView

CSDN：