如何使用 Titanium 为 iPhone 应用程序创建星级控制？答案

【问题标题】：How to create a star rating control for an iPhone app using Titanium?如何使用 Titanium 为 iPhone 应用程序创建星级控制？
【发布时间】：2011-05-23 05:49:48
【问题描述】：

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

问候

【问题讨论】：

标签： iphone titanium appcelerator-mobile

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

【讨论】：

非常感谢@brian。这正是我一直在寻找的。你的解决方案就像一个魅力:)

【解决方案2】：

Appcelerator 制作了一个自定义 ui 发布，其中包含星级评分系统。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

感谢 Rony，但示例在 Objective C 中。我正在寻找一些指针来使用 Titanium 框架构建它。无论如何，我会尝试从上面的示例中查看逻辑。

【解决方案4】：

您不能在 Titanium 构建的应用程序中使用 Objective-C 代码片段吗？ Titanium 用于构建原生应用程序......或者你想知道如何用 Javascript 编写类似的东西吗？

【讨论】：

在钛金属应用程序中使用 Objective-C 代码似乎不是那么简单。我更喜欢Javascript中的解决方案。但这也是一个不错的选择。我会试一试。谢谢。

【解决方案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

希望能帮到你

【讨论】：

【解决方案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();
    });

【讨论】：

您可以将第一行作为纯文本移出代码块。为什么要发布评论行 // var args... 和 // var StarPopUp =...。它们与解决方案相关吗？
对不起，但我在编码时写了，所以忽略它......这与解决方案无关......