iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >recycleview实现拼多多首页水平滑动效果
  • 332
分享到

recycleview实现拼多多首页水平滑动效果

2024-04-02 19:04:59 332人浏览 八月长安
摘要

本文实例为大家分享了recycleview实现拼多多首页水平滑动效果的具体代码,供大家参考,具体内容如下 1.说明  本例子模仿拼多多首页的水平菜单,原本计划用viewpa

本文实例为大家分享了recycleview实现拼多多首页水平滑动效果的具体代码,供大家参考,具体内容如下

1.说明  本例子模仿拼多多首页的水平菜单,原本计划用viewpager实现,但是太麻烦,不合适,尝试用recycleview实现,亲测可运行,自定义支持各种样式效果,高度扩展

2.效果图:

3.下载地址

4.首页 贴一下核心代码  需要源码的请自行下载



 
package com.example.mepositry;
 
import Android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.RelativeLayout;
 
 
import java.util.ArrayList;
import java.util.List;
 
public class TwoActivity extends AppCompatActivity implements PagerGridLayoutManager
        .PageListener {
 
    private int mRows = 2;  //设置行数
    private int mColumns = 4;  //设置列数
    private RecyclerView mRecyclerView;
    private MyAdapter2 mAdapter;
    private PagerGridLayoutManager mLayoutManager;
    private RelativeLayout lineParent;
    private int mTotal = 0;
    private int mCurrent = 0;
    private View lineChild;
    private String[] names = {"多多果园","九块九特卖","多多爱消除","天天领现金"
            ,"行家帮你选","限时秒杀","断码清仓","跟着好评买"
            ,"充值中心","医药馆","签到","多多赚大钱"
            ,"砍价免费拿","多多精灵","省钱月卡","现金大转盘"
    };
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
        lineParent = findViewById(R.id.rl_line_parent);
        lineChild = findViewById(R.id.view_line_child);
        mLayoutManager = new PagerGridLayoutManager(mRows, mColumns, PagerGridLayoutManager
                .HORIZONTAL);
        // 系统带的 RecyclerView,无需自定义
        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        // 水平分页布局管理器
        mLayoutManager.setPageListener(this);    // 设置页面变化监听器
        mRecyclerView.setLayoutManager(mLayoutManager);
        // 如果需要查看调试日志可以设置为true,一般情况忽略即可
        PagerConfig.setShowLog(true);
        initData();
 
    }
 
    private void initData() {
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 16; i++) {
            list.add(names[i]);
        }
        //   mAdapter.refreshDataList(list);
        // 使用原生的 Adapter 即可
        mAdapter = new MyAdapter2(TwoActivity.this, list);
        mRecyclerView.setAdapter(mAdapter);
    }
 
    @Override
    public void onPageSizeChanged(int pageSize) {
        mTotal = pageSize;
        Log.e("TAG", "总页数 = " + pageSize);
    }
 
    @Override
    public void onPageSelect(int pageIndex, int pageSize) {
        mCurrent = pageIndex;
        Log.e("TAG", "选中页码 = " + pageIndex + "\t" + pageSize);
        //计算滚动条宽度
        float proportion = (float) ((pageIndex + 1) / pageSize);
        float transMaxRange = lineParent.getWidth() - lineChild.getWidth();
        //设置滚动条移动
        lineChild.setTranslationX(transMaxRange * proportion);
    }
}

5.适配器



 
package com.example.mepositry;
 
 
import android.annotation.SuppressLint;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import java.util.ArrayList;
import java.util.List;
 
public class MyAdapter2 extends RecyclerView.Adapter<BaseRecyclerViewHolder> {
    private List<String> mDataList = new ArrayList<>();
    private Context context;
 
