Zoomlayout: ZoomLayout의 λ„ˆλΉ„/높이λ₯Ό 변경해도 쀑앙 자λ₯΄κΈ° μž‘μ—…μ„ μœ μ§€ν•˜κΈ° μœ„ν•΄ ν•˜μœ„ λ³€ν™˜μ΄ μ—…λ°μ΄νŠΈλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2020λ…„ 10μ›” 16일  Β·  5μ½”λ©˜νŠΈ  Β·  좜처: natario1/ZoomLayout

버그 μ„€λͺ…

  • 라이브러리 버전: 1.8.0
  • 곡식 데λͺ¨ μ•±μ—μ„œ μž¬ν˜„ κ°€λŠ₯: 예
  • κΈ°κΈ°/μ•ˆλ“œλ‘œμ΄λ“œ 버전: ν”½μ…€ 3, API 29

μ„Έλ‘œ/κ°€λ‘œ 이미지λ₯Ό ν‘œμ‹œν•˜κΈ° μœ„ν•΄ ZoomLayout을 μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. Zoom & OverScroll을 λΉ„ν™œμ„±ν™”ν–ˆμŠ΅λ‹ˆλ‹€. CenterCropμ—μ„œλ§Œ μˆ˜ν‰ 및 수직 νŒ¬μ„ μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμƒλŒ€λ‘œ ν•œ λ²ˆμ— ν•œ λ°©ν–₯ 팬만 μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€(쀌이 λΉ„ν™œμ„±ν™”λ˜μ–΄ 있기 λ•Œλ¬Έμ—). 이λ₯Ό 톡해 μ΄λ―Έμ§€μ˜ 일뢀λ₯Ό ν‘œμ‹œν•˜κ³  λ‹€λ₯Έ 뢀뢄은 Pan을 μ‚¬μš©ν•˜μ—¬ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

λ‚΄κ°€ μ΄ν•΄ν•œ λŒ€λ‘œ centercrop은 containerHeight 을 childHeight λ˜λŠ” containerWidth μ—μ„œ childWidth 둜 μ •λ ¬ν•˜μ—¬ μž‘λ™ν•©λ‹ˆλ‹€. 였λ₯Έμͺ½? κ°€λ‘œ/μ„Έλ‘œ 이미지λ₯Ό μ •μ‚¬κ°ν˜• ImageView에 λ‘œλ“œν•˜λŠ” 것을 상상해 λ³΄μ‹­μ‹œμ˜€. κ°€λ‘œ μ΄λ―Έμ§€μ˜ 경우 childHeight κ°€ containerHeight 와 μ •λ ¬λ˜μ–΄ κ°€μš΄λ° 자λ₯΄κΈ°λ₯Ό μˆ˜ν–‰ν•˜κ³  이제 νŒ¬μ„ κ°€λ‘œλ‘œ μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ§ˆμ°¬κ°€μ§€λ‘œ μ„Έλ‘œ μ΄λ―Έμ§€μ˜ 경우 νŒ¬μ„ μ„Έλ‘œλ‘œ μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이것은 잘 μž‘λ™ν•©λ‹ˆλ‹€.

ν•˜μ§€λ§Œ μ΄λ ‡κ²Œ ZoomLayout의 λ„ˆλΉ„/높이λ₯Ό λ³€κ²½ν•˜λ©΄ μžμ‹ λ·°μ—λŠ” λ³€ν™˜μ΄ μ μš©λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

val layoutParams = zoomLayout.layoutParams
layoutParams.width = layoutParams.width + changedWidth
layoutParams.height = layoutParams.height + changedHeight
zoomLayout.layoutParams = layoutParams

μž¬ν˜„ν•˜κΈ° μœ„ν•΄

