如何使用Titanium为iPhone应用程序创建星级评定控件？

您只需要创建一个“ 0”并在其中填充所需的按钮数量，然后为它们分配一个点击事件即可。

var rateView = Ti.UI.createView(),
    max = 5, min = 1; // used in the flexMin and flexMax

function rate(v) {
    // rate code storage goes here
    // your choice on if you want to have separate images of each rating or run a loop
    // based on the value passed in to change a set number of stars to their alternate 
    // image
}

var flexMin = Ti.UI.createButton({
    systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE,
    top: 0, left: 0,
    height:  rateView.height
});

flexMin.addEventListener(\'click\', function(e) {
    rate(min);
});

var flexMax  = Ti.UI.createButton({
    systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
    top: 0, right: 0,
    height:  rateView.height
});

flexMax.addEventListener(\'click\', function(e) {
    rate(max);
});

rateView.add(flexMin);
rateView.add(flexMax); 

var stars = [];
for(var i=1;i<max;i++) {
    stars[i] = Ti.UI.createButton({
        // styling including the darker or light colored stars you choose,
        \'rating\': i
    });
    stars[i].addEventListener(\'click\', function(e) {
        rate(e.source.i);
    });   
}

使用上面的逻辑方法，您应该可以更改max来设置所需的星数，并且只需将rate(v)设置为上述注释中的两个选项之一即可。请记住，您需要在视图中添加ѭ5或添加ѭ5或某些类型的位置，该位置会根据可用星数增加。希望这可以帮助。

裸雷胜檀哭

Appcelerator制作了一个自定义ui发布，其中包括星级评分系统。代码： https://github.com/appcelerator-developer-relations/Forging-Titanium/tree/master/ep-003 视频： http://vimeopro.com/appcelerator/forging-titanium/video/28122504

吞睫素

这是示例代码https://github.com/dlinsin/DLStarRating

焙恍挝厂熄

您不能在Titanium构建的应用程序中使用Objective-C代码吗？ Titanium用于构建本机应用程序...还是您想知道如何用Javascript编写类似的东西？

抚驰

只需您可以在Android（IOS）上对此进行测试

var stars = [];
var ratingValue;

   var rateView = Ti.UI.createView({
    layout : \'horizontal\',
    height : \'30%\',
    width : \'auto\',
});

for (var i = 0; i < 5; i++) {
    var starImg = Ti.UI.createImageView({
        image : starOffImgSrc,
        height : 26,
        width : \'auto\',
    });
    starImg.rating = i + 1;
    starImg.addEventListener(\'click\', function(e) {
        ratingValue = e.source.rating;
        for (var r = 0; r < 5; r++) {
            if (r < e.source.rating) {
                stars[r].image = starOnImgSrc;
            } else {
                stars[r].image = starOffImgSrc;
            }
        }
    });

    stars.push(starImg);
    rateView.add(starImg);
}
    var submitRateBtn = Ti.UI.createButton({
    title : \"Submit Rate\",
    height : \'auto\',
    width : \'auto\'
});

    win.add(rateView);
win.add(submitRateBtn);

submitRateBtn.addEventListener(\'click\', function(e) {
    alert(ratingValue);
});

假设您需要5颗星进行评级，并且您的星像高度和宽度= 26 希望对你有帮助

枫湃揩乾纲

