iOS星级评价的两种实现方式

Posted 2023-04-16

参考技术A 如何在 ios 应用上用自定义视图实现星级评分功能呢？最近研究学习了两个实现方法，现总结如下：

参考 Ray Wenderlich 系列教程：

UIView Tutorial for iOS: How To Make a Custom UIView in iOS 5: A 5 Star Rating View

视图的层级比较简单，一个自定义 UIView 子类对象，上面添加了 5 个星星图片对象，即 UIImageView 对象。

评分值修改时，我们需要遍历这5个 UIImageView 对象，并对他们的图片进行相应的更改。

讲解一下大概的实现思路，具体内容可以参考源码： GitHub

参考 @XHJCoder 的源码：

：【iOS】实现星级评分

我对源码 fork 并进行了一些修改： XHStarRateView

下面是视图的层级结构：

仿淘宝实现多行星级评价

最近再做一个评价功能，当时首先想到的是淘宝的评价功能，感觉那个不错，由于是初学者所以还不是很会，于是在网上百度了一下，我发现网上的都是只有一行星级评价功能，所以我在他

<script type="text/javascript" >
    var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}
var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}
function stopDefault( e ) {
     if ( e && e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
} 

var Stars = Class.create();
Stars.prototype = {
    initialize: function(star,options) {
        this.SetOptions(options); //默认属性
        var flag = 999; //定义全局指针
        var isIE = (document.all) ? true : false; //IE?
        var starlist = document.getElementById(star).getElementsByTagName(‘a‘); //星星列表
        var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
        var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
        var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
        var tipsTxt = this.options.tipsTxt; // 定义提示文案
        var len = starlist.length; //星星数量
        

        for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
            starlist[i].value = i;
            starlist[i].onclick = function(e){
                stopDefault(e);
                this.className = this.className + nowClass;
                flag = this.value;
                input.value = this.getAttribute("star:value");
                tips.innerHTML = tipsTxt[this.value]
            }
            starlist[i].onmouseover = function(){
                if (flag< 999){
                    var reg = RegExp(nowClass,"g");
                    starlist[flag].className = starlist[flag].className.replace(reg,"")
                }
            }
            starlist[i].onmouseout = function(){
                if (flag< 999){
                    starlist[flag].className = starlist[flag].className + nowClass;
                }
            }
        };
        if (isIE){ //FIX IE下样式错误
            var li = document.getElementById(star).getElementsByTagName(‘li‘);
            for (var i = 0, len = li.length; i < len; i++) {
                var c = li[i];
                if (c) {
                    c.className = c.getElementsByTagName(‘a‘)[0].className;
                }
            }
        }
    },
    //设置默认属性
    SetOptions: function(options) {
        this.options = {//默认值
            Input:          "",//设置触保存分数的INPUT
            Tips:           "",//设置提示文案容器
            nowClass:   "current-rating",//选中的样式名
            tipsTxt:        ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
        };
        Extend(this.options, options || {});
    }
}
var Stars1 = new Stars("stars1")
var Stars2 = new Stars("stars2")
var Stars3 = new Stars("stars3")
var Stars4 = new Stars("stars4")