Question

我正在使用Titanium框架构建iPhone应用程序。我需要在我的应用中使用5星评级控件，就像在应用商店中找到的那样。作为临时解决方案，我正在使用滑块添加评级。我在网上找到的大多数例子都是客观的C.有人可以指导我使用钛来实现这一目标。

此致

Answer 1

您只需创建一个view并使用您想要的按钮数填充它，然后为其分配点击事件。

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)即可执行上述注释中的两个选项之一。请注意，您需要使用stars[i]或某种类型的定位将left添加到视图中，该定位会根据可用的星数增加。希望这会有所帮助。

Answer 2

Appcelerator制作了一个包含星级评分系统的自定义ui帖子。

守则： https://github.com/appcelerator-developer-relations/Forging-Titanium/tree/master/ep-003

视频： http://vimeopro.com/appcelerator/forging-titanium/video/28122504

Answer 3

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

Answer 4

您是否可以在Titanium内置应用程序中使用Objective-C代码？ Titanium用于构建本机应用程序......或者你想知道如何在Javascript中编写这样的东西吗？

Answer 5

简单地说，您可以在此测试（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

我希望能帮到你

Answer 6

可能会帮助您创建简单的星级评分

    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 个答案: