1. 程式人生 > >Android 仿淘寶商品詳情標題欄變色,佈局層疊效果

Android 仿淘寶商品詳情標題欄變色,佈局層疊效果

如圖效果

思路:如圖可以將圖片中佈局分成三個部分,1標題欄透明背景,2上半部分佈局,3下半部分佈局,當我們向上拉動的時候,1佈局實現漸變,從透明變到白色,2佈局背景色漸變到白色,23佈局隨滾動條上拉,並且慢慢改變2佈局paddingtop的屬性,其中1佈局漂浮在整個scrollview佈局之上,23佈局放在scrollview佈局裡邊。

方法:最主要的問題是怎麼樣知道上拉的距離並且精確地設定每個佈局相應的變化,用到的最重要的一個方法是scrollview的一個監聽方法。ScrollViewListener的onScrollChanged方法,但是這個方法在預設的ScrollView控制元件中是不暴露出來給我們用的,所以需要重寫控制元件。

/**
 * 自定義csrollview用來實現標題歲滾動變化透明度
 * Created by song on 2016/10/17.
 */
public class MyScrollView extends ScrollView {

    public interface  ScrollViewListener{
        void onScrollChanged(int l, int t, int oldl, int oldt);
    }

    private ScrollViewListener scrollViewListener=null;
    public MyScrollView(Context context) {
        super(context);
    }

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

    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (scrollViewListener !=null){
            scrollViewListener.onScrollChanged( l,  t,  oldl,  oldt);
        }
    }
}
在顯示的activity中調取
ViewTreeObserver observer = layout2.getViewTreeObserver();
        observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                height = layout2.getHeight() - doctorInfoshowTitle.getHeight();
                doctorInfoshowSc.setScrollViewListener(new MyScrollView.ScrollViewListener() {
                    @Override
                    public void onScrollChanged(int l, int t, int oldl, int oldt) {
                        if (t <= 0) {
                            layout2.setBackgroundColor(Color.argb(255, 12, 183, 197));
                            CenterText.setTextColor(Color.argb(0, 255, 255, 255));
                            showTitle.setBackgroundColor(Color.argb(0, 255, 255, 255));
                            layout2.setPadding(0, pt, 0, 0);
                        } else if (t > 0 && t < height) {
                            //計算滑動時縮放比率
                            float scale = (float) t / height;
                            float apche = ((1 - scale) * 255);
                            float apche2 = (scale * 255);
                            layout2.setBackgroundColor(Color.argb((int) apche, 12, 183, 197));
                            //字型更改
                            CenterText.setTextColor(Color.argb((int) apche2, 102, 102, 102));
                            showTitle.setBackgroundColor(Color.argb((int) apche2, 255, 255, 255));


                            layout2.setPadding(0, (int) (pt + 250 * scale), 0, 0);
                        } else {
                            layout2.setBackgroundColor(Color.argb(0, 12, 183, 197));
                            CenterText.setTextColor(Color.rgb(102, 102, 102));
                            showTitle.setBackgroundColor(Color.argb(255, 255, 255, 255));
                           layout2.setPadding(0, pt+250, 0, 0);
                        }


                        //如果滑動到ct位置則不顯示,控制標題欄上文字的現實和隱藏
                        if (t >= cheight) {
                            CenterText.setVisibility(View.VISIBLE);
                            showLeftBack.setImageDrawable(getResources().getDrawable(R.drawable.back3));
                        } else {
                            showCenterText.setVisibility(View.INVISIBLE);
                            showLeftBack.setImageDrawable(getResources().getDrawable(R.drawable.back));
                        }
                        if (t > 400) {//400時我自己設定的一個對應的高度
                            showLineBottom.setVisibility(View.VISIBLE);
                        } else {
                            showLineBottom.setVisibility(View.GONE);
                        }


                    }
                });
            }
        });


方法中可以根據上拉的位移來計算漸變和padding值,實現效果