android仿美团客户端购买框悬浮特效

 

 

实现步骤如下:

1,新建一个项目,新建一个MyScrollView继承自ScrollView

 

public class MyScrollView extends ScrollView {

 

    private OnScrollListener onScrollListener;

    

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

        super(context, attrs, defStyle);

        

    }

    public MyScrollView(Context context, AttributeSet attrs) {

        this(context, attrs,0);

    }

    //监听滚动事件

    @Override

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

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

        if(onScrollListener != null){   

            onScrollListener.onScroll(t);  //将top传出去

        }

    }

    /**

     * 设置滚动接口

     * @param onScrollListener

     */

    public void setOnScrollListener(OnScrollListener onScrollListener) {

        this.onScrollListener = onScrollListener;

    }

    

    /**

     * 

     * 滚动的回调接口

     * 

     *

     */

    public interface OnScrollListener{

        /**

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

         * @param scrollY

         *                 、

         */

        public void onScroll(int scrollY);

    }

 

}

很简单的重写,就是添加了一个回调,在滚动时去更新y值.

 

2,再看activity_main.xml的布局

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

 

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="45dip"

        android:scaleType="centerCrop"

        android:src="@drawable/navigation_bar" />

 

    <com.example.mymmmdemo.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/pic"

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

                    android:scaleType="centerCrop" />

 

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/one"

                    android:scaleType="centerCrop" />

 

                <ImageView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:background="@drawable/one"

                    android:scaleType="centerCrop" />

            </LinearLayout>

 

            <include

                android:id="@+id/top_buy_layout"

                layout="@layout/buy_layout" />

        </FrameLayout>

    </com.example.mymmmdemo.MyScrollView>

 

其实它是这样子的:

让悬浮框出现了两次,后面来解释为什么要这么做

 

3,悬浮框的buy_layout.xml

<?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/buy" />

 

</LinearLayout>

 

4,打开MainActivity.java

public class MainActivity extends Activity implements OnScrollListener {

 

    private MyScrollView mScrollView;

    /**

     * 在MyScrollView里面的购买布局

     */

    private LinearLayout mBuyLayout;

    /**

     * 位于顶部的购买布局

     */

    private LinearLayout mTopBuyLayout;

    

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        

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

        mScrollView.setOnScrollListener(this);

        

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

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

        

        //监听子元素的状态  是否消失

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

            

            @Override

            public void onGlobalLayout() {

                onScroll(mScrollView.getScrollY());

            }

        });

    }

 

    @Override

    public void onScroll(int scrollY) {  //第一次进入应用也会触发onScroll()方法

        int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());//选取最大值

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

    }

    //原理:设置两个购买栏 , 第一个购买栏放在最顶头,第二个放置在正常位置, 一进入应用,首先会触发onScroll()方法,在方法里面判断

    //是否滑动到顶部,如果不是,则将顶头栏与正常栏重叠一起放置 

    //如果滑倒了顶部  ,则将顶部栏固定在原有位置

}

 

 

来自为知笔记(Wiz)