正文
android仿美团客户端购买框悬浮特效
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
实现步骤如下:
1,新建一个项目,新建一个MyScrollView继承自ScrollView
WizRtf2Html Charset=0 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的布局
WizRtf2Html Charset=0 <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
WizRtf2Html Charset=0 <?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
WizRtf2Html Charset=0 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)