    public MyAdapter2(Context mContext, List<String> list) {
        this.context=mContext;
        this.mDataList = list;
    }
 
 
    @Override
    public BaseRecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.layout_item2, parent, false);
        return new BaseRecyclerViewHolder(view);
    }
 
    @SuppressLint("SetTextI18n")
    @Override
    public void onBindViewHolder(BaseRecyclerViewHolder holder, final int position) {
        TextView name = holder.findBindItemView(R.id.tv_title);
        name.setText("id:"+position+mDataList.get(position));
        //抽象方法
        name.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.e("TAG", "holder.itemView:" + position);
            }
        });
    }
 
    @Override
    public int getItemCount() {
        return mDataList.size();
    }
 

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: recycleview实现拼多多首页水平滑动效果

本文链接: https://www.lsjlt.com/news/126869.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • recycleview实现拼多多首页水平滑动效果
    本文实例为大家分享了recycleview实现拼多多首页水平滑动效果的具体代码,供大家参考,具体内容如下 1.说明  本例子模仿拼多多首页的水平菜单,原本计划用viewpa...
    99+
    2024-04-02
  • recycleview如何实现拼多多首页水平滑动效果
    这篇文章给大家分享的是有关recycleview如何实现拼多多首页水平滑动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。本文实例为大家分享了recycleview实现拼多多首页水平滑动效果的具体代码,供大家参...
    99+
    2023-06-15
  • NestScrollView嵌套RecyclerView实现淘宝首页滑动效果
    目录一.概述二.开搞三.处理嵌套滑动四.实现惯性滑动一.概述 本文主要实现淘宝首页嵌套滑动,中间tab吸顶效果,以及介绍NestScrollView嵌套RecyclerView处理滑...
    99+
    2024-04-02
  • Android实现平滑翻动效果
    本文实例为大家分享了Android实现平滑翻动效果的具体代码,供大家参考,具体内容如下 效果 1.activity加implements implements GestureD...
    99+
    2024-04-02
  • 如何使用CSS实现网页平滑滚动效果
    如何使用CSS实现网页平滑滚动效果在现代网页设计中,实现平滑滚动效果可以为用户带来更好的视觉体验。通过CSS的一些属性和技巧,我们可以轻松地实现平滑滚动效果。本文将介绍如何使用CSS来实现网页的平滑滚动,并附有具体的代码示例。一、使用scr...
    99+
    2023-10-26
    CSS 平滑滚动 网页
  • CSS3如何使用column多栏布局实现水平滑页翻页交互
    这篇文章将为大家详细讲解有关CSS3如何使用column多栏布局实现水平滑页翻页交互,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、CSS3 column多栏布局CSS...
    99+
    2024-04-02
  • Android如何实现平滑翻动效果
    这篇文章给大家分享的是有关Android如何实现平滑翻动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下效果activity加implementsimplements GestureDet...
    99+
    2023-06-14
  • 如何用CSS实现平滑滚动效果
    如何用CSS实现平滑滚动效果在网页设计与开发中,滚动效果是一种非常常见且炫酷的效果,能够为用户带来更好的体验。而实现平滑滚动效果,可以通过CSS的一些技巧来实现。本文将介绍如何使用CSS来实现平滑滚动效果,并提供具体的代码示例。一、使用锚点...
    99+
    2023-11-21
    平滑 CSS 滚动效果
  • 如何通过纯CSS实现网页的平滑滚动效果
    在网页设计中,平滑滚动效果可以为用户提供良好的浏览体验,使页面切换更加流畅。而在纯CSS中实现平滑滚动效果可以避免使用JavaScript,进一步优化页面加载速度和性能。本文将详细介绍如何使用纯CSS实现网页的平滑滚动效果,并提供具体的代码...
    99+
    2023-10-21
    平滑滚动 纯CSS 网页效果
  • Vue实现首页banner自动轮播效果
    本文实例为大家分享了Vue实现首页banner自动轮播的具体代码,供大家参考,具体内容如下 效果如图:  ①创建Banner.vue组件,需传入banner数组,可设置轮...
    99+
    2024-04-02
  • vue/js实现页面自动往上滑动效果
    本文实例为大家分享了vue/js实现页面自动往上滑动的具体代码,供大家参考,具体内容如下 最近做的新项目中要求让看不见的内容自动往上滑动一定的距离,使之可以看到,下面我来分享一下。 ...
    99+
    2024-04-02
  • 如何通过纯CSS实现网页的平滑滚动背景效果
    如何通过纯CSS实现网页的平滑滚动背景效果背景是网页设计中非常重要的一部分,可以增强页面的视觉效果和用户体验。传统的网页背景通常是静态的,但是通过使用纯CSS技术,我们可以实现一种平滑滚动背景效果,从而为网页添加更加动感和生动的视觉效果。在...
    99+
    2023-10-24
    平滑 滚动 纯CSS 背景效果
  • 如何运用CSS Positions布局实现网页的平滑滚动效果
    随着网络技术的不断进步,网页设计变得越来越注重用户体验。平滑滚动效果是提升用户滑动体验的一种方法。通过使用CSS Positions布局,我们可以实现网页的平滑滚动效果。CSS Positions布局是指通过CSS定位属性将元素放置在指定的...
    99+
    2023-10-21
    布局实现 CSS Positions 平滑滚动效果
  • CSS属性实现平滑滚动效果的技巧
    CSS属性实现平滑滚动效果的技巧在网页设计中,滚动效果被广泛应用于菜单导航、页面到顶部和底部的平滑滚动等方面,使用户体验更加流畅和舒适。本文将介绍一些常用的CSS属性和代码示例,帮助你实现平滑滚动效果。一、通过CSS属性scroll-beh...
    99+
    2023-11-18
    平滑滚动 技巧 CSS属性
  • 如何通过纯CSS实现网页的平滑滚动背景图效果
    在现代网页设计中,背景图的运用可以为网页增添更多的美感和活力。而通过CSS实现平滑滚动背景图效果,则可以使整个页面更加流畅和吸引人。本文将详细介绍如何通过纯CSS实现这一效果,并提供具体的代码示例。首先,我们需要准备一张背景图,并将其添加到...
    99+
    2023-10-21
    平滑滚动 纯CSS 背景图效果
  • html5中如何使用requestAnimationFrame实现平滑滚动效果
    这篇文章将为大家详细讲解有关html5中如何使用requestAnimationFrame实现平滑滚动效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用request...
    99+
    2024-04-02
  • 使用AmazeUI怎么实现一个平滑滚动效果
    这篇文章给大家介绍使用AmazeUI怎么实现一个平滑滚动效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。具体代码如下所示:<!doctype html><html class=&...
    99+
    2023-06-09
  • html5中如何使用CSS实现平滑滚动效果
    这篇文章将为大家详细讲解有关html5中如何使用CSS实现平滑滚动效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用CSS完成功能的最高境界,只用CSS就搞定。代码如...
    99+
    2024-04-02
  • 如何通过纯CSS实现网页的平滑滚动背景渐变效果
    如何通过纯CSS实现网页的平滑滚动背景渐变效果一、引言在网页设计中,背景渐变效果可以为网站增加美感和动态感。而平滑滚动背景渐变则可以使网页更加吸引人,给用户带来舒适的浏览体验。本文将介绍如何通过纯CSS实现网页的平滑滚动背景渐变效果,并提供...
    99+
    2023-10-25
    CSS 平滑滚动 背景渐变
  • 如何通过纯CSS实现网页的平滑滚动背景镂空效果
    随着互联网技术的不断发展,网页的设计也日趋多样化和复杂化。一个好看的网页,往往需要注重细节和创新。其中,平滑滚动背景镂空效果是近年来越来越受欢迎的设计元素之一。这种效果可以使网页看起来更加生动、有趣,并且能够引起用户的注意和兴趣。在本文中,...
    99+
    2023-10-21
    CSS 平滑滚动 镂空效果
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作