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

Question

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

问候

Answer 1

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

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) 来执行以下两个选项之一上面的评论。请记住，您需要使用 left 或某种类型的定位将 stars[i] 添加到视图中，该定位会根据可用星星的数量递增。希望这有帮助。

Answer 2

Appcelerator 制作了一个自定义用户界面帖子，其中包括星级评级系统。

代码：
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();
    });