仿汽車之家價格區間選擇控制項

仿照汽車之家ios客戶端「找車」欄目的**區間選擇控制項，最終實現效果如下：

*根據螢幕大小以及刻度的大小，巨集定義需要用到的一些值

#define screenw [uiscreen mainscreen].bounds.size.width
#define screenh [uiscreen mainscreen].bounds.size.height
#define pricebgw  271.0
#define pricebgh  21.0
#define pricebgx (screenw - pricebgw)*0.5
#define pricebgy (screenh - pricebgh)*0.5
#define pricemax (screenw*0.5 + pricebgw*0.44)
#define pricemin (screenw*0.5 - pricebgw*0.45)
#define node1  (pricebgx + 103)

專案中用了兩張，一張是刻度圖（紫色框中的uiimageview,命名為[email protected]），一張是把手圖（兩個紅色框內分別有乙個uiimageview，命名為[email protected]），藍色框內的進度條，使用乙個uiview來實現，而使用uilabel來顯示使用者選擇的數值範圍。

我們把介面實現的**寫到乙個函式中，函式名為setupview，並在viewdidload中呼叫。

為了響應使用者的拖動手勢，給兩個把手（uiimageview）分別新增滑動手勢識別（uipangesturerecognizer）。我們在setupview中繼續新增如下**

-(void)setupview

實現lefthandmove：和righthandmove：方法，處理滑動事件：

-(void)lefthandmove:(uipangesturerecognizer *)panelse if (x< pricebgx )
lefthandimageview.center = cgpointmake(ceilf(x), lefthandimageview.center.y);
[pan settranslation:cgpointzero inview:self.view];
}

-(void)righthandmove:(uipangesturerecognizer *)panelse if (x在lefthandmove：方法中，我們使用translationinview函式，得到在指定的view座標系中的改變值point，將原來的x座標值加上改變的值後，若超出符合要求的刻度範圍，我們要設定其為邊界值，然後再更新把手的位置，否則直接更新即可。righthandmove:同理實現。嘗試執行專案並拖動把手，現在把手的位置可以水平拖動了，但是uilabel還沒有顯示我們選中的範圍，藍色進度條也沒隨之改變。 float leftvalue; float rightvalue;

在viewdidload中初始化

- (void)viewdidload

然後在lefthandmove：和righthandmove：中將使用者選中的值分別賦值給leftvalue和rightvalue。

-(void)lefthandmove:(uipangesturerecognizer *)pan

現在，我們寫乙個更新數值和進度條的函式，函式名為updatedata。

-(void)updatedata

我們再一次執行程式，滑動手柄，數值雖然改變了，但並不是我們想要的**數值！！

這是因為螢幕的座標和刻度圖的座標範圍並不一致，因此我們需要將資料處理一下。可能你已經發現，刻度圖中的範圍並不是均勻分布的，而是分成三段：0~25、25~40、40~100。因此我們在處理時需要分段處理。

我們寫乙個將左邊轉換為**的轉換函式：

//座標->**
-(cgfloat)x2price:(cgfloat)x
//5~25
else if (x < pricebgx + 133)
//25~40
else if (x < pricebgx +  163)
//40~100
else if (x < pricebgx + 253)
//100+
else
return price;
}

將lefthandmove:中的leftvalue = x；修改為如下

-(void)lefthandmove:(uipangesturerecognizer *)pan

同理righthandmove:也做相應處理。重新執行程式，滑動把手，顯示的**數值正是我們所期望的。

我們還要更新藍色進度條，只需修改它的frame即可：

-(void)updatedata

當將右邊的把手一直往左滑動，它將滑到左邊把手的左邊，也就是使用者選擇的區間中，上界值比下界值更小了！這並不是我們期望的結果。我們希望上界至少要比下界大1個單位，所以當使用者滑動右把手到上界比下界小於等於1時，左把手也要跟著滑動，與右把手始終保持1個單位。

我們在righthandmove:函式中新增如下**：

-(void)righthandmove:(uipangesturerecognizer *)pan
}

同理在lefthandmove:函式中新增對應**：

-(void)lefthandmove:(uipangesturerecognizer *)pan
}

注意到函式中用到了方法price2x:，這個函式是將**轉換為對應的x座標，作用於前面用到的x2price：剛好相反。

//**->座標
-(cgfloat)price2x:(cgfloat)price
//5~25
else if (price >= 5 && price < 25) 
//25~40
else if (price >= 25 && price <40) 
//40~100
else if (price >=40 && price <100)else if(price >= 100)
return x;
}

執行程式，現在已經不能將右把手拖動到左把手的前面的吧~

仿汽車之家價格區間選擇控制項

RCurl汽車之家抓取

爬取汽車之家

scrapy獲取汽車之家資料

仿汽車之家 價格區間選擇控制項

RCurl汽車之家抓取

爬取汽車之家

scrapy獲取汽車之家資料

相關推薦

仿汽車之家價格區間選擇控制項