美团滑动置顶效果

美团滑动置顶效果

 首先上图看效果                            

  如图所示，当图片滑动到Title的时候，则置顶！

首先自定义ScrollView

public class MyScrollView extends ScrollView {

private OnScrollListener onScrollListener;

public MyScrollView(Context context) {

this(context, null);

}

public MyScrollView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public MyScrollView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

/**

* 设置滚动接口

* @param onScrollListener

*/

public void setOnScrollListener(OnScrollListener onScrollListener) {

this.onScrollListener = onScrollListener;

}

@Override

protected void onScrollChanged(int l, int t, int oldl, int oldt) {

super.onScrollChanged(l, t, oldl, oldt);

if(onScrollListener != null){

onScrollListener.onScroll(t);

}

}

/**

* 

* 滚动的回调接口

*

*/

public interface OnScrollListener{

/**

* 回调方法， 返回MyScrollView滑动的Y方向距离

* @param scrollY

*  、

*/

public void onScroll(int scrollY);

}

}

然后是布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/parent_layout"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="45dip"

        android:scaleType="centerCrop"

        android:background="@color/color_222222"

        android:text="Title" 

        android:textColor="@color/color_ffffff"

        android:textSize="24dp"

        android:gravity="center"/>

    <com.meituan.test.MyScrollView

        android:id="@+id/scrollView"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" >

        <FrameLayout

            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/iamge"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <include

                    android:id="@+id/buy"

                    layout="@layout/buy_layout" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/com_facebook_logo"

                    android:scaleType="centerCrop" />

            </LinearLayout>

            <include

                android:id="@+id/top_buy_layout"

                layout="@layout/buy_layout" />

        </FrameLayout>

    </com.meituan.test.MyScrollView>

</LinearLayout>

图片布局

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content" >

    <ImageView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/m_four" />

</LinearLayout>

然后就是实现代码了

public class MeiTuan extends Activity implements OnScrollListener{

/**

* 自定义的MyScrollView

*/

private MyScrollView myScrollView;

/**

* 在MyScrollView里面的购买布局

*/

private LinearLayout mBuyLayout;

/**

* 位于顶部的购买布局

*/

private LinearLayout mTopBuyLayout;

@SuppressWarnings("deprecation")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); 

setContentView(R.layout.activity_meituan);

myScrollView = (MyScrollView) findViewById(R.id.scrollView);

mBuyLayout = (LinearLayout) findViewById(R.id.buy);

mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);

myScrollView.setOnScrollListener(this);

//当布局的状态或者控件的可见性发生改变回调的接口

findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

public void onGlobalLayout() {

//这一步很重要，使得上面的购买布局和下面的购买布局重合

onScroll(myScrollView.getScrollY());

System.out.println(myScrollView.getScrollY());

}

});

}

@Override

public void onScroll(int scrollY) {

int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());

mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());

}

}

以上即可实现效果