随着APP数据量的增大，电商APP的兴起，大家会经常使用到ScrollView，但是有时候我们滑下数据的时候会出现一个问题，那就当我们数据量太多时，我们无法快速的定位回ScrollView的顶部，以至于操作相同的数据导致我们兴致缺缺，所以诞生了一系列的辅助操作，今天我就带大家来探索淘宝的商品详情下的置顶按钮的开发流程：
第一步、我们先自定义一个ScorllView,这个自定义的ScrollView完成以下功能：
1.监听ScrollView 的onScrollChanged 滚动改变回调
2.当滚动距离大于某个值时显示置顶按钮（即我们显示图片）
3.当点击置顶按钮时能让ScrollView滑动到顶部
先贴上代码：
/** * 跳转置顶的ScrollView */ public class GoTopScrollView extends ScrollView implements View.OnClickListener { //展示置顶的图片按钮 private ImageView goTopBtn; //屏幕高度 //默认高度为500 private int screenHeight=500; public GoTopScrollView(Context context, AttributeSet attrs) { super(context, attrs); } //1.0 //设置滑动到多少出现 public void setScreenHeight(int screenHeight) { this.screenHeight = screenHeight; } //2.0 //设置滚动置顶按钮以及其点击监听事件 public void setImgeViewOnClickGoToFirst(ImageView goTopBtn) { this.goTopBtn = goTopBtn; this.goTopBtn.setOnClickListener(this); } //3.0 //重写滚动改变返回的回调 // l oldl 分别代表水平位移 // t oldt 代表当前左上角距离Scrollview顶点的距离 @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); /** * 滑动距离超过500px,出现置顶按钮,可以做为自定义属性 * 滑动距离如果用户设置了使用用户的 如果用户没有设置使用默认的 */ //3.1 //当 当前的左上角距离顶点距离 大于某个值的时候就显现置顶按钮出来 如果小雨某个值就隐藏 if (screenHeight != 0) { if (t > screenHeight) { goTopBtn.setVisibility(VISIBLE); } else { goTopBtn.setVisibility(GONE); } } } //4.0 //置顶按钮的点击事件监听 @Override public void onClick(View v) { //滑动到ScrollView的顶点 this.smoothScrollTo(0, 0); } }
下面我们来解释上面的代码：
1.0：是提供给初始化的时候设置滑动距离的方法，我们可以设置任意值（除零外），如果不设置默认值为500
2.0：这里我们设置了图片按钮在当前类的引用对象、并设置图片按钮的点击事件
3.0：重写当前ScrollView滑动位置改变的回调，回调方法中我们判断滑动的左上角的y轴离顶点的距离进行判断，展示图片按钮
4.0：当我们点击图片按钮的时候，我们设置滑动当前的ScrollView到顶点位置（0，0）为顶点左上角的坐标
第二步：我需要实现.activity_main.xml:
我们先来看一下xml文件的hierarchyviewer(层级)：
大家很容易就能看到 其实就是一个相对布局包裹着自定的ScrollView和我们置顶的图案布局，置顶的图片我们设置位于右下角，其实可以用FramentLayout来包裹，大家可以自己尝试一下，讲置顶图片写在最后是不会遮盖的。
如下为完成代码：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.administrator.gotoscrollview.GoTopScrollView android:id="@+id/go_top_scrollView" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="65sp" /> </LinearLayout> </com.example.administrator.gotoscrollview.GoTopScrollView> <!-- 返回顶部 默认是隐藏的 宽高是为了让大家看起来显眼设置的--> <ImageView android:id="@+id/iv_return_top" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@mipmap/return_top" android:visibility="gone" /> </RelativeLayout>
第三步：我们需要在页面展示出来
public class MainActivity extends AppCompatActivity { //Scrollview private GoTopScrollView mGoTopScrollView; private ImageView ivReturnTop; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //1.0初始化ScrollView mGoTopScrollView= (GoTopScrollView) findViewById(R.id.go_top_scrollView); //2.0初始化置顶Icon ivReturnTop= (ImageView) findViewById(R.id.iv_return_top); //3.0设置点击置顶的ImageView mGoTopScrollView.setImgeViewOnClickGoToFirst(ivReturnTop); //4.0获取屏幕高度 int screenHeight=ScreenUtil.getScreenSize(getApplicationContext())[1]; //设置ScrollView滑动多少距离就显示，低于多少就显示 如果没有设置就默认为500;(这里我们设置屏幕高度) mGoTopScrollView.setScreenHeight(screenHeight); } }这段代码比较简单、我就不详细说了。
944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
