html中图片自动循环滚动代码,实现长图片自动循环滚动效果[通俗易懂]

html中图片自动循环滚动代码,实现长图片自动循环滚动效果[通俗易懂]实现思路滚动效果用实现。有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示。每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效果,然后再改变滚动的速度,就可以了。{;@(){(savedInstanceState);//全屏getWindow().setFlags(WindowManager.LayoutParams.FLAG…

大家好,又见面了,我是你们的朋友全栈君。

21105e3a5d690580173714a784fee100.jpg

实现思路

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

{;@(){(savedInstanceState);//全屏getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.activity_main);mRecyclerView=findViewById(R.id.mRecyclerView);mRecyclerView.setAdapter(newSplashAdapter(MainActivity.this));mRecyclerView.setLayoutManager(newScollLinearLayoutManager(MainActivity.this));//smoothScrollToPosition滚动到某个位置(有滚动效果)mRecyclerView.smoothScrollToPosition(Integer.MAX_VALUE/2);}}

1.无限循环

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

publicclassSplashAdapterextendsRecyclerView.AdapterSplashAdapter.ViewHolder{privateintimgWidth;publicSplashAdapter(Contextcontext){imgWidth=EasyUtil.getScreenWidth(context);}@OverridepublicViewHolderonCreateViewHolder(ViewGroupparent,intviewType){ViewitemView=LayoutInflater.from(parent.getContext()).inflate(R.layout.item_splash,parent,false);returnnewViewHolder(itemView);}@OverridepublicvoidonBindViewHolder(finalViewHolderholder,finalintposition){/*ViewGroup.LayoutParamslp=holder.item_bg.getLayoutParams();lp.width=imgWidth;lp.height=imgWidth*5;holder.item_bg.setLayoutParams(lp);*/}@OverridepublicintgetItemCount(){returnInteger.MAX_VALUE;}publicclassViewHolderextendsRecyclerView.ViewHolder{ImageViewitem_bg;publicViewHolder(finalViewitemView){super(itemView);item_bg=itemView.findViewById(R.id.item_bg);}}}

2.控制smoothScrollToPosition的滑动速度

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

/***更改RecyclerView滚动的速度*/publicclassScollLinearLayoutManagerextendsLinearLayoutManager{privatefloatMILLISECONDS_PER_INCH=25f;//修改可以改变数据,越大速度越慢privateContextcontxt;publicScollLinearLayoutManager(Contextcontext){super(context);this.contxt=context;}@OverridepublicvoidsmoothScrollToPosition(RecyclerViewrecyclerView,RecyclerView.Statestate,intposition){LinearSmoothScrollerlinearSmoothScroller=newLinearSmoothScroller(recyclerView.getContext()){@OverridepublicPointFcomputeScrollVectorForPosition(inttargetPosition){returnScollLinearLayoutManager.this.computeScrollVectorForPosition(targetPosition);}@OverrideprotectedfloatcalculateSpeedPerPixel(DisplayMetricsdisplayMetrics){returnMILLISECONDS_PER_INCH/displayMetrics.density;//返回滑动一个pixel需要多少毫秒}};linearSmoothScroller.setTargetPosition(position);startSmoothScroll(linearSmoothScroller);}//可以用来设置速度publicvoidsetSpeedSlow(floatx){//自己在这里用density去乘,希望不同分辨率设备上滑动速度相同//0.3f是自己估摸的一个值,可以根据不同需求自己修改MILLISECONDS_PER_INCH=contxt.getResources().getDisplayMetrics().density*0.3f+(x);}}

3.图片宽度充满屏幕、高度按图片原始宽高比例自适应

@SuppressLint(“AppCompatCustomView”)publicclassFitImageViewextendsImageView{publicFitImageView(Contextcontext){super(context);}publicFitImageView(Contextcontext,AttributeSetattrs){super(context,attrs);}@OverrideprotectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){Drawabledrawable=getDrawable();if(drawable!=null){intwidth=MeasureSpec.getSize(widthMeasureSpec);intheight=(int)Math.ceil((float)width*(float)drawable.getIntrinsicHeight()/(float)drawable.getIntrinsicWidth());setMeasuredDimension(width,height);}else{super.onMeasure(widthMeasureSpec,heightMeasureSpec);}}}

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

android.support.constraint.ConstraintLayoutxmlns:android=”http://schemas.android.com/apk/res/android”android:layout_width=”match_parent”android:layout_height=”wrap_content”com.next.scrollimagedemo.view.FitImageViewandroid:id=”@+id/item_bg”android:layout_width=”match_parent”android:layout_height=”wrap_content”android:src=”@mipmap/ww1″/!–ImageViewandroid:id=”@+id/item_bg”android:layout_width=”match_parent”android:layout_height=”wrap_content”android:src=”@mipmap/ww2″android:scaleType=”centerCrop”/–/android.support.constraint.ConstraintLayout

5.使RecyclerView不能手指触碰滑动

加层View屏蔽掉事件就好了

android.support.constraint.ConstraintLayoutxmlns:android=”http://schemas.android.com/apk/res/android”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.support.v7.widget.RecyclerViewandroid:id=”@+id/mRecyclerView”android:layout_width=”match_parent”android:layout_height=”match_parent”/android.support.v7.widget.RecyclerViewTextViewandroid:layout_width=”match_parent”android:layout_height=”match_parent”android:background=”#80000000″android:clickable=”true”/ImageViewandroid: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”//android.support.constraint.ConstraintLayout

完成效果

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161306.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号