1

写真をさらにクリックするとiPhoneでポップアップする画面をチタンで模倣しようとしています. 「モーダルウィンドウ」だと思います。今のところ、いくつかのボタンのみを備えたモーダル ウィンドウを作成してみました。後でアイコンを紹介します。しかし、モーダル ウィンドウが画面全体を占めており、サイズを変更しようとしましたが、うまくいきませんでした。左のような画面を再現する方法についてのアドバイスは、 http://9to5mac.files で大歓迎です。 wordpress.com/2012/08/screen-shot-2012-08-09-at-12-24-18-pm.png これに似たものをAndroidでも再現してみたいと思います。私の元のコードは次のとおりです。

var ModalWindow = Ti.UI.createWindow({
            title:'modal window',
            backgroundColor:'black',
            height: "80%",
            width: '200dp'
        });

        var PlayStoreBtn= Titanium.UI.createButton({
            title: 'Play Store',
            top: '10%'
        });

        var youTubeBtn= Titanium.UI.createButton({
            title: 'YouTube',
            top: '20%'
        });

        var facebookBtn= Titanium.UI.createButton({
            title: 'Facebook',
            top: '30%'
        });

        var mySpaceBtn= Titanium.UI.createButton({
            title: 'MySpace',
            top: '40%'
        });

        var twitterBtn= Titanium.UI.createButton({
            title: 'Twitter',
            top: '50%'
        });


        var deleteBtn= Titanium.UI.createButton({
            title: 'Delete',
            top: '60%'
        });

        var cancelBtn= Titanium.UI.createButton({
            title: 'Cancel',
            top: '70%'
        });

        cancelBtn.addEventListener("click", function (e){
            ModalWindow.close();
        })

        ModalWindow.add(PlayStoreBtn);
        ModalWindow.add(youTubeBtn);
        ModalWindow.add(facebookBtn);
        ModalWindow.add(mySpaceBtn);
        ModalWindow.add(twitterBtn);
        ModalWindow.add(deleteBtn);
        ModalWindow.add(cancelBtn);

        ModalWindow.open({modal:true}); 
    });
4

2 に答える 2

2

画面全体を占有しないモーダル ウィンドウを作成するには、Ti.UI.Window コンポーネントを使用しないでください。それらはヘビー級への道です。Ti.UI.View を使用します。

これは、高さの 80 しか占めず、画面の下部にネストされたモーダル ウィンドウを表示するクロスプラットフォーム ビューです。また、モーダルの下にあるすべての入力をブロックします。

module.exports = function() {
    var background = Ti.UI.createView({
        backgroundColor : '#000',
        opacity : 0.4,
        width : Ti.UI.FILL,
        height : Ti.UI.FILL
    });
    var container = Ti.UI.createView({
        width : Ti.UI.FILL,
        height : Ti.UI.FILL
    });
    // This is the view that contains all the buttons and shows up
    // It lays on top of the transparent background
    var modal =Ti.UI.createView({
        width : Ti.UI.FILL,
        height : 80%,
        bottom : 0,
        background : '#555,
        borderColor : '#888',
        borderRadius : 8,
        borderWidth : 8,
        ...More styling, maybe even a background image...
    });

    ...Add your buttons to the modal here...

    container.add(background);
    container.add(modal);
    return container;
};

Modal.js という名前のファイルにあると仮定して、このように使用します。

var Modal = require('Modal');
var modalView = new Modal();
于 2013-09-03T13:15:30.580 に答える
0

これは、アイコンをレイアウトする方法を示すウィジェットのチュートリアルです。 https://wiki.appcelerator.org/display/td/315+-+Using+Alloy+Widgets 下部に完全なコードがあります。

このコードは、複数のビューを表示できるようにビューを切り替える方法を示しているはずです。https://gist.github.com/joacim-boive/1090202

複数のビューのより良い例を見てきましたが、見つけられませんでした

于 2013-09-03T13:16:31.027 に答える