데λͺ¨ μ•±μ—μ„œ λ™μž‘μ„ μž¬ν˜„ν•˜λŠ” 단계:

  1. ν™•λŒ€/μΆ•μ†Œ 및 μ˜€λ²„μŠ€ν¬λ‘€μ„ λΉ„ν™œμ„±ν™”ν•©λ‹ˆλ‹€.
  2. μˆ˜ν‰ 및 μˆ˜μ§μ— λŒ€ν•΄ νŒ¬μ„ ν™œμ„±ν™”ν•©λ‹ˆλ‹€.
  3. XML의 ZoomLayout에 μžμ‹ 보기λ₯Ό λ°°μΉ˜ν•©λ‹ˆλ‹€. μ½˜ν…μΈ λ₯Ό 감싸기 μœ„ν•΄ λ„ˆλΉ„/높이λ₯Ό μœ μ§€ν•©λ‹ˆλ‹€.
  4. κΈ΄ κ°€λ‘œ λ“œλ‘œμ–΄λΈ”μ„ μΆ”κ°€ν•©λ‹ˆλ‹€. 780 x 180으둜 ν…ŒμŠ€νŠΈν–ˆμŠ΅λ‹ˆλ‹€.
  5. 이 λ“œλ‘œμ–΄λΈ”μ„ XML의 ZoomLayoutμ—μ„œ μžμ‹ 보기의 배경으둜 μ„€μ •ν•©λ‹ˆλ‹€.
  6. μ‹€ν–‰, μˆ˜ν‰μœΌλ‘œ νŒ¬μ„ μˆ˜ν–‰ν•©λ‹ˆλ‹€.
  7. λ²„νŠΌμ„ μ‚¬μš©ν•˜μ—¬ ZoomLayout의 높이λ₯Ό λ†’μž…λ‹ˆλ‹€. μžμ‹μ— λŒ€ν•œ λ³€ν™˜μ€ μˆ˜ν–‰λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μ˜ˆμƒλ˜λŠ” 행동

μ»¨ν…Œμ΄λ„ˆ 높이가 λ³€κ²½λ˜λ©΄ CenterCrop을 μœ μ§€ν•˜κΈ° μœ„ν•΄ μžμ‹ λ³€ν™˜μ΄ μ μš©λ©λ‹ˆλ‹€.

XML λ ˆμ΄μ•„μ›ƒ(ν™•μž₯된 ZoomLayout)

init {
    setHorizontalPanEnabled(true)
    setVerticalPanEnabled(true)

    setOverScrollHorizontal(false)
    setOverScrollVertical(false)

    setAlignment(Alignment.TOP or Alignment.LEFT)
    setHasClickableChildren(true)
    setTransformation(
        ZoomApi.TRANSFORMATION_CENTER_CROP,
        ZoomApi.TRANSFORMATION_GRAVITY_AUTO
    )

    setZoomEnabled(false)
}

μŠ€ν¬λ¦°μƒ·

Screenshot
Screenshot

둜그

μΆœμ‹œ

I/ZoomLayout: setHasClickableChildren: old: false new: false
I/ZoomLayout: setHasClickableChildren: old: false new: true

μžμ‹μ— κ°€λ‘œ λ°°κ²½ λ“œλ‘œμ–΄λΈ”μ„ λ‘œλ“œν•©λ‹ˆλ‹€.

W/ZoomEngine: onMatrixSizeChanged: firstTime: true oldZoom: NaN transformation: 1 transformationZoom: 0.0
I/ZoomEngine: computeTransformationZoom centerCrop scaleX: 1.0042135 scaleY: 5.860656
I/ZoomEngine: onMatrixSizeChanged: newTransformationZoom: 5.860656 newRealZoom: 5.8606563 newZoom: 1.0000001

μœ„μ˜ μ½”λ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ ZoomLayout 높이λ₯Ό λ†’μ΄μ‹­μ‹œμ˜€.

W/ZoomEngine: onMatrixSizeChanged: firstTime: false oldZoom: 5.8606563 transformation: 1 transformationZoom: 5.860656
I/ZoomEngine: computeTransformationZoom centerCrop scaleX: 1.0042135 scaleY: 6.2704916
I/ZoomEngine: onMatrixSizeChanged: newTransformationZoom: 6.2704916 newRealZoom: 5.8606563 newZoom: 0.93464065

