1

これが私の

APP.js

var win = Ti.UI.createWindow({
    navBarHidden : true,
    className : 'window',
    backgroundColor : "#efefef"
});

var header = Ti.UI.createView({
    height : 20,
    width : 303,
    top : 0,
    backgroundColor : "#abc"
});
win.add(header);

var scroll = Ti.UI.createScrollView({
    top : 44,
    bottom : 44,
    layout : 'vertical'
});
win.add(scroll);
header.addEventListener('click', function(evt) {
    fetch_images();
});

win.open();

function fetch_images() {
    var xhr = Ti.Network.createHTTPClient({
        onload : function() {
            myjson = JSON.parse(this.responseText);
            for ( i = 0; i < myjson.length; i++) {
                Ti.API.debug(i);
                var look = new looks(myjson[i])
                scroll.add(look);
            }
        },
        onerror : function(e) {
            Ti.API.debug("STATUS: " + this.status);
            Ti.API.debug("TEXT:   " + this.responseText);
            Ti.API.debug("ERROR:  " + e.error);
            if (Titanium.Network.online) {
                alert('No reponse from server.');
            } else {
                alert('Please Check your Internet connectivity.');
            }
        },
        timeout : 5000
    });
    xhr.open('GET', 'http://xxxxxxx.com/xxxxxxx.json?api_token=xxxxxxxx');
    xhr.send();
}

function looks(image_details) {
    var look_container = Ti.UI.createView({
        height : 325,
        width : 303,
        top : 10,
        layout : 'horizontal',
        backgroundColor : "#cac"
    });
    var look_image = i.UI.createImageView({
        width : 303,
        top : 0,
        left : 0,
        right : 0,
        image : image_details.image_medium
    });

    look_container.add(look_image);
    return look_container;
}

私は頭から髪を引っ張ろうとしています。これで約4〜5時間作業します。ACC。コードへの画像は次のようになります

ここに画像の説明を入力

しかし、それはこのように見えます。

ここに画像の説明を入力

何が間違っていると思いますか!! 何か助けていただければ幸いです??

コードに従って、画像は上に配置する必要があります（上から0px）。しかし、画像は常にビューの一番下にあり、一番上に固執しません... ??

- - - - - - - - - - - - -編集 - - - - - - - - - - - - ---

静的 JPG 画像をチェックするようにコードを編集しました

リソースディレクトリの画像についても同じです

この質問を確認してくださいdeveloper.appcelerator.com/question

コード

var win = Ti.UI.createWindow({
    navBarHidden : true,
    className : 'window',
    backgroundColor : "#efefef"
});

var my_container = Ti.UI.createView({
    height : 325,
    width : 303,
    top : 30,
    backgroundColor : "#cac",
    layout : "horizontal"
});
var my_image = Ti.UI.createImageView({
    width : '100%',
    top : 0,
    left : 0,
    right : 0,
    image : 'hello.jpg'
});

my_container.add(my_image);
win.add(my_container);

my_container.addEventListener('click', function() {
    my_image.top = my_image.top - 25;
})

win.addEventListener('click', function() {
    my_image.top = my_image.top + 5;
})
win.open();

および使用する画像の画像 URL。

4

1 に答える 1

1

問題はレイアウト プロパティではなく、画像のスケーリングです! 最初に、ビューよりも大きな画像を渡していることに注意してください。そのため、Titanium はシートの下でスケーリングを行います。

したがって、その幅を定義するときに、ImageView渡す画像がビューよりも大きい場合、Titanium は独自のメカニズムを使用してそれをスケーリングします。数日。画像を下から上に拡大して、奇妙な問題を引き起こしていると思います。

これを修正するには、Titanium から画像のスケーリングを制御し、サイズ変更された新しい画像を渡す必要があります。

これを行うには、画像の元の高さと幅を取得して縦横比を維持し、新しいサイズを見つけて画像のサイズを変更し、それを imageView に渡す必要があります。

画像の高さと幅を取得するには、少しハックする必要があります。SDK 2.1.1.GA で行った方法は次のとおりです。

ブロブ/画像の高さと幅を取得する

// Load the image as a blob to get height information
var imageFile = Ti.Filesystem.getFile('hello.png');
var blobOfImage = imageFile.read();

// Put it in a imageView, since It wont let me get height from a blob for some reason
var imageView1 = Titanium.UI.createImageView({
    image: blobOfImage,
    width: 'auto',
    height: 'auto',
});

// This is the important part, toImage this view and you get the height and width of this image
// For some reason we cant get this from a Blob in SDK 2.1.1.GA
var heightOfImage = imageView1.toImage().height;
var widthOfImage = imageView1.toImage().width;

ここで、幅の縦横比を計算します (iPhone の画面サイズは 320)。

アスペクト比

var aspectRatio =  heightOfImage / widthOfImage;

これで、イメージビューでサイズ変更された新しいイメージを作成できます。

新しいイメージ！

var my_container = Ti.UI.createView({
    height : 325,
    width : 303,
    top : 30,
    backgroundColor : "#cac",
    layout : "horizontal"
});
var my_image = Ti.UI.createImageView({
    top : 0,
    left : 0,
    right : 0,
    image : blobOfImage.imageAsResized(320, 320*aspectRatio) // Note the resize call to the image blob
});

最終的な出力は次のとおりです。

スクリーンショット

したがって、教訓は、Titanium が画像をスケーリングすることを信用してはならないということだと思います。

于 2012-08-14T15:40:58.950 に答える