实现歌词效果自动滚动_仿小红书长图片自动循环滚动效果实现 (附完整源码)...

092db4ea885e67d6a624d322fe0e3be0.gif

码个蛋(codeegg) 第 971 次推文

作者:丶E

链接:https://www.jianshu.com/p/48a89e678d6c

先看小红书的效果

54672636ff94d077e855ad9588f399f3.gif

小红书.GIF

 开干! 上代码 

说说思路

滚动效果用RecyclerView实现。RecyclerView有个smoothScrollToPosition方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里RecycleView4种定位滚动方式演示。每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效果,然后再改变滚动的速度,完成。

public class MainActivity extends AppCompatActivity {    private RecyclerView mRecyclerView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //全屏        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);        setContentView(R.layout.activity_main);        mRecyclerView = findViewById(R.id.mRecyclerView);        mRecyclerView.setAdapter(new SplashAdapter(MainActivity.this));        mRecyclerView.setLayoutManager(new ScollLinearLayoutManager(MainActivity.this));        //smoothScrollToPosition滚动到某个位置(有滚动效果)        mRecyclerView.smoothScrollToPosition(Integer.MAX_VALUE / 2);    }}
无限循环

将RecyclerView的Item数量设置成很大的值,用smoothScrollToPosition方法滚到很远的位置,就能实现这样的效果,很多banner轮播图的实现也是如此;

public class SplashAdapter extends RecyclerView.Adapter {    private int imgWidth;    public SplashAdapter(Context context) {        imgWidth = EasyUtil.getScreenWidth(context);    }    @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_splash, parent, false);        return new ViewHolder(itemView);    }    @Override    public void onBindViewHolder(final ViewHolder holder, final int position) {       /* ViewGroup.LayoutParams lp = holder.item_bg.getLayoutParams();        lp.width = imgWidth;        lp.height =imgWidth*5;        holder.item_bg.setLayoutParams(lp);*/    }    @Override    public int getItemCount() {        return Integer.MAX_VALUE;    }    public class ViewHolder extends RecyclerView.ViewHolder {        ImageView item_bg;        public ViewHolder(final View itemView) {            super(itemView);            item_bg = itemView.findViewById(R.id.item_bg);        }    }}
控制smoothScrollToPosition的滑动速度

参考RecyclerView调用smoothScrollToPosition() 控制滑动速度,修改MILLISECONDS_PER_INCH的值即可

/** * 更改RecyclerView滚动的速度 */public class ScollLinearLayoutManager extends LinearLayoutManager {    private float MILLISECONDS_PER_INCH = 25f;  //修改可以改变数据,越大速度越慢    private Context contxt;    public ScollLinearLayoutManager(Context context) {        super(context);        this.contxt = context;    }    @Override    public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {        LinearSmoothScroller linearSmoothScroller =                new LinearSmoothScroller(recyclerView.getContext()) {                    @Override                    public PointF computeScrollVectorForPosition(int targetPosition) {                        return ScollLinearLayoutManager.this                                .computeScrollVectorForPosition(targetPosition);                    }                    @Override                    protected float calculateSpeedPerPixel                            (DisplayMetrics displayMetrics) {                        return MILLISECONDS_PER_INCH / displayMetrics.density;                        //返回滑动一个pixel需要多少毫秒                    }                };        linearSmoothScroller.setTargetPosition(position);        startSmoothScroll(linearSmoothScroller);    }    //可以用来设置速度    public void setSpeedSlow(float x) {        //自己在这里用density去乘,希望不同分辨率设备上滑动速度相同        //0.3f是自己估摸的一个值,可以根据不同需求自己修改        MILLISECONDS_PER_INCH = contxt.getResources().getDisplayMetrics().density * 0.3f + (x);    }}
图片宽度充满屏幕、高度按图片原始宽高比例自适应
@SuppressLint("AppCompatCustomView")public class FitImageView extends ImageView {    public FitImageView(Context context) {        super(context);    }    public FitImageView(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){        Drawable drawable = getDrawable();        if(drawable!=null){            int width = MeasureSpec.getSize(widthMeasureSpec);            int height = (int) Math.ceil((float) width * (float) drawable.getIntrinsicHeight() / (float) drawable.getIntrinsicWidth());            setMeasuredDimension(width, height);        }else{            super.onMeasure(widthMeasureSpec, heightMeasureSpec);        }    }}

这里需要注意的是、Item的根布局  android:layout_height="wrap_content",否则图片高度会受限

    android:layout_width="match_parent"    android:layout_height="wrap_content">            android:id="@+id/item_bg"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:src="@mipmap/ww1" />    
使RecyclerView不能手指触碰滑动

加层View屏蔽掉事件就好了

    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">            android:id="@+id/mRecyclerView"        android:layout_width="match_parent"        android:layout_height="match_parent">            android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#80000000"        android:clickable="true" />            android:layout_width="wrap_content"        android:layout_height="80dp"        android:layout_marginTop="80dp"        app:layout_constraintTop_toTopOf="parent"        android:scaleType="centerInside"        android:src="@mipmap/slogan"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" />

 效果演示 

完成效果

54672636ff94d077e855ad9588f399f3.gif

上图怎么能不上种呢?源码,安装包如下,拿走不谢:

github:https://github.com/forvv231/EasyScollImage

apk:https://fir.im/gfdj

19019a252d8a032b3c90a2ffaa33d795.png

相关文章:

  • 读书能享受到时间的复利吗

  • Android官方推荐的安全组件:使用Jetpack Security为数据加密

  • 一行代码解决重复点击问题

今日问题:

今天的滚动效果学会没?

0a6a66b41944b6d592df164477b27f50.gif

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您下载了本程序,但是该程序存在问题无法运行,那么您可以选择退款或者寻求我们的帮助(如果找我们帮助的话,是需要追加额外费用的)。另外,您不会使用资的话(这种情况不支持退款),也可以找我们帮助(需要追加额外费用) springboot微服务机构,支持安卓、苹果、小程序、H5端多端适配。前端uniapp跨平台编译。 具备:图文、视频发布、文章、话题、圈子、问答、近、点赞、评论、关注、IM即时通讯、积分模块、头像挂件、VIP会员、消息推送通知、商城等模块 微信小程序是腾讯公司基于微信平台推出的一种轻量级应用形态,它无需用户下载安装即可在微信内直接使用。自2017年正式上线以来,小程序凭借其便捷性、易获取性和出色的用户体验迅速获得市场认可,并成为连接线上线下服务的重要桥梁。 小程序的核心特点包括: 零安装:用户只需通过微信扫一扫或搜索功能,即可打开和使用小程序,大大降低了用户的使用门槛和手机存储空间压力。 速度快:加载速度相较于传统的HTML5网页更快,依托于微信强大的基础设施,能够实现近乎原生应用的流畅体验。 跨平台兼容:开发者一次开发,即可在多种终端设备上运行,免除了复杂的适配工作,大大提高了开发效率。 社交属性强:小程序可以无缝嵌入微信生态,支持分享至聊天窗口、朋友圈等社交场景,有利于用户间的传播和裂变增。 丰富接口能力:提供丰富的API接口,可调用微信支付、位置服务、用户身份识别等多种功能,方便企业进行商业服务的集成与拓展。 目前,微信小程序已经覆盖了电商购物、生活服务、娱乐休闲、教育学习、工具助手等多个领域,为数以亿计的用户提供便捷的服务入口,也为众多商家和开发者提供了新的商业模式和创业机会。随着技术的不断升级和完善,小程序已成为现代移动互联网生态中不可或缺的一部分。
“小”——给你安利几个小程序的“坑”微信小程序写在前面  小程序发布至今已有一年多时间,很多人都已经在小程序道路上狂奔。最近我也开始了学习小程序,学了一段时间后,想看看这段时间的学习效果,于是边学习边开始了我的第一个小程序。相信很多人都用过小吧,我可是被它安利了很多好东西呢,所以想着就仿写一个小的微信小程序吧。下面我就给大家“安利”几个我在写的过程中的“坑”。  因为花的时间不多,功能有很多没有完善,页面写的不是很好看,请各位将就着看啦。╮(╯▽╰)╭   准备工作  1. 开发环境:WXML(HTML),WXSS(CSS),Javascript  2. 开发工具:vscode,微信开发者工具  3. 辅助工具:Markman:图标标注工具,可用于取色、测量。Easy-Mock:可以伪造假数据,在js中引用就好了。点这里可以查看我的项目数据。Markdown:在线编辑器GifCam:Gif录制工具 微信小程序开发文档Iconfont-阿里巴巴矢量图标库:各种需要的小图标都有哦遇到的几个问题1、首页导航栏左右滑动效果图:  这部分,是通过微信小程序的scroll-view组件来完成的。代码如下:<scroll-view class="navBar-box" scroll-x="true"  一些使用scroll-view的注意事项:请勿在 scroll-view 中使用 textarea、map、canvas、video 组件scroll-into-view 的优先级高于 scroll-top在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部2、首页文章列表随着点击导航栏列表改变效果图:  这部分,是通过微信小程序的swiper组件来完成的。代码如下:                                                                                                    {{notes.title}}                              <!-- 作者信息 -->                                              {{notes.writer}}                                                {{notes.like}}                                    使用swiper组件,将所有文章列表包起来,每个swiper-item表示不同的列表模块。之前在导航栏各列表项绑定了不同

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值