Appcelerator プラットフォームを使用してアプリを開発していますが、問題が発生しました。
ImageView にリモート画像 (さまざまなサイズ) を設定するカスタム テンプレートを含むリストビューがあります。100% の幅と自動高さ (幅と高さの Ti.UI.Fill と Ti.UI.SIZE) にスケーリングするようにしたいと思います。
これは、画像のコンテナーの高さを設定しない場合に機能しますが、すべての ListItems を同じ高さにし、高すぎる画像からのオーバーフローをマスクしたいと考えています。
固定の高さを設定すると、画像がコンテナーに収まるように試行されるため、画像の縦横比に応じて、左/右または上/下に境界線が表示されます (Ti.UI.Fill を無視するようです)。
ScrollView をコンテナーとして使用し、そのスクロールを無効にして目的を達成するというトリックがありますが、Listview 内に ScrollView を追加するとアプリがクラッシュします。
これは達成可能でしょうか?
編集: サンプル コードを追加します。
これは私のテンプレート宣言です:
<Templates>
<ItemTemplate name="eventsListTemplate">
<Label bindId="name" id="name" />
<View id="coverContainer">
<ImageView bindId="cover" id="cover" />
<View id="overlay"></View>
</View>
<Label bindId="startTime" id="startTime" />
<Label bindId="place" id="place" />
</ItemTemplate>
</Templates>
これは、listitem にデータを入力する場所です。
var mapped = _.map(events,function(event){
return {
name : { text : event.name },
cover : { image : (event.cover) ? event.cover.source : ''},
startTime : { text : Alloy.Globals.formatDate(event.startTime) },
place : { text : (event.place) ? event.place.name : event.owner.name },
id : event.id
};
});
そして関連するスタイル:
"#cover" :{
width: Titanium.UI.FILL,
height : Titanium.UI.SIZE
},
"#coverContainer":{
height: 120
},