μžμ‹μ€ centercrop κΈ°λŠ₯을 μœ μ§€ν•˜κΈ° μœ„ν•΄ λ³€ν™˜λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

APK

ν•„μš”ν•œ 경우 μ œκ³΅ν•˜μ§€λ§Œ μž¬μƒμ‚° 단계λ₯Ό μ‚¬μš©ν•˜κΈ°κ°€ 맀우 μ‰½μŠ΅λ‹ˆλ‹€.

enhancement discussion

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ§€κΈˆ μž‘λ™ν•˜λŠ” 방식이 λ§ˆμŒμ— λ“­λ‹ˆλ‹€. μ»¨ν…Œμ΄λ„ˆ ν¬κΈ°λŠ” μ—¬λŸ¬ 가지 이유둜 변경될 수 있으며 μ½˜ν…μΈ κ°€ 이미 ν™•λŒ€/μΆ•μ†Œ/μ΄λ™λœ 경우 λ³€ν™˜μ„ λ‹€μ‹œ μ μš©ν•΄μ•Ό ν•œλ‹€κ³  μƒκ°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ‹€μŒκ³Ό 같이 μ›ν•˜λŠ” 것을 얻을 수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

zoomLayout.layoutParams = layoutParams
zoomLayout.engine.setContainerSize(layoutParams.width, layoutParams.height, true)

μ•„λ‹ˆλ©΄ μ΄λ ‡κ²Œ

zoomLayout.layoutParams = layoutParams
zoomLayout.post {
    zoomLayout.engine.setContainerSize(layoutParams.width, layoutParams.height, true)
}

syncTransformation() ν•¨μˆ˜ λ˜λŠ” 이와 μœ μ‚¬ν•œ κ²ƒμœΌλ‘œ 이것을 더 μ‰½κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  5 λŒ“κΈ€

이 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ μ•„λž˜ μ½”λ“œλ₯Ό μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€.

val layoutParams = zoomLayout.layoutParams
layoutParams.width = layoutParams.width + changedWidth
layoutParams.height = layoutParams.height + changedHeight
zoomLayout.layoutParams = layoutParams

zoomLayout.engine.setContainerSize(
    layoutParams.width.toFloat(),
    layoutParams.height.toFloat(),
    applyTransformation = false // not applying transformation
)

그리고 ZoomLayout의 onGlobalLayout() 의 또 λ‹€λ₯Έ λ³€κ²½ 사항

engine.setContentSize(
    child.width.toFloat(), 
    child.height.toFloat(),
    applyTransformation = true // <-- this change
)

μ΄λ ‡κ²Œ ν•˜λ©΄ 도움이 λ©λ‹ˆλ‹€. 쀑앙 자λ₯΄κΈ° κΈ°λŠ₯을 μœ μ§€ν•˜κΈ° μœ„ν•΄ μžμ‹μ΄ λΆ€λͺ¨μ™€ μ˜¬λ°”λ₯΄κ²Œ μ •λ ¬λ©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 이 μ½”λ“œλŠ” #185 문제λ₯Ό λ°œμƒμ‹œν‚΅λ‹ˆλ‹€. 이제 Pan이 μž¬μ„€μ •λ˜λŠ” 이유(hint#global-layout)λ₯Ό ν™•μ‹€νžˆ μ•Œμ•˜μŠ΅λ‹ˆλ‹€.

λ”°λΌμ„œ μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„/높이가 변경될 λ•Œ μžμ‹μ— λ³€ν˜•μ„ μ μš©ν•˜λ„λ‘ ZoomLayout에 μ§€μ‹œν•˜λŠ” 방법을 μ—¬μ „νžˆ μ°Ύκ³  μžˆμŠ΅λ‹ˆλ‹€. 해킹을 계속 μ‹œλ„ν•˜λ©΄ 버그가 더 많이 생길 κ²ƒμž…λ‹ˆλ‹€. 당신은 이것에 λŒ€ν•΄ μΌν–ˆκ³ , 당신은 λ‚˜λ³΄λ‹€ 더 잘 μ•Œκ³  μžˆμŠ΅λ‹ˆλ‹€. μ•ˆλ‚΄ν•΄ μ£Όμ„Έμš”.

