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.tvPosition.visibility = View.GONE
binding.tvTimeInfo.visibility = View.GONE binding.tvTimeInfo.visibility = View.GONE
binding.tvPoints.visibility = View.GONE binding.tvPoints.visibility = View.GONE
binding.picContainer.visibility = View.GONE binding.picScrollView.visibility = View.GONE
binding.picContainer.removeAllViews() binding.picContainer.removeAllViews()
binding.tvNote.visibility = View.GONE binding.tvNote.visibility = View.GONE
binding.btnVoice.visibility = View.GONE binding.btnVoice.visibility = View.GONE
@@ -413,38 +413,64 @@ class TaskListFragment : BaseFragment<FragmentTaskListBinding>() {
* 显示图片缩略图(用户上报任务 taskType=3/4 可能有图片附件) * 显示图片缩略图(用户上报任务 taskType=3/4 可能有图片附件)
* 横排展示最多3张点击查看大图 * 横排展示最多3张点击查看大图
*/ */
/**
* 显示图片缩略图(用户上报任务可能有图片附件)
* 横向滚动展示所有图片,点击放大全屏查看
*/
private fun showPictures(detail: TaskDetail) { private fun showPictures(detail: TaskDetail) {
if (!detail.hasPictures) return if (!detail.hasPictures) return
val pics = detail.uploadPic!!.filter { it.url.isNotEmpty() } val pics = detail.uploadPic!!.filter { it.url.isNotEmpty() }
if (pics.isEmpty()) return if (pics.isEmpty()) return
binding.picContainer.visibility = View.VISIBLE binding.picScrollView.visibility = View.VISIBLE
binding.picContainer.removeAllViews() binding.picContainer.removeAllViews()
// 计算每张图片尺寸:容器宽度 / 最多3列留 gap val density = resources.displayMetrics.density
val maxCount = minOf(pics.size, 3) val imgSize = (80 * density).toInt() // 每张 80dp 正方形
val gap = 8 // dp val gap = (8 * density).toInt()
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
for ((index, pic) in pics.take(3).withIndex()) { for ((index, pic) in pics.withIndex()) {
val imageView = android.widget.ImageView(requireContext()).apply { val imageView = android.widget.ImageView(requireContext()).apply {
layoutParams = android.widget.LinearLayout.LayoutParams(imgSize, imgSize).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 scaleType = android.widget.ImageView.ScaleType.CENTER_CROP
setBackgroundColor(requireContext().getColor(R.color.card_background)) setBackgroundColor(requireContext().getColor(R.color.card_background))
} }
// 用 HTTP 加载图片(和语音一样的 TLS 问题)
val httpUrl = pic.url.replace("https://", "http://") val httpUrl = pic.url.replace("https://", "http://")
loadImage(imageView, httpUrl) loadImage(imageView, httpUrl)
// 点击放大全屏查看
imageView.setOnClickListener { showFullImage(httpUrl) }
binding.picContainer.addView(imageView) 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 */ /** 异步加载图片到 ImageView */
private fun loadImage(imageView: android.widget.ImageView, url: String) { private fun loadImage(imageView: android.widget.ImageView, url: String) {
viewLifecycleOwner.lifecycleScope.launch { viewLifecycleOwner.lifecycleScope.launch {

View File

@@ -179,14 +179,22 @@
</LinearLayout> </LinearLayout>
<!-- 图片展示区(用户上报任务附带图片) --> <!-- 图片展示区(用户上报任务附带图片,横向滚动 -->
<LinearLayout <HorizontalScrollView
android:id="@+id/picContainer" android:id="@+id/picScrollView"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal" android:scrollbars="none"
android:layout_marginBottom="11dp" android:layout_marginBottom="11dp"
android:visibility="gone" /> android:visibility="gone">
<LinearLayout
android:id="@+id/picContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
<!-- 指引块1去哪里橙色 --> <!-- 指引块1去哪里橙色 -->
<LinearLayout <LinearLayout