feat: 图片支持横向滚动显示所有+点击放大全屏
- 去掉3张限制,HorizontalScrollView 横向滚动展示所有图片 - 缩略图 80dp 正方形,超出可滑动查看 - 点击缩略图全屏放大查看(FIT_CENTER),点击关闭 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user