μžμ„Έν•œ λ³΄κ³ μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€.
이것은 μ»¨ν…Œμ΄λ„ˆμ˜ 크기λ₯Ό λ³€κ²½ν•  λ•Œ 아직 μ •μ˜λœ λ™μž‘μ΄ μ—†λŠ” ZoomLayout의 일반적인 문제라고 μƒκ°ν•©λ‹ˆλ‹€. μ»¨ν…Œμ΄λ„ˆκ°€ 크기λ₯Ό μœ μ§€ν•  κ²ƒμœΌλ‘œ μ˜ˆμƒν•˜κΈ° λ•Œλ¬Έμ— @natario1이 잘λͺ»λœ 경우 μˆ˜μ •ν•΄ μ£Όμ„Έμš”. κ·Έλž˜μ„œ μ œκ°€ μ•ŒκΈ°λ‘œλŠ” 이것은 버그라기보닀 κΈ°λŠ₯ μš”μ²­μ— κ°€κΉμŠ΅λ‹ˆλ‹€.

이λ₯Ό μ§€μ›ν•˜λ €λ©΄ μ˜ˆμƒλ˜λŠ” λ™μž‘μ΄ μ–΄λ–»κ²Œ 보여야 ν•˜λŠ”μ§€, κ°œλ°œμžκ°€ 이λ₯Ό μ–΄λ–»κ²Œ λ²—μ–΄λ‚  수 μžˆλŠ”μ§€μ— λŒ€ν•œ λ…Όμ˜κ°€ ν•„μš”ν•˜λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

μ§€κΈˆ μž‘λ™ν•˜λŠ” 방식이 λ§ˆμŒμ— λ“­λ‹ˆλ‹€. μ»¨ν…Œμ΄λ„ˆ ν¬κΈ°λŠ” μ—¬λŸ¬ 가지 이유둜 변경될 수 있으며 μ½˜ν…μΈ κ°€ 이미 ν™•λŒ€/μΆ•μ†Œ/μ΄λ™λœ 경우 λ³€ν™˜μ„ λ‹€μ‹œ μ μš©ν•΄μ•Ό ν•œλ‹€κ³  μƒκ°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ‹€μŒκ³Ό 같이 μ›ν•˜λŠ” 것을 얻을 수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

zoomLayout.layoutParams = layoutParams
zoomLayout.engine.setContainerSize(layoutParams.width, layoutParams.height, true)

μ•„λ‹ˆλ©΄ μ΄λ ‡κ²Œ

zoomLayout.layoutParams = layoutParams
zoomLayout.post {
    zoomLayout.engine.setContainerSize(layoutParams.width, layoutParams.height, true)
}

syncTransformation() ν•¨μˆ˜ λ˜λŠ” 이와 μœ μ‚¬ν•œ κ²ƒμœΌλ‘œ 이것을 더 μ‰½κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

@markusressel μ•Œκ² μŠ΅λ‹ˆλ‹€. λ˜ν•œ 이 라이브러리의 잠재λ ₯을 25%만 ν™œμš©ν•˜κ³  μ‹Άλ‹€λŠ” 생각이 λ“­λ‹ˆλ‹€. 라이브러리λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šλ„λ‘ μ„€μ •ν•˜λŠ” 것은 μ‹€μ œλ‘œ λΌμ΄λΈŒλŸ¬λ¦¬μ— λ°˜λŒ€ν•˜κ³  μž‘λ™ν•˜κΈ°λ₯Ό κΈ°λŒ€ν•˜λŠ” 것과 κ°™μŠ΅λ‹ˆλ‹€. λ‚΄κ°€ ν•„μš”ν•œ 것은 팬과 ν”Œλ§μœΌλ‘œ 쀑앙 자λ₯΄κΈ°μž…λ‹ˆλ‹€. μ œμ•ˆν•  사항이 있으면 ν•˜μ‹­μ‹œμ˜€. 감사 ν•΄μš”.

