1

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
},
4

2 に答える 2