Mastodon
/
pachli-android
mirror of https://github.com/pachli/pachli-android.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Display uncropped media on account media pages (#464) 

Previously media on the "Media" tab was displayed scaled and cropped to
a square aspect ratio, effectively forcing the user to tap every image
to see it.

Now, display the images scaled but not cropped, layed out with
`StaggeredGridLayoutManager`. This shows each image in full (still
scaled) providing a better experience when scrolling down.

Scrolling up can occasionally introduce gaps in the grid as images are
re-placed as viewholders are reused. When this happens images animate to
a better position when scrolling stops.
This commit is contained in:
Nik Clayton 2024-02-22 14:33:44 +01:00 committed by GitHub
parent 203784d718
commit 9071a89e48
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 61 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/main/java/app/pachli/components/account/media/AccountMediaFragment.kt
View File

@ -29,7 +29,8 @@ import androidx.fragment.app.viewModels
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.paging.LoadState
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.StaggeredGridLayoutManager
import androidx.recyclerview.widget.StaggeredGridLayoutManager.VERTICAL
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout.OnRefreshListener
import app.pachli.R
import app.pachli.core.accounts.AccountManager
@ -94,11 +95,10 @@ class AccountMediaFragment :
)
val columnCount = view.context.resources.getInteger(DR.integer.profile_media_column_count)
val imageSpacing = view.context.resources.getDimensionPixelSize(DR.dimen.profile_media_spacing)
binding.recyclerView.addItemDecoration(GridSpacingItemDecoration(columnCount, imageSpacing, 0))
binding.recyclerView.layoutManager = GridLayoutManager(view.context, columnCount)
val layoutManager = StaggeredGridLayoutManager(columnCount, VERTICAL)
layoutManager.gapStrategy = StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS
binding.recyclerView.layoutManager = layoutManager
binding.recyclerView.setHasFixedSize(true)
binding.recyclerView.adapter = adapter
binding.swipeRefreshLayout.isEnabled = false

45
app/src/main/java/app/pachli/components/account/media/AccountMediaGridAdapter.kt
View File

