【Android】RecycleView简单仿漫画APP图片相关样式

news/2024/11/2 8:22:51/

真的真的想不到起什么标题好了，这次的内容真的是太简单了，没有什么挑战性，一天以内就完成了。最近在学kotlin，也会有一份kotlin的代码，鉴于很多人都是从java开始进行android开发的，kotlin的代码就不做一一详解，代码与java的版本放在了同一个压缩包里面

完成后的效果分别有：
在这里插入图片描述
用到的框架：

implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'implementation 'io.github.youth5201314:banner:2.2.2'

所需权限：

<uses-permission android:name="android.permission.INTERNET"/>

加载多张图片通用的xml文件（Banner效果除外）

<androidx.constraintlayout.widget.ConstraintLayout xmlns: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=".LoadMultipleImagesActivity"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/images"android:layout_width="match_parent"android:layout_height="match_parent"/></androidx.constraintlayout.widget.ConstraintLayout>

线性垂直（仿阅读漫画中的图片样式）

实现线性垂直的方式目前能想到的有两种，一是使用ListView，另一种是使用RecycleView。

ListView的优化没有RecycleView做的好，RecycleView可自定义的样式更加的丰富、更加的美观，性能优化较ListView好许多，这里也只讲RecycleView的实现方式。

为RecycleView设置LayoutManager与Adapter：

