上滑ScrollView,实现控件顶部悬浮
因为看到网上的比较复杂,所以自己写了这篇,希望能够足够简单。
先看效果图,是不是你需要的:
不论怎么滑动屏幕内容,当蓝色部分到达顶部时,便会一直会显示在顶部。
实现原理:
顶部1,顶部2布局需要完全一样,初始化时顶部1不显示,为Gone。
当顶部2向上滑动到屏幕顶端时,设置顶部1可见,由于顶部1不包含在ScrollVIew里面,所以会一直存在,不会被滑动;
而向下滑时,当顶部2到达屏幕顶端,隐藏顶部1,显示顶部2即可。
所以实现关键步骤是:
判断顶部2是否滑动到了顶部,也就是标题栏之下。
先看布局,很简单:
布局和原理里面一致:顶部1,ScrollView 就没了。
只是有一个自定义的ScrollView,这个是重点,在代码里面讲,布局也没什么。
记得顶部1不再ScrollView里面,二顶部2在ScrollView里面哦~
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="runa.sometest.slidingstop.SlidingActivity"> <TextView android:id="@+id/top1" android:layout_width="match_parent" android:layout_height="40dp" android:text="this蓝色部分滑动到顶部,悬浮" android:textColor="@android:color/white" android:gravity="center" android:visibility="gone" android:background="#006699"/> <com.sometest.slidingstop.MyScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="300dp" android:scaleType="fitXY" android:src="@drawable/img1"/> <TextView android:id="@+id/top2" android:layout_width="match_parent" android:layout_height="40dp" android:text="this蓝色部分滑动到顶部,悬浮" android:textColor="@android:color/white" android:gravity="center" android:background="#006699"/> <TextView android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="2000dp" android:text="\n这里只是一个Textview,高度2000\n1\n2\n3\n4\n5" /> </LinearLayout> </com.sometest.slidingstop.MyScrollView> </LinearLayout>
接下来就看自定义的ScrollView:
这里面关键的就是onScrollChanged这个方法,实现了ScrollView滑动距离的监听。
只用看有注释的地方。
public class MyScrollView extends ScrollView { private static StopCall stopCall; //ScrollView向上滑动到顶部的距离 private int upH; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); //赋值:300很重要,这个值是顶部2上面的高度,也就是本例中图片的高度 upH = dpTopx(300);//单位是dp } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public static void setCallback(StopCall c){ stopCall =c ; }/** * 关键部分在这里,测量当前ScrollView滑动的距离* 其中t就是,单位是px哦,不是dp
* stopCall是一个接口,是为了在Activity中实现设置顶部1/2可不可见 */@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if(t>upH){//如果滑动距离>本例中图片高度 stopCall.stopSlide(true);//设置顶部1可见,顶部2不可见 }else{//否则 stopCall.stopSlide(false);//设置顶部1不可见,顶部2可见 } } /** * F: 将dp转成为px */ private int dpTopx( int dpValue) { final float scale = this.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); }}
最后看一下Activity:
/** * 接口实现,可不可就 */ public void stopSlide(boolean isStop){ if(isStop){ t1.setVisibility(View.VISIBLE); t2.setVisibility(View.GONE); }else { t2.setVisibility(View.VISIBLE); t1.setVisibility(View.GONE); } }
接口:
public interface StopCall { public void stopSlide(boolean isStop); }
总结;
其实最最关键的点就只有一个:测量当前ScrollView滑动的距离,如果顶部2到达了顶部,那么设置顶部1可见。否则不可见。
-----------------------------
因为工程不是单独的,里面还有很多其它内容,所以就不上传了,代码很简单,都贴在本文里面了,关键的关键是看懂实现原理。
如果还有任何问题,可以联系我:727643332
-------------------2016/05/11