【RecyclerView与Glide】实现一个Android电子书阅读APP
http://www.cnblogs.com/xfangs/
欢迎在本文下方评论,小方很需要鼓励支持!!!
本系列教程仅供学习交流
前言
在上一篇文章中,我们实现了ViewPager的基本功能,按照计划,制作咱们的电子书阅读app需要使用ViewPager插入两页视图,一个用来显示当前书架,一个用来展示不同的分类。这一节,我们将在被标记为find的页面上实现分类选项。
涉及组件或框架:RecyclerView、Glide
首先·布局
同样的,在这里,小方因为水平有限只能简单介绍RecyclerView的基本使用方法,涉及到更深奥的操作部分,就无能为力了。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView
android:id="@+id/recyler_view_find_book"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/> </LinearLayout>
没有复杂的步骤,我们只需要把RecyclerView加入到之前ViewPager的两个布局之一中,就完成了整个列表布局。
当然,你也许会遇到一些意外。
这是说明我们还没有引入RecyclerView这个库,进入Design界面,从左边的组件中找到RecyclerView,单击,将会弹出选择框。
在加入了库之后,我们就能看到RecyclerView正确无误的显示在界面上了。
适配器
这次我们工作的主战场在上一节提到的Fragment,也就是ViewPager的两个页面之一。
回顾一下代码。
public static class FindBooksFragment extends Fragment { public FindBooksFragment() {
} @Override
public View onCreateView(final LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.pager_book_find, container, false); return rootView;
} }
之前说了,ViewPager会在创建这个页面的时候调用onCreateView这个函数,所以我们在这里进行初始化操作。
在这之前,我们需要先完成RecyclerView的适配器,同样的,这里适配器起到将数据和页面结合到一起的作用,具体地说,假设一个列表中的项目可以分为三类,我们就为这三类元素分别设计布局,然后将每一项的数据传给适配器,适配器可以根据数据选择对应的布局,然后把每一项显示出来。
首先,新建一个类。
关于RecyclerView的适配器,网络上已经有很多博客描述了, 随意找一篇看的过去的文章,先大体了解一下。
。。。搜索时间。。。
了解过后,我们知道需要为列表项写布局,这在前面也间接提到了。
那么,新建一个布局文件
book_find_item.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/bookFind_cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"> <ImageView
android:id="@+id/bookFind_image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
tools:src="@color/cardview_dark_background"/> <TextView
android:id="@+id/bookFind_class"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:textColor="#FFFFFF"
android:textStyle="normal|bold"
android:textSize="14sp"
android:gravity="center"
tools:text="123"/> </android.support.v7.widget.CardView>
在这里,我们又使用了一个新的组件,CardView,它体现了安卓最新设计风格,恰到好处的圆角、逼真的阴影、点击特效、等等,有多种属性可供调整。
尤其要说的是上面代码中加粗的字体,一个新的命名空间 tools ,在使用它之前,我们首先要在最外层的部件上声明。
只要打出前面几个字母,android studio 就会自动补全好。
tools 命名空间提供了测试的效果,以他为名号的属性在程序运行期间是被忽略的,只供测试预览使用,使得开发更加方便了。下图就是我们预览时得到的效果,
当程序运行起来时, 还会是如图所示的样子吗?
(必然不是)
制作好了布局文件,我们就可以开始对适配器进行编写了。
首先制作一个接口,用来获取点击事件。
private OnItemClickListener listener; public void setOnItemClickListener(OnItemClickListener listener) {
this.listener = listener;
} public interface OnItemClickListener {
void onItemClick(View view, int position);
void onItemLongClick(View view, int position);
}
然后在适配器的类中再新建一个类。
static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener, View.OnLongClickListener {
View tocView;
private TextView textview_bookFindClass;
private ImageView imageView;
private OnItemClickListener listener; public ViewHolder(View itemView, OnItemClickListener l) {
super(itemView);
tocView = itemView;
textview_bookFindClass = (TextView) itemView.findViewById(R.id.bookFind_class);
imageView = (ImageView) itemView.findViewById(R.id.bookFind_image);
listener = l;
itemView.setOnClickListener(this);
itemView.setOnLongClickListener(this);
} @Override
public void onClick(View v) {
if (listener != null) {
listener.onItemClick(v, getAdapterPosition());
}
} @Override
public boolean onLongClick(View v) {
if (listener != null) {
listener.onItemLongClick(v, getAdapterPosition());
}
return false;
}
}
可能略显复杂,这个类的作用是缓存列表项,具体比较低层的东西小方就不太清楚了,上网搜了搜,就不现学现卖了,欢迎有兴趣的同学一起讨论。
ViewHolder 类继承自 RecyclerView.ViewHolder,为了实现点击监听,还要接入两个接口,一个是单击的接口,一个是长按的接口。
从构造函数开始一点一点理解,构造函数接收两个参数,一个是每一项的View,一个是每一项的点击监听器。初始化组件之后,设置监听器,按照之前设置的接口的设定,将View和位置传给借口。
如果还不是很清楚,那么先将代码复制过去,使用次数多了,自然就理解了。
然后,在AdapterBookFind这个类中,完成它的构造函数,这里是根据需要自行设定的,在这里我们需要将分类名称传给适配器,显示在每一项上,所以传送了一个字符串列表。你也可以根据自己的需要传送想要传送的数据。
private ArrayList<String> myCategory; public AdapterBookFind(ArrayList<String> category) {
this.myCategory = category;
}
下面我们需要重写一个函数,用来获取一个ViewHolder的实例。
private Context context;
@Override
public ViewHolder onCreateViewHolder(final ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.book_find_item, parent, false);
context = parent.getContext();
final ViewHolder holder = new ViewHolder(view, listener); return holder;
}
在这里,我们又声明了一个叫做context的变量,并初始化,具体作用后面再表。
@Override
public int getItemCount() {
return myCategory.size();
}
类似ViewPager的适配器一样,我们同样需要重写取数目的函数,根据数据返回一个值。
马上就到最后一步了,我们将要对列表的每一项设置不同的内容。
@Override
public void onBindViewHolder(final ViewHolder holder, int position) {
holder.textview_bookFindClass.setText(myCategory.get(position));
switch (position) {
case 0:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
case 1:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
case 2:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
case 3:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
case 4:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
case 5:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
case 6:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
case 7:
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
break;
default: break;
}
holder.imageView.setColorFilter(Color.parseColor("#55555555")); }
因为我们的布局文件中只有两个组件能体现数据的内容,TextView和ImageView。
第三行是根据不同的位置选择不同的字符串进行设置,没有难度。
在说switch之前,我们先来看最后一行
holder.imageView.setColorFilter(Color.parseColor("#55555555"));
给imageView设置滤色,因为我想要在图片之上显示一个白色的文字,适当的使图片变暗,能凸显文字。
switch当然也能看得懂,但是出现了一个陌生的东西 Glide。
实际不难理解,这个switch的作用还是根据不同的位置选择不同的文件进行显示,我们当然可以使用ImageView自带的方法来设置图片,但是ImageView只能设置本地或者APK之中的图片资源,对于网络图片或者诸多不支持的图片类型(如GIF)就毫无办法,不仅如此,当本地图片较大时,还会不可避免的出现卡顿现象。
这时候Glide出现了,它能快速加载各种图片,根据显示大小自动对图片进行压缩,同样一条语句,如果传入图片链接还能加载网络图片,并缓存。
Glide.with(context).load(R.mipmap.ic_launcher).into(holder.imageView);
如上面代码所示的一句话,就能加载APK资源中的一张图片,这里我们只有图标一个文件,所以将图标文件传给了imageView。
不过如果你只是把刚刚的代码复制粘贴到你的工程,你的程序应该会报错,显示没有找到Glide这个东西,这是因为Glide不是官方提供的,我们需要手动引入。
找到上面那个文件。
加入最后一行,选择同步。
这样,我们就引入了Glide。
整合
public static class FindBooksFragment extends Fragment { public FindBooksFragment() {
} private RecyclerView recyclerView;
private StaggeredGridLayoutManager staggeredGridLayoutManager;
private AdapterBookFind bookAdapterBookFind; @Override
public View onCreateView(final LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) { final ArrayList<String> bookClass = new ArrayList<>();
bookClass.add("//玄幻");
bookClass.add("//武侠");
bookClass.add("//都市");
bookClass.add("//历史");
bookClass.add("//游戏");
bookClass.add("//科幻");
bookClass.add("//女生");
bookClass.add("//所有"); View rootView = inflater.inflate(R.layout.pager_book_find, container, false);
recyclerView = (RecyclerView) rootView.findViewById(R.id.recyler_view_find_book); staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
bookAdapterBookFind = new AdapterBookFind(bookClass);
recyclerView.setAdapter(bookAdapterBookFind); bookAdapterBookFind.setOnItemClickListener(new AdapterBookFind.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Log.e(TAG, "onItemClick: 111" );
} @Override
public void onItemLongClick(View view, int position) {
Log.e(TAG, "onItemLongClick: 222" );
}
}); return rootView;
} private static final String TAG = "FindBooksFragment";
}
首先初始化我们的字符串列表。StaggeredGridLayoutManager是我们列表的布局管理器,安卓提供了三种布局管理器,用来实现不同的列表效果,多行列表,瀑布流列表,不同的滑动方向都可以进行设置,大家可以百度其他的布局管理器。
所以在27-30行,我们分别为RecyclerView设置了列表管理器和适配器,32行开始,为适配器设置点击监听器,咱们暂时不设置功能,使用log工具将其输出在Android Monitor(log语句有快捷键)。
效果
运行程序,你将见到
我们又完成了新的一节,现在可以尝试更换不同的图片,尝试使用网络图片(不要忘记加入网络访问权限)。
未完待续...下一篇文章讲述使用 litePal 完成书架,敬请期待!!!
【RecyclerView与Glide】实现一个Android电子书阅读APP的更多相关文章
- [前言] 实现一个Android电子书阅读APP
大家好,我是小方,我将在接下来的几篇文章中从零实现一个网络小说阅读器,从安卓编程最基础的部分讲起,直至成功完成我们的应用,从新建一个项目开始,不断添加新的代码,添加新的界面,循序渐进,涵盖所有我们需要 ...
- 【新建项目&使用viewPager】实现一个Android电子书阅读APP
本章结尾处已放出应用DEMO,已经实现所有本文及后续文章所述全部功能,大家可以先下载下来玩玩看,欢迎在本文下方评论,小方很需要鼓励支持!!! 新建一个项目 呼-我们即将步入安卓开发之旅了,首先要新建一 ...
- 使用 Vue 和 epub.js 制作电子书阅读器
ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...
- 分分钟教你做出自己的新闻阅读APP
分分钟教你做出自己的新闻阅读APP 引子 曾经不小心发现了一些好的看新闻的网站,但是电脑又不是随身携带,因此想要下载一个这个网站的手机APP来看新闻,但是问题来了,这个网站根本没有做Android端! ...
- Android RecyclerView利用Glide加载大量图片into(Target)导致OOM异常
学过android的人应该都知道Glide是一个无比强大的图片加载库,它内部已经提供了很好的缓存机制供我们选择,我们只需一个参数调用即可(DiskCacheStrategy()),而不必像Univer ...
- 第一行代码阅读笔记---详解分析第一个Android程序
以下是我根据作者的思路,创建的第一个Android应用程序,由于工具强大,代码都自动生成了,如下: package com.example.first_app; import android.os.B ...
- 基于React实现的【绿色版电子书阅读器】,支持离线下载
代码地址如下:http://www.demodashi.com/demo/12052.html MyReader 绿色版电子书阅读器 在线地址:http://myreader.linxins.com ...
- android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码
Android精选源码 仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...
- 2020互联网寒冬之下,作为一个Android老码农,是如何进入腾讯的?
由于众所周知的原因,原生Android开发如今已经日渐凋敝,作为一个Android程序员,不仅要会Java,Kotlin,JavaScript,Css,Html,还要会Flutter,C++,FFmp ...
随机推荐
- 《疯狂Java讲义》(七)---- 方法
一 方法的参数传递机制 Java方法的参数传递方式只有一种:值传递.就是将实际参数值的副本传入方法内,而参数本身不会受到任何影响. eg. 基本类型的值传递 public class Primitiv ...
- HDU-4861-Couple doubi(数学题,难懂!难懂!)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=4861 这个题只能说没弄懂,感觉很难,看博客也看不懂,只能,多看几次,看能不能有所突破了. 代码的话只有 ...
- mysql5.5慢日志设置和查询
mysql> showvariables like '%version%'; +-------------------------+---------------------+ | Variab ...
- Mangos笔记
$lt.$lte.$gt.$gte和$ne $in.$nin.$or $mod.$not $exists 条件句式内层文档的键,修改器是外层文档的键,一个键可以有多个 条件,但是一个键不能对应多个更新 ...
- Xpath语法格式整理
http://www.cnblogs.com/Loofah/archive/2012/05/10/2494036.html 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或 ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 初识JSON
▓▓▓▓▓▓ 大致介绍 JSON(JavaScript Object Notation JavaScript对象表示法),JSON是一种数据格式,不是一种编程语言.虽然它的名字中有JavaScrip ...
- node源码详解(五) —— 在main函数之前 —— js和C++的边界,process.binding
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource5 本博客同步在https://cnodejs.o ...
- The certificate used to sign "" has either expired or has been revoked.
这句话的意思就是"签名"的证书已过期或已被吊销. 说白了就是有人删除了你的证书,解决的办法就是在创建一个,创建证书有两种办法,. 第一: 在苹果开发者中心,进入自己的账号,请求一个 ...
- POJ2796(单调栈)
Feel Good Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 12987 Accepted: 3639 Case T ...