μ»¨ν…Œμ΄λ„ˆ ν¬κΈ°λŠ” μ—¬λŸ¬ 가지 이유둜 변경될 수 있으며 μ½˜ν…μΈ κ°€ 이미 ν™•λŒ€/μΆ•μ†Œ/μ΄λ™λœ 경우 λ³€ν™˜μ„ λ‹€μ‹œ μ μš©ν•΄μ•Ό ν•œλ‹€κ³  μƒκ°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

@natario1 이것이 μ˜ˆμƒ/ν•„μš”ν•œ 경우 이 λ™μž‘μ— λŒ€ν•œ 옡트인 ν”Œλž˜κ·Έκ°€ μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€. λ‚˜μ—κ²Œ 그것은 κΈ°λ³Έ κΈ°λŒ€μ— λ°˜ν•˜λŠ” κ²ƒμ²˜λŸΌ λŠκ»΄μ§‘λ‹ˆλ‹€. μ„Όν„° 크둭을 μ μš©ν•˜κ³  용기 크기λ₯Ό λ³€κ²½ν•˜λŠ” 경우 μ„Όν„° 크둭을 μœ μ§€ν•΄μ•Ό ν•©λ‹ˆλ‹€. ZoomLayoutμ—μ„œ 크기 변경을 μ§€μ›ν•˜μ§€ μ•Šλ”λΌλ„ 이것은 μ€‘μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

λ˜ν•œ ν™”μš”μΌλΆ€ν„° 라이브러리 μ½”λ“œμ— μ°Έμ—¬ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. ν–‰λ ¬, 벑터 λ˜λŠ” 셰이더가 μž‘λ™ν•˜λŠ” 방식에 λŒ€ν•΄ ~많이~ 아무것도 λͺ¨λ¦…λ‹ˆλ‹€. 배우기 μœ„ν•΄ 읽고 μˆ˜μ •ν•˜λ €κ³  λ…Έλ ₯ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ 문제λ₯Ό λ³΄κ³ ν•˜κΈ° 전에 κ·€ν•˜μ˜ μ œμ•ˆμ„ 이미 μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€. 결과적으둜 Pan은 μˆ˜ν‰ 및 수직 λ°©ν–₯ λͺ¨λ‘μ— λŒ€ν•΄ ν™œμ„±ν™”λ©λ‹ˆλ‹€. 그리고 μ½˜ν…μΈ /ν•˜μœ„κ°€ ν™•λŒ€λœ κ²ƒμ²˜λŸΌ 보이기 λ•Œλ¬Έμ— 쀑앙 자λ₯΄κΈ°λŠ” 더 이상 μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€.

λ„μ™€μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€. λ‹΅λ³€ν•˜λŠ” 데 μ‹œκ°„μ΄ 훨씬 였래 κ±Έλ ΈμŠ΅λ‹ˆλ‹€.

@rupinderjeet 예제λ₯Ό μž¬ν˜„ν•˜λ €κ³  μ‹œλ„ν–ˆμ§€λ§Œ μˆ˜μ •λœ LayoutParams λ₯Ό ZoomLayout μΈμŠ€ν„΄μŠ€μ— μ μš©ν•˜λ©΄ 자체 였λ₯˜ λ©”μ‹œμ§€κ°€ λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

java.lang.RuntimeException: ZoomLayout must be used with fixed dimensions (e.g. match_parent)

λ‚΄κ°€ λ­”κ°€λ₯Ό λ†“μΉ˜κ³  μžˆμŠ΅λ‹ˆκΉŒ?

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