// inflate.images是一个RecycleView控件
inflate.images.setLayoutManager(new LinearLayoutManager(this));
// ImagesAdapter自定义继承自RecyclerView.Adapter的一个类
inflate.images.setAdapter(new ImagesAdapter(this,DataUtils.getInstance().getList());

自定义xml样式：

<ImageView android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/itemImage"xmlns:android="http://schemas.android.com/apk/res/android" />

在onCreateViewHolder绑定一个自定义好的布局，在onBindViewHolder输入一行代码即可完成

Glide.with(context).asBitmap().load(list.get(position)).into(holder.imageView);

实现效果：
在这里插入图片描述

有人可能会觉得这个压根不是漫画APP的效果，可能会觉得人家的APP阅读漫画的图片样式用的都是加载长图的，如果你这样想，你就错了，你中了人家的障眼法了，先看人家效果图：
在这里插入图片描述

这样滑下去看，图片是一连串的，没错吧？

其实它也可以由多图组成，不一定非得长图、大图，连续多张图片也是可以在组成这种效果，如下图，只要让一张图片底部的颜色与下一张图片顶部颜色都是同一种颜色，就可以实现所谓的“无缝衔接”。
在这里插入图片描述

线性垂直（仿漫画列表介绍样式）

线性垂直样式，也可使用ListView实现，但效果相对RecycleView来说有点差距，我们还是继续用RecycleView来实现。

实现的方式和线性垂直（仿阅读漫画中的图片样式）基本一致

为RecycleView设置LayoutManager与Adapter：

inflate.images.setLayoutManager(new LinearLayoutManager(this));
inflate.images.setAdapter(new ImagesAdapter(this,DataUtils.getInstance().getListBean());

自定义xml样式：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"xmlns:app="http://schemas.android.com/apk/res-auto"><ImageViewandroid:id="@+id/itemImage"android:layout_width="100dp"android:layout_height="150dp"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"android:layout_margin="12dp"/><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="12dp"android:textColor="@color/black"android:textSize="16sp"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toRightOf="@+id/itemImage"/><TextViewandroid:id="@+id/introduction"android:layout_width="0dp"android:layout_height="0dp"android:layout_margin="12dp"android:textSize="14sp"app:layout_constraintLeft_toRightOf="@+id/itemImage"app:layout_constraintTop_toBottomOf="@+id/name"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toBottomOf="parent"/></androidx.constraintlayout.widget.ConstraintLayout>

在ImagesAdapter的onCreateViewHolder绑定自定义xml布局后，将它展示出来

// RequestOptions.bitmapTransform(new RoundedCorners(10))：设置图片圆角样式
Glide.with(context).asBitmap().load(dataBeans.get(position).uri).apply(RequestOptions.bitmapTransform(new RoundedCorners(10))).into(holder.imageView);
holder.name.setText(dataBeans.get(position).name);
holder.introduction.setText(dataBeans.get(position).introduction);

实现效果：

在这里插入图片描述

线性水平（可往左拉的漫画列表）

前面两个线性垂直，可以使用ListView与RecycleView进行布局，但水平方向滑动的效果ListView就无法实现了，也只能用RecycleView。

为RecycleView设置LayoutManager与Adapter：

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
// 设置方向
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
inflate.images.setLayoutManager(linearLayoutManager);
inflate.images.setAdapter(new ImagesAdapter(this,DataUtils.getInstance().getListBean()));

LinearLayoutManager默认的方向是VERTICAL（垂直），需要用setOrientation方法修改它的方向。

自定义xml样式：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="100dp"android:layout_height="wrap_content"android:orientation="vertical"android:id="@+id/ll"android:layout_marginTop="8dp"android:layout_marginRight="8dp"xmlns:android="http://schemas.android.com/apk/res/android" ><ImageView android:layout_width="match_parent"android:layout_height="150dp"android:id="@+id/itemImage"xmlns:android="http://schemas.android.com/apk/res/android" /><TextViewandroid:id="@+id/name"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:textColor="@color/black"android:paddingTop="3dp"/></LinearLayout>

在onCreateViewHolder绑定自定义的布局，在onBindViewHolder输入两行代码即可完成

Glide.with(context).asBitmap().load(dataBeans.get(position).uri).apply(RequestOptions.bitmapTransform(new RoundedCorners(10))).into(holder.imageView);
holder.name.setText(dataBeans.get(position).name);

实现效果：
在这里插入图片描述

网格（仿个人书架、收藏）

网格样式，与上面三种的最主要的区别便是setLayoutManager的Manager不同，网格用的是网格样式专用的GridLayoutManager，该方法需要传的参数是Context与一行的个数占比。

为RecycleView设置LayoutManager与Adapter：

inflate.images.setLayoutManager(new GridLayoutManager(this,3));
inflate.images.setAdapter(new ImagesAdapter(this,DataUtils.getInstance().getListBean()));

自定义xml样式：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="100dp"android:layout_height="wrap_content"android:orientation="vertical"android:id="@+id/ll"android:layout_marginTop="8dp"xmlns:android="http://schemas.android.com/apk/res/android" ><ImageView android:layout_width="match_parent"android:layout_height="150dp"android:id="@+id/itemImage"/><TextViewandroid:id="@+id/name"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:textColor="@color/black"android:paddingTop="3dp"/></LinearLayout>

在ImagesAdapter的onCreateViewHolder绑定自定义xml布局后，将它展示出来

Glide.with(context).asBitmap().load(dataBeans.get(position).uri).apply(RequestOptions.bitmapTransform(new RoundedCorners(10))).into(holder.imageView);
holder.name.setText(dataBeans.get(position).name);

实现效果：
在这里插入图片描述
GridLayoutManager与LinearLayoutManager一样，也可以设置水平方向或垂直方向，默认方向同样是VERTICAL（垂直）

inflate.images.setLayoutManager(new GridLayoutManager(this,4,GridLayoutManager.HORIZONTAL,false));

水平方向效果（设置padding或margin后效果会好点）：
在这里插入图片描述

瀑布流（仿个人书架、收藏、商城）

瀑布流样式，失效的效果目前在商城看见的较多，但是也不妨碍漫画APP引入瀑布流。

为RecycleView设置LayoutManager与Adapter：

inflate.images.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
inflate.images.setAdapter(new ImagesAdapter(this,DataUtils.getInstance().getListBean(),3));

xml代码与网格的xml一样，不重复贴。

在ImagesAdapter的onCreateViewHolder绑定自定义xml布局后，将它展示出来，需要注意的一点就是瀑布流的效果不是说你用setLayoutManager设置了StaggeredGridLayoutManager效果就是瀑布流，瀑布流的样式是需要修改item的高度，高度不同，才能展现其效果。

if (position % 2 == 0) {ViewGroup.LayoutParams layoutParams = holder.imageView.getLayoutParams();layoutParams.height = 400;holder.imageView.setLayoutParams(layoutParams);
}
Glide.with(context).asBitmap().load(dataBeans.get(position).uri).apply(RequestOptions.bitmapTransform(new RoundedCorners(10))).into(holder.imageView);
holder.name.setText(dataBeans.get(position).name);

实现效果：
在这里插入图片描述

Banner（仿阅读漫画自动切换）

Banner效果的实现，靠的是人家的框架，xml的文件自然也和以上几种不一样。

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".LoadBannerActivity"><com.youth.banner.Bannerxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/banner"android:layout_width="match_parent"android:layout_height="500dp"tools:ignore="MissingConstraints"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"/></androidx.constraintlayout.widget.ConstraintLayout>

代码逻辑并不复杂，同样是使用setAdapter设置一个适配器

inflate.banner.setAdapter(new ImageAdapter(DataUtils.getInstance().getListBean()));

ImageAdapter与上面的Adapter并不是同一个，这个Adapter继承自BannerAdapter

class ImageAdapter extends BannerAdapter<DataBean, ImageAdapter.BannerViewHolder> {public ImageAdapter(List<DataBean> mDatas) {//设置数据，也可以调用banner提供的方法,或者自己在adapter中实现super(mDatas);}//创建ViewHolder，可以用viewType这个字段来区分不同的ViewHolder@Overridepublic BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {ImageView imageView = new ImageView(parent.getContext());//注意，必须设置为match_parent，这个是viewpager2强制要求的ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);imageView.setLayoutParams(layoutParams);imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);return new BannerViewHolder(imageView);}@Overridepublic void onBindView(BannerViewHolder holder, DataBean data, int position, int size) {Glide.with(LoadBannerActivity.this).asBitmap().load(data.uri).apply(RequestOptions.bitmapTransform(new RoundedCorners(10))).into(holder.imageView);}class BannerViewHolder extends RecyclerView.ViewHolder {ImageView imageView;public BannerViewHolder(@NonNull ImageView view) {super(view);this.imageView = view;}}
}

实现效果：
在这里插入图片描述
默认切换图片的时间是两秒左右，可设置指定时间切换下一张图片需要添加setDelayTime或setLoopTime方法，具体是哪一个方法请根据自己所导入的版本新旧选择。

代码链接：RecycleView简单仿漫画APP图片相关样式

注意：
1、本文的控件使用了ViewBinding，没掌握这一知识点的同学可以先了解一下这一知识点，当你会用的时候你会发现：原来绑定控件可以这么简单。
2、本文图片来自网络，如有侵权请联系删除。


http://www.ppmy.cn/news/221923.html

相关文章

html钢琴谱播放器,iPad版五线谱播放器《钢琴谱大全》评测

html钢琴谱播放器,iPad版五线谱播放器《钢琴谱大全》评测

【IT168 评测】钢琴谱大全是由蛐蛐钢琴网开发的一款集五线谱浏览，有声播放，互动播放于一体的五线谱浏览器，自2012年5月4日问世以来，快速受到广大爱好者的追捧，截止发稿，钢琴谱大全，已经荣登苹果中国区免费排行top10，音乐排行top1，以惊人的成绩展示了这款五线谱播放器的…
阅读更多...
Python制作音乐播放器

Python制作音乐播放器

Python用tkinter库制作一个音乐播放器&#xff0c;自定义一个自己想要的播放器。虽然明天其他的播放器强大&#xff0c;如某易云&#xff0c;某狗。但是也是一个好玩的小插件。 1.制作需求 首先要会一点tkinter库的基础使用方法&#xff0c;当然其他gui库也行&#xff01;这里只…
阅读更多...
百度视频播放器android,百度视频播放器

百度视频播放器android,百度视频播放器

《百度视屏播放器》是一款人气很高的视频播放软件&#xff0c;里面有大量的正版最新视频、电视剧、电影等着你来观看&#xff0c;还等什么&#xff0c;快来下载观看你最喜欢的电影电视剧吧&#xff01; 官方介绍 满足你对视频app的所有期待!汇聚所有视频网站最全的高清影视、明…
阅读更多...
android视频播放器报告,android视频播放器实训报告.doc

android视频播放器报告,android视频播放器实训报告.doc

实训报告书 实训名称&#xff1a; Android视频播放器 系 (部)&#xff1a; 专业班级&#xff1a; 学生姓名&#xff1a; 学 号&#xff1a; 指导教师&#xff1a; 完成日期&#xff1a; 实训课题Android视频播放器实训人姓名 同组人员实训日期 实训成绩指导教师评语 指导教师签…
阅读更多...
漫画播放器一吐槽功能

漫画播放器一吐槽功能

前言 近来有些莫名的浮躁&#xff0c;浮躁的心态总让我静不下心来学习。新的一篇的文章到现在才跟大家见面&#xff0c;非常欣慰一直关注我的小伙伴&#xff0c;有你们的陪伴&#xff0c;一路不孤单。 Google IO大会&#xff0c;谷歌宣布&#xff0c;将Kotlin语言作为安卓开发…
阅读更多...
免费影视综艺动漫的手机APP（支持双端）

免费影视综艺动漫的手机APP（支持双端）

元芳影视&#xff08;yfys.app&#xff09;的所有剧集都是全免费的&#xff0c;是一款非常好用的影视神器&#xff0c;所有的影视都拥有超清资源免费看&#xff0c;软件的界面十分简约好看。下载安装后&#xff0c;免注册直接登录&#xff0c;很好地保护你的隐私问题&#xff0…
阅读更多...
第四章 Electron|Node 使用SQLite3数据库

第四章 Electron|Node 使用SQLite3数据库

一、SQLite是什么 &#x1f447; &#x1f447; &#x1f447; SQLite是一种嵌入式关系型数据库管理系统&#xff0c;是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎。SQLite是一个轻量级的数据库&#xff0c;可以在各种操作系统上使用&#xff0c;并且支持SQL…
阅读更多...
11 Redis大厂真实需求落地案例实战

11 Redis大厂真实需求落地案例实战

案例实战&#xff1a;微信抢红包 需求分析 各种节假日&#xff0c;发红包抢红包&#xff0c;不说了&#xff0c;100%高并发业务要求&#xff0c;不能用mysql来做一个总的大红包&#xff0c;会有可能拆分成多个小红包&#xff0c;总金额 分金额1分金额2分金额3…分金额N每个人…
阅读更多...
最新文章

Copyright @ 2022~2023