訂單評價五顆星實現(xiàn)

大體思路:
1.創(chuàng)建5個imageview旗闽,每個加上灰色星星圖片(代表未選中)

2.1.手指滑動:手指在VC滑動時獲取手指位置锦募,判斷手指位置在第幾個星星處,獲取星星個數(shù)柏锄,把手指前邊的圖片賦上黃色星星圖片(代表選中)坪仇;
2.2.點擊結(jié)束時判斷點擊位置杂腰,前邊所有圖片賦值黃色星星,獲取星星個數(shù)椅文。

在展示評價頁面同理喂很,根據(jù)評價的分數(shù)給展示星星的imageview重新設置圖片。

2017年2月18日更新

Simulator Screen Shot 2017年2月18日 下午7.01.32.png

更新內(nèi)容:簡化代碼雾袱、分離出view恤筛,可直接使用官还。
Coding上Demo地址

EvaluateView中主要代碼

#import "EvaluateView.h"

@implementation EvaluateView

- (instancetype)initWithFrame:(CGRect)frame count:(int)count
{
    self = [super initWithFrame:frame];
    
    if (self)
    {
        [self createStarsWithCounts:count];
    }
    
    return self;
}

/**
 創(chuàng)建星星的imageview
 */
- (void)createStarsWithCounts:(int)counts
{
    //計算左右間距
    CGFloat left = 20;
    CGFloat middle = 10;
    CGFloat width = (self.frame.size.width-2*left-middle*(counts-1))/counts;
    self.imgWidth = width;
    
    for (int i = 0; i < counts; i ++)
    {
        UIImageView *imgView = [[UIImageView alloc] initWithImage:UnSelectedImg];
        imgView.tag = i;
        [imgView setFrame:CGRectMake(left+i*width, left, width, width)];
        [self addSubview:imgView];
    }
}

/**
 手指滑動時判選中第幾個星星
 */
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CGPoint point = [[touches anyObject] locationInView:self];
    int x = point.x;
    int y = point.y;
    
    if (y >= 20 && y <= self.imgWidth + 20)     //Y在星星同一行
    {
        if (x > 20 && x < self.frame.size.width - 20)   //在星星范圍內(nèi)
        {
            self.count = (x - 20) / (self.imgWidth + 10) + 1;
            
            [self refreshUI];
        }
    }
}

/**
 點擊結(jié)束時判斷選擇的星星位置
 */
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CGPoint point = [[touches anyObject] locationInView:self];
    int x = point.x;
    int y = point.y;
    
    if (y >= 20 && y <= self.imgWidth + 20)     //Y在星星同一行
    {
        if (x > 20 && x < self.frame.size.width - 20)   //在星星范圍內(nèi)
        {
            self.count = (x - 20) / (self.imgWidth + 10) + 1;
            
            [self refreshUI];
        }
    }
}

/**
 根據(jù)選中星星數(shù)重新展示圖片
 */
- (void)refreshUI
{
    //回調(diào)選中星星結(jié)果給VC
    if ([self.delegate respondsToSelector:@selector(selectedStras:)])
    {
        [self.delegate selectedStras:self.count];
    }
    
    for (UIImageView *imgView in self.subviews)
    {
        if (imgView.tag < self.count)
        {
            [imgView setImage:SelectedImg];
        }
        else
        {
            [imgView setImage:UnSelectedImg];
        }
    }
}

@end

以下是老代碼芹橡,方便理解,但是質(zhì)量不是很好望伦。林说。。

1)滑動選擇星星觸發(fā)方法

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CGPoint point = [[touches anyObject] locationInView:self.view];
    int x = point.x;
    int y = point.y;

    if (y >= 206 && y <= 246)   //第一個星星的坐標范圍
    {
        if (x >= MWIDTH/2-120 && x <= MWIDTH/2 - 80)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.unSelectedImage];
            [self.imageView3 setImage:self.unSelectedImage];
            [self.imageView4 setImage:self.unSelectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"1";
        }
        else if (x > MWIDTH/2 - 70 && x <= MWIDTH/2 - 30)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.unSelectedImage];
            [self.imageView4 setImage:self.unSelectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"2";
        }
        else if (x > MWIDTH/2 - 20 && x <= MWIDTH/2 + 20)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.selectedImage];
            [self.imageView4 setImage:self.unSelectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"3";
        }
        else if (x > MWIDTH/2 + 30 && x <= MWIDTH/2 + 70)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.selectedImage];
            [self.imageView4 setImage:self.selectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"4";
        }
        else if (x > MWIDTH/2 + 80 && x <= MWIDTH/2 + 120)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.selectedImage];
            [self.imageView4 setImage:self.selectedImage];
            [self.imageView5 setImage:self.selectedImage];
            self.ranking = @"5";
        }
    }
}

