【Android】RecycleView簡單仿漫畫APP圖片相關樣式-有解無憂

真的真的想不到起什么標題好了，這次的內容真的是太簡單了，沒有什么挑戰性，一天以內就完成了，最近在學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.RecyclerView
        android: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">

    <ImageView
        android: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"/>

    <TextView
        android: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"/>

    <TextView
        android: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" />

    <TextView
        android: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"/>

    <TextView
        android: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.ConstraintLayout
    xmlns: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.Banner
        xmlns: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
	@Override
	public 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);
	}
	@Override
	public 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、本文圖片來自網路，如有侵權請聯系洗掉，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/287639.html

標籤：其他

上一篇：Android企業級實戰-界面篇-1

下一篇：iOS底層原理之alloc探究(三)物件本質與神秘的isa