android新特性：商城首页一键回到顶部功能实现（包括ListView, RecyclerView 和 ScrollView）

最新推荐文章于 2022-10-12 16:16:31 发布
最新推荐文章于 2022-10-12 16:16:31 发布
阅读量8.5k 收藏 6
点赞数 2
分类专栏： Android控件使用 文章标签： 商城 android 回到顶部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/53708112
版权

一般只要做商城的大家都知道或都见过有个悬浮按钮，当你向下滑动到一定的位置的时候他就会乖乖的弹出了！当你点击一下他就会跳转到页面的顶部（其实可以是任何位置的），在顶部的时候他就会乖乖的消失。

当然大家自己可以写一个，但是需要自己处理但各种触摸事件和动画效果，我建议大家有时间自己写写，也不难的!

说道难的一点，其实就是选择器比较难写一点，这里提供了鸿洋大神一篇自己写的drawable/fab.xml看着真心都有点辛苦。

博客地址为：http://blog.csdn.net/lmj623565791/article/details/46678867

在这里我使用的是FloatingActionButton这个库，推荐以后多使用CoordinatorLayout这个库让你的APP提示一个档次

先看看效果怎么样：ListView, RecyclerView效果差不多

这里写图片描述

ScrollView效果

这里写图片描述

首先先介绍一下FloatingActionButton的该怎么用

导入FloatingActionButton ，在你的app.build进行引入：

 dependencies {
compile 'com.melnykov:floatingactionbutton:1.3.0'
}

FloatingActionButton 的属性信息

 <com.melnykov.fab.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="15dp"
            android:src="@mipmap/ic_launcher"
            fab:fab_colorNormal="@color/pink"
            fab:fab_colorPressed="@color/pink_pressed"
            fab:fab_colorRipple="@color/ripple" />

正常使用的FloatingActionButton 大小为56dp
如果设置为mini类型的话就是40dp

如果想直接设置他的属性就在跟布局下添加：

 xmlns:fab="http://schemas.android.com/apk/res-auto"

设置大小的话：

fab:fab_type="mini"

or

fab.setType(FloatingActionButton.TYPE_MINI);

设置颜色的话：

fab:fab_colorNormal="@color/primary"
fab:fab_colorPressed="@color/primary_pressed"

or

fab.setColorNormal(getResources().getColor(R.color.primary));
fab.setColorPressed(getResources().getColor(R.color.primary_pressed));

设置是否显示就用：

fab:fab_shadow="false"

or

fab.setShadow(false);
一般页面初始化onCreate方法中就设置，不然你会发现，刚进入页面FloatingActionButton 会闪现。

设置显示和隐藏

fab.show();
fab.hide();
上面两有动画
fab.show(false); 
fab.hide(false); 
这两个不会显示动画了

设置渐变色，就是点击的时候：

fab:fab_colorRipple="@color/ripple"

or

fab.setColorRipple(getResources().getColor(R.color.ripple));

在FloatingActionButton 上面添加个图片（例如向上的箭头）

在xml使用android:src即可，主要不要太大，你懂得...

好了进入正题：

第一、先看看FloatingActionButton在Listview中使用：

1、布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_floating_list_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.hnshangyu.floatingactionbuttondemo.FloatingListViewActivity">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="15dp"
        android:src="@mipmap/ic_launcher"
        fab:fab_colorNormal="@color/pink"
        fab:fab_colorPressed="@color/pink_pressed"
        fab:fab_colorRipple="@color/ripple" />

</RelativeLayout>

2、然后为listview填充数据，我就不写了，直接看操作

    private void initView() {
        list = (ListView) findViewById(R.id.list);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        //首先隐藏防止FloatingActionButton闪屏
        fab.hide(false);
        list.setAdapter(new myAdapter());
        //设置为小图
        //fab.setType(FloatingActionButton.TYPE_MINI);或布局中：fab:fab_type="mini"
        fab.attachToListView(list, new ScrollDirectionListener() {
            @Override
            public void onScrollDown() {
                fab.hide();
            }

            @Override
            public void onScrollUp() {
                fab.show();
            }
        }, new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView absListView, int position) {
            }

            @Override
            public void onScroll(AbsListView absListView, int position, int positiontwo, int i2) {
                if (position > 5) {
                    fab.show();
                } else {
                    fab.hide();
                }
            }
        });

    }

    private void initListener() {
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                list.setSelection(0);
            }
        });
    }

