Android大作业（一）——GridView制作小说app书架页面
文章目录
前言
本次目标为仿市面上流行小说App做一个简易的小说阅读器。本章节以GridView为基础制作小说App书架页面。
提示：以下是本篇文章正文内容，下面案例可供参考
一、GridView概念
GridView控件是Android中一种显示列表数据的控件，通常用于展示一组数据集合。GridView控件会在屏幕上以网格形式展示数据集合，每个网格都是相同大小的。GridView可以通过适配器来加载数据，可以设置点击事件来实现对数据的选择等操作。此外，它还支持分页加载数据，卡片布局等功能。
二、效果图
（效果图不包括底部导航栏，这个详情可以去了解fragment）
三、步骤
首先，创建布局文件fragment_book.xml，其代码如下：
<?xml version="1.0" encoding="utf-8"?>
<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">
<ImageView
android:id="@+id/background_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/bg_bookshelf"
tools:ignore="MissingConstraints" />
<GridView
android:id="@+id/bookshelf_gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"
android:verticalSpacing="16dp"
android:horizontalSpacing="16dp"
android:stretchMode="columnWidth"
android:padding="16dp"
android:clipToPadding="false" />
</androidx.constraintlayout.widget.ConstraintLayout>
在其对应的java对象，我这里是叫做BookFragment里重写其onCreateView方法，并且提供一些假数据。其代码如下：
public class BookFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_book, container, false);
GridView gridView = (GridView) view.findViewById(R.id.bookshelf_gridview);
ArrayList<Book> books = new ArrayList<>();
books.add(new Book(R.drawable.book1, "黄沙之下","crab"));
books.add(new Book(R.drawable.book2, "剑来","烽火戏诸侯"));
books.add(new Book(R.drawable.book3, "我在精神病院学斩神","三九音域"));
books.add(new Book(R.drawable.book4, "深空彼岸","辰东"));
books.add(new Book(R.drawable.book5, "一剑独尊","青鸾峰上"));
books.add(new Book(R.drawable.book6, "仙武帝尊","六界三道"));
books.add(new Book(R.drawable.book7, "重生回1983当富翁","恩怨各一半"));
books.add(new Book(R.drawable.book8, "雪中悍刀行","烽火戏诸侯"));
BookAdapter adapter = new BookAdapter(getActivity(), books);
gridView.setAdapter(adapter);
return view;
}
}创建一个适配器，命名为BookAdapter：
public class BookAdapter extends BaseAdapter {
private final Context mContext;
private final ArrayList<Book> mBooks;
public BookAdapter(Context context, ArrayList<Book> books) {
this.mContext = context;
this.mBooks = books;
}
@Override
public int getCount() {
return mBooks.size();
}
@Override
public Object getItem(int position) {
return mBooks.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.book_item, parent, false);
}
ImageView cover = (ImageView) convertView.findViewById(R.id.book_cover);
TextView title = (TextView) convertView.findViewById(R.id.book_title);
TextView author = (TextView) convertView.findViewById(R.id.book_author);
Book book = mBooks.get(position);
cover.setImageResource(book.getCover());
title.setText(book.getTitle());
author.setText(book.getAuthor());
return convertView;
}
}
定义一个Book类封装每一本书籍，代码如下：
public class Book {
private final int mCover;
private final String mTitle;
private final String mAuthor;
public Book(int cover, String title, String Author) {
this.mCover = cover;
this.mTitle = title;
this.mAuthor = Author;
}
public int getCover() {
return mCover;
}
public String getTitle() {
return mTitle;
}
public String getAuthor() {
return mAuthor;
}
}在res创建三个文件，第一个文件叫做book_item，创建在layout文件夹中，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="120dp"
android:layout_height="210dp"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:id="@+id/book_cover"
android:layout_width="120dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:src="@drawable/default_bookcover" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:orientation="vertical">
<TextView
android:id="@+id/book_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sample Book Title"
android:textColor="@color/black"
android:maxLines="1"
android:ellipsize="end"
android:textSize="14sp" />
<TextView
android:id="@+id/book_author"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sample Author"
android:textColor="@color/black_overlay"
android:maxLines="1"
android:ellipsize="end"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
其中default_bookcover等是当没有传入数据时的默认展示。
第二个文件和第三个文件我放在xml文件夹中，第二个文件叫做book_cover,代码如下：
<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/book_cover_image"
android:layout_width="120dp"
android:layout_height="170dp"
android:scaleType="centerCrop"
android:src="@drawable/default_bookcover" />
</PreferenceScreen>第三个文件叫做book_title，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="@+id/book_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@color/black"
android:text="Sample Book Title" />
</PreferenceScreen>至此完成。