2)直接點擊星星觸發(fā)方法

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{    
    CGPoint point = [[touches anyObject] locationInView:self.view];
    int x = point.x;
    int y = point.y;

    if (y >= 206 && y <= 246)   //第一個星星的坐標范圍
    {
        if (x >= MWIDTH/2-120 && x <= MWIDTH/2 - 80)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.unSelectedImage];
            [self.imageView3 setImage:self.unSelectedImage];
            [self.imageView4 setImage:self.unSelectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"1";
        }
        else if (x > MWIDTH/2 - 70 && x <= MWIDTH/2 - 30)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.unSelectedImage];
            [self.imageView4 setImage:self.unSelectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"2";
        }
        else if (x > MWIDTH/2 - 20 && x <= MWIDTH/2 + 20)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.selectedImage];
            [self.imageView4 setImage:self.unSelectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"3";
        }
        else if (x > MWIDTH/2 + 30 && x <= MWIDTH/2 + 70)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.selectedImage];
            [self.imageView4 setImage:self.selectedImage];
            [self.imageView5 setImage:self.unSelectedImage];
            self.ranking = @"4";
        }
        else if (x > MWIDTH/2 + 80 && x <= MWIDTH/2 + 120)
        {
            [self.imageView1 setImage:self.selectedImage];
            [self.imageView2 setImage:self.selectedImage];
            [self.imageView3 setImage:self.selectedImage];
            [self.imageView4 setImage:self.selectedImage];
            [self.imageView5 setImage:self.selectedImage];
            self.ranking = @"5";
        }
    }
}
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末屯伞,一起剝皮案震驚了整個濱河市腿箩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌劣摇,老刑警劉巖珠移,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異末融,居然都是意外死亡钧惧,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門勾习,熙熙樓的掌柜王于貴愁眉苦臉地迎上來浓瞪,“玉大人,你說我怎么就攤上這事巧婶∏洌” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵艺栈,是天一觀的道長英岭。 經(jīng)常有香客問我,道長湿右,這世上最難降的妖魔是什么巴席? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮诅需,結(jié)果婚禮上漾唉,老公的妹妹穿的比我還像新娘荧库。我一直安慰自己,他們只是感情好赵刑,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布分衫。 她就那樣靜靜地躺著,像睡著了一般般此。 火紅的嫁衣襯著肌膚如雪蚪战。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天铐懊,我揣著相機與錄音邀桑,去河邊找鬼。 笑死科乎,一個胖子當著我的面吹牛壁畸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播茅茂,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼捏萍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了空闲?” 一聲冷哼從身側(cè)響起令杈,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎碴倾,沒想到半個月后逗噩,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡跌榔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年异雁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片矫户。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡片迅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出皆辽,到底是詐尸還是另有隱情柑蛇,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布驱闷,位于F島的核電站耻台,受9級特大地震影響抡笼,放射性物質(zhì)發(fā)生泄漏夹姥。R本人自食惡果不足惜苏章,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望颖杏。 院中可真熱鬧奈梳,春花似錦左腔、人聲如沸铃剔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽墨坚。三九已至,卻和暖如春映挂,著一層夾襖步出監(jiān)牢的瞬間泽篮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工柑船, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留帽撑,地道東北人。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓鞍时,卻偏偏與公主長得像亏拉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子寸癌,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,190評論 25 707
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫专筷、插件弱贼、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,109評論 4 62
  • 剛下班吮旅,餓了兩個小時狂吃一頓溪烤,一小時后再跑步,在此之前碼碼字庇勃! 眾所周知檬嘀,現(xiàn)在工作壓力不小,生活壓力也不小责嚷,各行各...
    大周同學666閱讀 387評論 2 0
  • 哪座城沒有高樓大廈鸳兽,哪座城沒有人來人往,哪座城沒有街鋪成群罕拂,哪座城沒有廠房林立揍异,哪座城沒有窮人富人,哪座城沒有車流...
    小丫要變小e閱讀 184評論 0 0