0

私はtableViewRowにいくつかのデータを表示する単純なテーブルビューアプリケーションを作成します..今のところ、固定測定のみを使用しますここに私のコードがあります:

    function addTableView(){
        var tableData = [];
        
        for (var i = 0; i<10; i++){
            var row = Ti.UI.createTableViewRow({
                className:'forumEvent', // used to improve table performance
                rowIndex:i, // custom property, useful for determining the row during events
                selectionStyle:0,
            });
            
            var checkBox = Ti.UI.createSwitch({
                style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
                value:false,
                left:5
            }); 
            
            var lblField = Ti.UI.createLabel({
                realValue: 'Value',
                text:'Field : Value',
                font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
                color:'#222',
                top:5,
                left:80
            });
            
            var lblField2 = Ti.UI.createLabel({
                realValue: 'Value',
                text:'Field : Value',
                font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
                color:'#222',
                top:35,
                left:80
            });
            
            var lblField3 = Ti.UI.createLabel({
                realValue: 'Value',
                text:'Field : Value',
                font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
                color:'#222',
                top:65,
                left:80
            });
            
            row.add(checkBox);
            row.add(lblField);
            row.add(lblField2);
            row.add(lblField3);
            
            checkBox.addEventListener('click',function(e){
                alert(checkBox.toImage().width);
            });
            
            tableData.push(row);
        }
        
        var tempTable =  Titanium.UI.createTableView({
            data:tableData,
            editable: Titanium.Platform.osname === 'iphone' ? true : false,
            name:'Picking table'
        });
                
        return tempTable;
    }

大きな画面では、次のように完全に表示できます。 HVGA レイアウト

しかし、エミュレータの画面を QVGA に変更すると、次のように以前のように表示できなくなります。 QVGA レイアウト

相対的なレイアウトを作成する方法を知っている人はいますか?小さな画面と大きな画面の両方で完全に表示できますか? 前にありがとう..

4

5 に答える 5

1

マイケル、次のリンクを見てください、それはあなたにも役立つかもしれません

  1. さまざまな解像度を処理するチタン
  2. http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html
  3. https://wiki.appcelerator.org/display/guides/Titanium+2.0+Layout+Changes
于 2012-11-14T04:38:45.440 に答える
1

パーセントを使用すると、間違いなく役立ちます。ただし、レイアウト プロパティを調べる必要があります。 http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.View-property-layout

行に layout:'horizo​​ntal' プロパティを追加できます

        var row = Ti.UI.createTableViewRow({
            className:'forumEvent', // used to improve table performance
            rowIndex:i, // custom property, useful for determining the row during events
            selectionStyle:0,
            layout:'horizontal'
        });

このプロパティを設定すると、オブジェクトは左から右にすぐ隣り合ってスタックされます。

次に、3 つのラベルを、layout:'vertical' と、パディングを考慮して小さい left プロパティを使用してコンテナーに配置します。また、左のプロパティをラベルから削除します (これは親コンテナーによってすべて処理されます)。

        var labelContainer = Ti.UI.createView({
            layout:'vertical',
            height:Ti.UI.SIZE,
            width:Ti.UI.SIZE,
            left:5 //adjust this accordingly
        })

        var lblField = Ti.UI.createLabel({
            realValue: 'Value',
            text:'Field : Value',
            font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
            color:'#222',
            top:5,

        });

        var lblField2 = Ti.UI.createLabel({
            realValue: 'Value',
            text:'Field : Value',
            font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
            color:'#222',
            top:5,

        });

        var lblField3 = Ti.UI.createLabel({
            realValue: 'Value',
            text:'Field : Value',
            font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
            color:'#222',
            top:5,

        });

        labelContainer.add()

        row.add(checkBox);
        labelContainer.add(lblField);
        labelContainer.add(lblField2);
        labelContainer.add(lblField3);
        row.add(labelContainer);

行は、チェックボックスのすぐ隣に、ラベル コンテナー全体 (ラベルを上から下に直接積み重ねる) を追加します。TI.UI.SIZE の幅と高さのプロパティは、オブジェクトにその子の幅と高さを強制します。

レイアウト プロパティを TI.UI.SIZE/Ti.UI.FILL (親のサイズを取得) と組み合わせて利用し始めると、レイアウトがはるかに簡単になりました:)これが役立つことを願っています!

于 2012-11-28T06:13:05.060 に答える
0

パーセンテージ値を使用して、コントロールの幅と高さを宣言できます。と同じように

var checkBox = Ti.UI.createSwitch({
    style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
    value:false,
    left:'2%'
}); 

var lblField = Ti.UI.createLabel({
    realValue: 'Value',
    text:'Field : Value',
    font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
    color:'#222',
    top:5,
    left:'40%',
    width :'80%'
});

パーセンテージで測定すると、すべての画面サイズで有効になり、画面サイズに合わせて自動的に調整されます

于 2012-11-12T11:34:01.130 に答える
0

何を扱っているかはわかりませんが、レスポンシブ デザイン手法を使用してレイアウトを非常にうまく変更できます。

このリンクを見てみましょう: http://www.html5rocks.com/en/mobile/responsivedesign/

上手で気の利いた裏技がきっと見つかるはずです。

于 2012-11-12T10:41:09.630 に答える