第二、FloatingActionButton在RecyclerView中使用：

1、布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_floating_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.hnshangyu.floatingactionbuttondemo.FloatingRecyclerViewActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="15dp"
        android:src="@mipmap/ic_launcher"
        fab:fab_colorNormal="@color/pink"
        fab:fab_colorPressed="@color/pink_pressed"
        fab:fab_colorRipple="@color/ripple" />
</RelativeLayout>

2、实现方法：

 private void initView() {
        fab.hide(false);
        recyclerview.setAdapter(new RecyclerViewAdapter(mContext, nameList));
        //设置为小图
        //fab.setType(FloatingActionButton.TYPE_MINI);或布局中：fab:fab_type="mini"
        fab.attachToRecyclerView(recyclerview, new ScrollDirectionListener() {
            @Override
            public void onScrollDown() {
                fab.hide();
            }

            @Override
            public void onScrollUp() {
                fab.show();
            }
        }, new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                RecyclerView.LayoutManager layoutManager = recyclerview.getLayoutManager();
                if (layoutManager instanceof LinearLayoutManager) {
                    LinearLayoutManager linearManager = (LinearLayoutManager) layoutManager;
                    int firstVisibleItemPosition = linearManager.findFirstVisibleItemPosition();
                    if (firstVisibleItemPosition > 5) {
                        fab.show();
                    } else {
                        fab.hide();
                    }
                }
            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }
        });
    }

    private void initListener() {
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                UIUtils.MoveToPosition(manager,0);
//                UIUtils.MoveToPosition(new LinearLayoutManager(mContext), recyclerview, 0);

                fab.hide();

            }
        });
    }

3、跳转的两种方式：

package cn.hnshangyu.floatingactionbuttondemo.utils;

import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class UIUtils {

    /**
     * RecyclerView 移动到当前位置，
     *
     * @param manager
     * @param mRecyclerView
     * @param n
     */
    public static void MoveToPosition(LinearLayoutManager manager, RecyclerView mRecyclerView, int n) {


        int firstItem = manager.findFirstVisibleItemPosition();
        int lastItem = manager.findLastVisibleItemPosition();
        if (n <= firstItem) {
            mRecyclerView.scrollToPosition(n);
        } else if (n <= lastItem) {
            int top = mRecyclerView.getChildAt(n - firstItem).getTop();
            mRecyclerView.scrollBy(0, top);
        } else {
            mRecyclerView.scrollToPosition(n);
        }

    }

    /**
     * RecyclerView 移动到当前位置，
     *
     * @param manager
     * @param n
     */
    public static void MoveToPosition(LinearLayoutManager manager, int n) {
        manager.scrollToPositionWithOffset(n, 0);
        manager.setStackFromEnd(true);
    }
}

第二、FloatingActionButton在ScrollView中使用：

在这里大家注意的是：这里的ScrollView类库中重写了，用他的ObservableScrollView，他实现了后面我们需要的接口

1、布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_floating_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.hnshangyu.floatingactionbuttondemo.FloatingScrollViewActivity">
    <com.melnykov.fab.ObservableScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/ll_scrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_pic"
                android:layout_width="match_parent"
                android:layout_height="220dp"
               android:background="@mipmap/pic2" />
        </LinearLayout>
    </com.melnykov.fab.ObservableScrollView>

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="15dp"
        android:src="@mipmap/ic_launcher"
        fab:fab_colorNormal="@color/pink"
        fab:fab_colorPressed="@color/pink_pressed"
        fab:fab_colorRipple="@color/ripple" />
</RelativeLayout>