也许这将帮助您创建简单的星级

    var StarWinView = Ti.UI.createView({
        width : \"80%\",
        height : \"35%\",
        backgroundColor : \"#FFF\",
        // layout:\"vertical\",
        borderRadius : 10,
        borderWidth:2,
        borderColor : \"#00968A\"

    });

    var StarLabel = Ti.UI.createLabel({
        top : \"10dp\",
        text : \"Rate the Camp\",
        color : \"#00968A\",
        font : {
            fontSize : 18,
            fontWeight:\"bold\"
        }
    });

    StarWinView.add(StarLabel);

    var StrBtnView = Ti.UI.createButton({

        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        backgroundColor : \"#FFF\",
        layout : \"vertical\",
        // top:\"20%\",

    });

    var StarView = Ti.UI.createView({
        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        backgroundColor : \"#FFF\",
        layout : \"horizontal\"
    });

    var BTN1 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",
        height : \"30dp\",
        width : \"30dp\",

    });
    StarView.add(BTN1);

    var BTN2 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",
        height : \"30dp\",
        width : \"30dp\",

    });
    StarView.add(BTN2);

    var BTN3 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",
        // backgroundColor:\"#000\",
        height : \"30dp\",
        width : \"30dp\",

    });
    StarView.add(BTN3);

    var BTN4 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",
        height : \"30dp\",
        width : \"30dp\",

    });
    StarView.add(BTN4);

    var BTN5 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",
        height : \"30dp\",
        width : \"30dp\",

    });
    StarView.add(BTN5);

    StrBtnView.add(StarView);

    var ButtonView = Ti.UI.createView({
        top:\"30dp\",
        width : \"170dp\",
        height : \"35dp\",
        backgroundColor : \"transparent\"
    });

    var SubmitBTN = Ti.UI.createButton({
        left : \"0dp\",
        height : \"100%\",
        width : \"45%\",
        backgroundColor : \"00968A\",
        title : \"Rate\",
        borderRadius:5,
        font : {
            fontSize : 12
        },
        color : \"#FFF\"

    });
    ButtonView.add(SubmitBTN);

    var NotNowBTN = Ti.UI.createButton({
        right : \"0dp\",
        height : \"100%\",
        width : \"45%\",
        backgroundColor : \"00968A\",
        title : \"Not Now\",
        borderRadius:5,
        font : {
            fontSize : 12
        },
        color : \"#FFF\"

    });
    ButtonView.add(NotNowBTN);

    StrBtnView.add(ButtonView);

    StarWinView.add(StrBtnView);

    $.StarPopUp.add(StarWinView);

    var rating = 5;
    BTN1.addEventListener(\'click\', function() {

        rating = 1;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/BlankStar.png\";
        BTN3.backgroundImage = \"/images/BlankStar.png\";
        BTN4.backgroundImage = \"/images/BlankStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN2.addEventListener(\'click\', function() {

        rating = 2;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/BlankStar.png\";
        BTN4.backgroundImage = \"/images/BlankStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN3.addEventListener(\'click\', function() {

        rating = 3;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/FilledStar.png\";
        BTN4.backgroundImage = \"/images/BlankStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN4.addEventListener(\'click\', function() {

        rating = 4;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/FilledStar.png\";
        BTN4.backgroundImage = \"/images/FilledStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN5.addEventListener(\'click\', function() {

        rating = 5;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/FilledStar.png\";
        BTN4.backgroundImage = \"/images/FilledStar.png\";
        BTN5.backgroundImage = \"/images/FilledStar.png\";
    });

    SubmitBTN.addEventListener(\'click\', function() {
        Ti.API.info(\'rating == \' +rating);
        $.StarPopUp.close();

        if (rating == 1) {
            Alloy.Globals.starRating.image = \"/images/1star.png\";
        } else if (rating == 2) {
            Alloy.Globals.starRating.image = \"/images/2star.png\";
        } else if (rating == 3) {
            Alloy.Globals.starRating.image = \"/images/3star.png\";
        } else if (rating == 4) {
            Alloy.Globals.starRating.image = \"/images/4star.png\";
        } else if (rating == 5) {
            Alloy.Globals.starRating.image = \"/images/5star.png\";
        }
    });

    NotNowBTN.addEventListener(\'click\', function() {
        $.StarPopUp.close();
    });

如何使用Titanium为iPhone应用程序创建星级评定控件？

6 个回复

发起人

titanium

appcelerator_mobile

iphone

问题状态

如何使用Titanium为iPhone应用程序创建星级评定控件？

与内容相关的链接

6 个回复

发起人

titanium

appcelerator_mobile

iphone

问题状态