feat: 图片支持横向滚动显示所有+点击放大全屏

- 去掉3张限制,HorizontalScrollView 横向滚动展示所有图片
- 缩略图 80dp 正方形,超出可滑动查看
- 点击缩略图全屏放大查看(FIT_CENTER),点击关闭

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
dongliang
2026-05-07 12:14:01 +09:30
parent 49732ac79a
commit 77619a5300
2 changed files with 51 additions and 17 deletions

View File

@@ -260,7 +260,7 @@ class TaskListFragment : BaseFragment<FragmentTaskListBinding>() {
binding.tvPosition.visibility = View.GONE
binding.tvTimeInfo.visibility = View.GONE
binding.tvPoints.visibility = View.GONE
binding.picContainer.visibility = View.GONE
binding.picScrollView.visibility = View.GONE
binding.picContainer.removeAllViews()
binding.tvNote.visibility = View.GONE
binding.btnVoice.visibility = View.GONE
@@ -413,38 +413,64 @@ class TaskListFragment : BaseFragment<FragmentTaskListBinding>() {
* 显示图片缩略图(用户上报任务 taskType=3/4 可能有图片附件)
* 横排展示最多3张点击查看大图
*/
/**
* 显示图片缩略图(用户上报任务可能有图片附件)
* 横向滚动展示所有图片,点击放大全屏查看
*/
private fun showPictures(detail: TaskDetail) {
if (!detail.hasPictures) return
val pics = detail.uploadPic!!.filter { it.url.isNotEmpty() }
if (pics.isEmpty()) return
binding.picContainer.visibility = View.VISIBLE
binding.picScrollView.visibility = View.VISIBLE
binding.picContainer.removeAllViews()
// 计算每张图片尺寸:容器宽度 / 最多3列留 gap
val maxCount = minOf(pics.size, 3)
val gap = 8 // dp
val containerWidth = resources.displayMetrics.widthPixels -
(21 * 2 * resources.displayMetrics.density).toInt() // 减去 safe area padding
val imgSize = (containerWidth - gap * (maxCount - 1) *
resources.displayMetrics.density.toInt()) / maxCount
val density = resources.displayMetrics.density
val imgSize = (80 * density).toInt() // 每张 80dp 正方形
val gap = (8 * density).toInt()
for ((index, pic) in pics.take(3).withIndex()) {
for ((index, pic) in pics.withIndex()) {
val imageView = android.widget.ImageView(requireContext()).apply {
layoutParams = android.widget.LinearLayout.LayoutParams(imgSize, imgSize).apply {
if (index > 0) marginStart = (gap * resources.displayMetrics.density).toInt()
if (index > 0) marginStart = gap
}
scaleType = android.widget.ImageView.ScaleType.CENTER_CROP
setBackgroundColor(requireContext().getColor(R.color.card_background))
}
// 用 HTTP 加载图片(和语音一样的 TLS 问题)
val httpUrl = pic.url.replace("https://", "http://")
loadImage(imageView, httpUrl)
// 点击放大全屏查看
imageView.setOnClickListener { showFullImage(httpUrl) }
binding.picContainer.addView(imageView)
}
}
/** 全屏显示大图(覆盖在当前页面上,点击关闭) */
private fun showFullImage(url: String) {
val container = requireActivity().findViewById<FrameLayout>(R.id.dialog_container)
val overlay = FrameLayout(requireContext()).apply {
setBackgroundColor(0xE0000000.toInt()) // 半透明黑
isClickable = true
}
val imageView = android.widget.ImageView(requireContext()).apply {
layoutParams = FrameLayout.LayoutParams(
FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.MATCH_PARENT
)
scaleType = android.widget.ImageView.ScaleType.FIT_CENTER
setPadding(0, 0, 0, 0)
}
overlay.addView(imageView)
// 点击关闭
overlay.setOnClickListener {
container.removeView(overlay)
}
container.addView(overlay)
// 加载大图
loadImage(imageView, url)
}
/** 异步加载图片到 ImageView */
private fun loadImage(imageView: android.widget.ImageView, url: String) {
viewLifecycleOwner.lifecycleScope.launch {