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

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