@ -1,7 +1,6 @@
package app.pachli.components.account.media
import android.content.Context
import android.graphics.Color
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
@ -20,8 +19,6 @@ import app.pachli.util.BindingHolder
import app.pachli.util.getFormattedDescription
import app.pachli.util.iconResource
import com.bumptech.glide.Glide
import com.google.android.material.color.MaterialColors
import java.util.Random
class AccountMediaGridAdapter(
private val useBlurhash: Boolean,
@ -39,27 +36,18 @@ class AccountMediaGridAdapter(
},
) {
private val baseItemBackgroundColor = MaterialColors.getColor(context, com.google.android.material.R.attr.colorSurface, Color.BLACK)
private val playableIcon = AppCompatResources.getDrawable(context, R.drawable.ic_play_indicator)
private val mediaHiddenDrawable = AppCompatResources.getDrawable(context, R.drawable.ic_hide_media_24dp)
private val itemBgBaseHSV = FloatArray(3)
private val random = Random()
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BindingHolder<ItemAccountMediaBinding> {
val binding = ItemAccountMediaBinding.inflate(LayoutInflater.from(parent.context), parent, false)
Color.colorToHSV(baseItemBackgroundColor, itemBgBaseHSV)
itemBgBaseHSV[2] = itemBgBaseHSV[2] + random.nextFloat() / 3f - 1f / 6f
binding.root.setBackgroundColor(Color.HSVToColor(itemBgBaseHSV))
return BindingHolder(binding)
}
override fun onBindViewHolder(holder: BindingHolder<ItemAccountMediaBinding>, position: Int) {
val context = holder.binding.root.context
override fun onBindViewHolder(holder: BindingHolder<ItemAccountMediaBinding>, position: Int) = with(holder.binding) {
val item = getItem(position) ?: return
getItem(position)?.let { item ->
val imageView = holder.binding.accountMediaImageView
val overlay = holder.binding.accountMediaImageViewOverlay
val context = root.context
val placeholder = item.attachment.blurhash?.let {
if (useBlurhash) decodeBlurHash(context, it) else null
@ -70,50 +58,47 @@ class AccountMediaGridAdapter(
overlay.show()
overlay.setImageDrawable(mediaHiddenDrawable)
Glide.with(imageView)
Glide.with(preview)
.load(placeholder)
.centerInside()
.into(imageView)
.into(preview)
imageView.contentDescription = context.getString(R.string.post_media_hidden_title)
preview.contentDescription = context.getString(R.string.post_media_hidden_title)
}
item.attachment.isPreviewable() -> {
if (item.attachment.type.isPlayable()) overlay.setImageDrawable(playableIcon)
overlay.visible(item.attachment.type.isPlayable())
Glide.with(imageView)
Glide.with(preview)
.asBitmap()
.load(item.attachment.previewUrl)
.placeholder(placeholder)
.centerInside()
.into(imageView)
.into(preview)
imageView.contentDescription = item.attachment.getFormattedDescription(context)
preview.contentDescription = item.attachment.getFormattedDescription(context)
}
else -> {
if (item.attachment.type.isPlayable()) overlay.setImageDrawable(playableIcon)
overlay.visible(item.attachment.type.isPlayable())
Glide.with(imageView)
Glide.with(preview)
.load(item.attachment.iconResource())
.centerInside()
.into(imageView)
.into(preview)
imageView.contentDescription = item.attachment.getFormattedDescription(context)
preview.contentDescription = item.attachment.getFormattedDescription(context)
}
}
holder.binding.root.setOnClickListener {
onAttachmentClickListener(item, imageView)
root.setOnClickListener {
onAttachmentClickListener(item, preview)
}
holder.binding.root.setOnLongClickListener { view ->
root.setOnLongClickListener { view ->
val description = item.attachment.getFormattedDescription(view.context)
Toast.makeText(context, description, Toast.LENGTH_LONG).show()
true
}
}
}
}

48
app/src/main/java/app/pachli/components/account/media/GridSpacingItemDecoration.kt
View File

@ -1,48 +0,0 @@
/* Copyright 2022 Tusky Contributors
*
* This file is a part of Pachli.
*
* This program is free software; you can redistribute it and/or modify it under the terms of the
* GNU General Public License as published by the Free Software Foundation; either version 3 of the
* License, or (at your option) any later version.
*
* Pachli is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
* the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with Pachli; if not,
* see <http://www.gnu.org/licenses>.
*/
package app.pachli.components.account.media
import android.graphics.Rect
import android.view.View
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.ItemDecoration
class GridSpacingItemDecoration(
private val spanCount: Int,
private val spacing: Int,
private val topOffset: Int,
) : ItemDecoration() {
override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: RecyclerView.State,
) {
val position = parent.getChildAdapterPosition(view) // item position
if (position < topOffset) return
val column = (position - topOffset) % spanCount // item column
outRect.left = column * spacing / spanCount // column * ((1f / spanCount) * spacing)
outRect.right =
spacing - (column + 1) * spacing / spanCount // spacing - (column + 1) * ((1f / spanCount) * spacing)
if (position - topOffset >= spanCount) {
outRect.top = spacing // item top
}
}
}

20
app/src/main/java/app/pachli/components/account/media/SquareImageView.kt
View File

@ -1,20 +0,0 @@
package app.pachli.components.account.media
import android.content.Context
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatImageView
class SquareImageView : AppCompatImageView {
constructor(context: Context) : super(context)
constructor(context: Context, attributes: AttributeSet) : super(context, attributes)
constructor(context: Context, attributes: AttributeSet, defStyleAttr: Int) :
super(context, attributes, defStyleAttr)
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val width = measuredWidth
setMeasuredDimension(width, width)
}
}

16
app/src/main/res/layout/item_account_media.xml
View File

@ -1,16 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_height="wrap_content"
android:padding="@dimen/profile_media_spacing">
<app.pachli.components.account.media.SquareImageView
android:id="@+id/accountMediaImageView"
<!-- content description is set in code -->
<ImageView
android:id="@+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="centerCrop" />
android:layout_height="match_parent"
android:adjustViewBounds="true"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/accountMediaImageViewOverlay"
android:id="@+id/overlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"