2、实现方法：

 private void initView() {
        fab.hide(false);
        fab.attachToScrollView(scrollview, new ScrollDirectionListener() {
            @Override
            public void onScrollDown() {
                fab.hide();
            }

            @Override
            public void onScrollUp() {
                fab.show();
            }
        }, new ObservableScrollView.OnScrollChangedListener() {
            @Override
            public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
                if (t > ivPic.getHeight()) {
                    fab.show();
                } else {
                    fab.hide();
                }
            }
        });
    }

//    滚到到底部：
//            mRootScrollView.fullScroll(ScrollView.FOCUS_DOWN);
//    滚动到顶部：
//            mRootScrollView.fullScroll(ScrollView.FOCUS_UP);
//    直接跳到某一位置
//    scrollView.scrollTo(0, 300);
//    滚动到某一位置
//     scrollView.smoothScrollTo(0, offset);

    private void initListener() {
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                scrollview.fullScroll(ScrollView.FOCUS_UP);
            }
        });
    }

到此就基本实现了，有什么指教欢迎指出，谢谢…..

demo下载地址：http://download.csdn.net/download/huangxiaoguo1/9714115

晓果博客
关注
专栏目录
【Android实现点击回到顶部】
qq_57265338的博客
09-05 1576
这里使用RecyclerView，添加监听OnScrollChangeLinstener，通过监听RecyclerView的第一个item的position决定按钮显示或者隐藏 然后通过按钮点击回到顶部。判断position大于等于3的时候把text设置数据回顶部 并把显示方式改VISIBLE 否则就GONE。当position大于等于3的时候显示回顶部按钮然后点击回到顶部。好了，一个简单的点击按钮回到顶部就完成了！
那些年，我们一起踩过的 “Android 坑”
热门推荐
JackWaiting
07-19 2万+
69、多线程同时访问集合（ConcurrentModificationException）问题现象： 多线程同时修改集合时常常容易出现 ConcurrentModificationException ，即便是改成用 Collections.synchronizedCollection() 方法同步也无效。原因分析：当集合正在迭代时，如果进行修改就会出现异常，@问题13 已经说过该问题。而 synch
商城首页一键回到顶部功能实现（包括ListView, RecyclerView 和 ScrollView）
12-17
一般只要做商城的大家都知道或都见过有个悬浮按钮，当你向下滑动到一定的位置的时候他就会乖乖的弹出了！当你点击一下他就会跳转到页面的顶部（其实可以是任何位置的），在顶部的时候他就会乖乖的消失。
Android自定义ScrollView实现一键置顶功能
weixin_34072159的博客
11-22 225
效果图如下： （ps：动态图有太大了，上传不了，就给大家口述一下要实现的功能吧） 要实现的功能：当ScrollView向上滑动超过一定距离后，就渐变的出现一个置顶的按钮，当滑动距离小于我们指定的距离时，按钮又消失。 实现原理：就是监听View的onScrollChanged()方法（回调方法），获取到ScrolView滑动的距离，如果大于我们的距离，则出现置顶按钮，否则，直接隐藏，且当按...
Android返回顶部实现
dorytmx的博客
02-17 1388
点击按钮返回顶部
【Android】Listview返回顶部，快速返回顶部的功能实现，详解代码。
技术博客
09-13 389
作者：程序员小冰，GitHub主页：https://github.com/QQ986945193 新浪微博：http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现的效果图： 我这里只是单纯的实现了ListView返回顶部的功能。具体效果大家可以适当地美化 在实际项目中可以换图标，去掉右侧滚动条等。具体ui美化不做解释。 好了，首先我们是当...
仿淘宝一键置顶
02-09
在Android开发中，"仿淘宝一键置顶"通常是指在滚动视图（如ScrollView、ListView或RecyclerView）中实现一个功能，使得用户可以点击一个按钮，让特定的项立即移动到视图的顶部。这个功能常见于电商应用，比如淘宝，...
一个牛奔的Android开源大全
watertekhqx的博客
01-25 6837
leobert.lan的博客 一起学习目录视图 摘要视图 订阅 聚焦行业最佳实践，BDTC 2016完整议程公布 微信小程序实战项目——点餐系统 程序员11月书讯，评论得书啦 Get IT技能知识库，50个领域一键直达 github上的优秀android开源项目 2015-11-17 16:35 1219人阅读 评论(0) 收藏 举报目录(?)[+]酷
2017 github 上android 源码（适合工作中开发）
snake_son的博客
12-30 1万+
转载： http://blog.csdn.NET/a774057695/article/details/49889437 https://github.com/XinRan5312/Android-open-project 目前包括：Android 开源项目第一篇——个性化控件(View)篇 包括ListView、ActionBar、Menu、ViewPager、Gallery、GridV
Android | ListView、RecyclerView 实现一键回到顶部
最新发布
鷾
10-12 2244
ListView、RecyclerView 实现一键回到顶部
Android ListView一键置顶
01-21
实现ListView类似于网页一键返回顶部
类似淘宝内页回到顶部代码
08-25
找了很久才找到这个代码，当拖动网页滚动条的时候会自动出现给回到顶部的图表，点击就可以回到顶部 大家可以到这个网站上看演示http://www.shopokey.com,当用户拖动滚动条的时候会在右下角自动出现个上向的top图标，如果要改成中文的，主要把那个图片替换下就可以了！非常好用啊
沉浸式状态栏+头部拉伸+一键置顶
10-12
沉浸式状态栏+头部拉伸+一键置顶
android 回到顶部代码,Android scrollToTop实现点击回到顶部（兼容PullTorefreshScrollview）...
weixin_35489311的博客
05-26 382
前言最近因为项目组需求，特研究了一下“回到顶部”效果，即：页面里有scrollview，内容很多，当滑动到页面下面或者更深时，需要回到顶部，即可点击出现的按钮，省得回滑N久。我没有搜，或许网上有很多这样的例子，此文写的不好的地方，望指点。效果图如下初一看是不是觉得很简答？没错，当时我也是这样想的页面内容很长，就弄个scrollview，回到顶部按钮需要固定在右下角，故大概的布局代码：xmlns:t...
一键回到页面顶部_原来华为手机"右上角"隐藏扫描仪，纸质档一键电子化，涨知识了...
weixin_36469726的博客
01-03 444
这段时间，为了抢华为Mate 40，很多人一掷千金，但还是没有入手到。不管有没有入手，华为手机上的这个技巧你一定要知道。原来华为手机右上角隐藏扫描仪，纸质档能一键电子化，我也是今天才知道！华为手机的这个开关，隐藏在负一屏页面，左滑至负一屏即可打开。1、 打开功能进入到负一屏页面的时候，可以看到上方的搜索栏，点击搜索框的右边的图片，可以开启智慧识屏的功能；2、 拍摄照片一般默认的是扫一扫的页面，需要...
android双击回到顶部,Android之双击回到顶部
weixin_39677027的博客
05-28 1137
双击回到顶部在Android应用中用的很多，众所周知的微信消息列表，朋友圈都提供这样的效果，下面我将自己自项目中的实践记录下来，分享给大家首先：获取双击事件网上有很多的获取双击事件的方法，这里我讲它稍加封装，整个工程也可以使用首先我们来定义双击事件的接口packagecom.....activity.info;importandroid.view.View;/***@authorwfy*单击...
玩安卓从 0 到 1 之列表一键置顶
Zhujiang
12-02 1万+
前言 系列文章 这篇文章是这个系列的第六篇文章了，下面是前五篇文章： 1、玩安卓从 0 到 1 之总体概览 2、玩安卓从 0 到 1 之项目首页 3、玩安卓从 0 到 1 之首页框架搭建。 4、玩安卓从 0 到 1 之架构思考 5、玩安卓从 0 到 1 之适配器思考 按照惯例，放一下 Github 地址和 apk 下载地址吧！ apk 下载地址：www.pgyer.com/llj2 Github地址：github.com/zhujiang521… 前因后果 RecyclerView 大家平时都会使用，在本项
Android自定义ScrollView下拉图片变大且带有一键置顶功能
shenggaofei的博客
12-01 547
描述：下拉ScrollView时顶部的图片随之变大，回拉缩小，且带有一键置顶的功能   1.自定义类： import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.content.Context; import android.util.Attribute...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值