ImageView ContentMode 모듈 (+ListView template에서 써드파티 모듈 사용하기)

JavaScript Titanium
1

정말 오래전부터 요구사항이 있지만 공식 API에 포함이 안되서 써드파티 모듈을 써야하는 기능을 뽑으라면 바로 ImageView의 ContentMode 이겠죠. ASPECT_FILL같이 화면비율을 유지하면서 영역 가득채워야 할때가 상당히 많습니다.

ContentMode를 지원하는 모듈은 검색해보면 몇개 나오는데

얼마전 iOS와 Android 모두 지원하는 모듈을 발견했어요.

써드파티 모듈을 ListView Template에서 쓰려면 네이티브의 클래스 네임을 alloy template의 ns로 넘겨주면 됩니다.

<ItemTemplate name="meetupItem" class="meetupItem">
    <ImageView ns="AvImageview" class="itemImg" bindId="img"></ImageView>
</Item>

".itemImg": {
  height: 121,
  width: Ti.UI.FILL,
  left: 2,
  right: 2,
  contentMode : Alloy.Globals.AvImageView.CONTENT_MODE_ASPECT_FILL
}

tss에서 모듈의 CONST를 쓰려고 alloy.js Alloy.Globals에 해당 모듈을 지정했습니다.

Alloy.Globals.AvImageView = require('av.imageview');

listview에 넣을 경우 android에서 렌더링 문제가 있다합니다. 이걸 피하려면 listview에 넣을 때 loadingIndicator를 false로 지정해주면 됩니다.
자세한 사항은 github 저장소의 문서를 참고하세요.

1개의 좋아요
2

이 문제를 뷰 안에 이미지뷰를 넣어서, 뷰를 마스크 삼아 해결하곤 했는데, 이걸 쓰면 좀더 간편하겠네요 : )

3

안드로이드 리스트뷰에서 알려진 문제가 있는데 그걸 해결하라고 적힌 방법을 써도 잘 안되요. 성공하면 공유할께요. ^^

4

아직 안드로이드 버그는 해결이 안된거죠?
리액트 네이티브 책 잘 보고 있습니다.^^

5

오늘 Av.Imageview를 만든 개발자로 부터 다으뫄 같이 메시지를 받았습니다.

I solved the problem with the https://github.com/AndreaVitale/imageview module that doesn’t display anything inside a ListView on Android, in a few hours I’ll commit a new version :slightly_smiling_face:

곧 해결된 버전이 나온다 합니다. ^^

6

오~ 그럼 이걸루 바꿔야겠군요…여기저기 많이 쓰는데…
좋은 정보 감사합니다.~^^