{"id":212111,"date":"2014-02-10T16:15:03","date_gmt":"2014-02-10T12:15:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=212111"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=212111","title":{"rendered":"<span class=\"post_title\">\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f iOS<\/span>"},"content":{"rendered":"<div class=\"content html_format\">       <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/930\/67a\/c0a\/93067ac0a3cc558d9ac0291c9bb126d0.png\" alt=\"image\"\/><\/p>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e \u0441\u0443\u0442\u0438 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e\u0442 \u0443\u0440\u043e\u043a \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<br \/>  <a name=\"habracut\"><\/a><br \/>  Apple \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043e\u043a\u043e\u043b\u043e 20 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 <code>UITextField<\/code>, <code>UIButton<\/code> \u0438 <code>UISwitch<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u044e \u043c\u043e\u0449\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0447\u0435\u043c-\u0442\u043e, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043b\u0430\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0439\u0441\u044f \u0432 \u043f\u0440\u043e\u0434\u0430\u0436\u0435 \u043d\u0435\u0434\u0432\u0438\u0436\u0438\u043c\u043e\u0441\u0442\u0438. \u041e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u0446\u0435\u043d\u043e\u0432\u043e\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435. \u041a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0430 <code>UISlider<\/code>, \u043e\u0434\u0438\u043d \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0446\u0435\u043d\u0443, \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/41c\/08c\/1d7\/41c08c1d7b4cf30c6e8d0527ad1e137b.png\" alt=\"image\"\/><\/p>\n<p>  \u0425\u043e\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043e\u043d \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0446\u0435\u043d\u043e\u0432\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430. \u0413\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441 \u0434\u0432\u0443\u043c\u044f \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430\u043c\u0438, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u043c\u0438 \u0437\u0430 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/b40\/007\/041\/b400070413361827f5998c4a3c88220d.png\" alt=\"image\"\/><\/p>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u043d \u0437\u0430\u0434\u0430\u0435\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0430 \u043d\u0435 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0435 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u0430\u0431\u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>UIView<\/code>. \u0418 \u0435\u0441\u043b\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0430\u0432\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0431\u044f, \u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u0438\u043b\u0438\u0439. \u0413\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412 \u044d\u0442\u043e\u043c \u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043c\u044b\u0441\u043b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041a\u0430\u043a \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0430\u043c\u0438, \u043e\u043d\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e <code>UIKit Framework<\/code>. \u0422\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u043f\u043e\u0434 \u043b\u044e\u0431\u044b\u0435 \u043d\u0443\u0436\u0434\u044b. \u0417\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0446\u0435\u043b\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>RangeSlider<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0448\u0430\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u0443\u044e \u0432\u044b\u0448\u0435 \u0437\u0430\u0434\u0430\u0447\u0443. \u0411\u0443\u0434\u0443\u0442 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u0442\u044b \u0442\u0430\u043a\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043a\u0430\u043a \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 API \u0438 \u0434\u0430\u0436\u0435 \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u0435\u043e\u0440\u0438\u0438! \u041f\u043e\u0440\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c!<\/p>\n<h4>\u041d\u0430\u0447\u0430\u043b\u043e<\/h4>\n<p>  \u042d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 <b>Xcode<\/b> \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 <b>File -&gt; New -&gt; Project<\/b>. \u0412 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 <b>iOS -&gt; Application -&gt; Single View Application<\/b> \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 <b>Next<\/b>. \u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043c\u0435\u043d\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u0432\u0435\u0434\u0438\u0442\u0435 <b>CERangeSlider<\/b>\u00a0\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/b7f\/33d\/f9a\/b7f33df9ae9d0a0e44de00f990506022.png\" alt=\"image\"\/><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Storyboards \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u044b \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0438\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u0438 \u0432 \u043a\u043e\u0434\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u043f\u043e\u043b\u044f <i>\u00abOrganization Name\u00bb<\/i> \u0438 <i>\u00abCompany Identifier\u00bb<\/i> \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041a\u043e\u0433\u0434\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0435, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 <b>Next<\/b>. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043c\u0435\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 <b>Create<\/b>.<\/p>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u043a\u0430\u043a\u043e\u0439 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c. \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0430\u0441\u0441 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b <code>UIView<\/code>.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <code>Apple UIKit<\/code>, \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435, \u0447\u0442\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>UILabel<\/code> \u0438 <code>UIWebView<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 <code>UIView<\/code>. \u041d\u043e, \u043a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u0435\u0441\u0442\u044c \u0438 \u0442\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 <code>UIControl<\/code>, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/4d6\/720\/21d\/4d672021de1e68103d72d1286196a899.png\" alt=\"image\"\/><\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0421 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0437\u0434\u0435\u0441\u044c: <a href=\"https:\/\/developer.apple.com\/library\/ios\/documentation\/uikit\/reference\/UIKit_Framework\/Introduction\/Introduction.html\">UIKit Framework Reference<\/a>.<\/p><\/blockquote>\n<p>  \u041a\u043b\u0430\u0441\u0441 <code>UIControl<\/code> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d <i>Target-Action<\/i>, \u043f\u043e \u0441\u0443\u0442\u0438 \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0422\u0430\u043a\u0436\u0435 \u0443 <code>UIControl<\/code> \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u0442\u0430\u043a \u0447\u0442\u043e <code>UIControl<\/code> \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u043c.<\/p>\n<p>  \u041a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u0435 <b>CERangeSlider<\/b> \u0432 <b>Project Navigator<\/b> \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 <b>New File<\/b>, \u0437\u0430\u0442\u0435\u043c <b>iOS -&gt; Cocoa Touch -&gt; Objective-C class<\/b> \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 <b>Next<\/b>. \u041d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u043a\u043b\u0430\u0441\u0441 <b>CERangeSlider<\/b>, \u0430 \u0432 \u043f\u043e\u043b\u0435 <i>\u00absubclass of\u00bb<\/i> \u0432\u0432\u0435\u0434\u0438\u0442\u0435 <b>UIControl<\/b>. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 <b>Next<\/b> \u0438 <b>Create<\/b> \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043c\u0435\u0441\u0442\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<p>  \u0425\u043e\u0442\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c, \u0432\u044b \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u0442\u0435\u043c, \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0414\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432\u0430\u0448 \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 <i>View Controller<\/i>.<\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CEViewController.m<\/b> \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"objectivec\">#import &quot;CERangeSlider.h&quot; <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0432 \u044d\u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e:<\/p>\n<pre><code class=\"objectivec\">@implementation CEViewController {     CERangeSlider* _rangeSlider; } <\/code><\/pre>\n<p>  \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>viewDidLoad<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"objectivec\">- (void)viewDidLoad {     [super viewDidLoad];       \/\/ Do any additional setup after loading the view, typically from a nib.       NSUInteger margin = 20;     CGRect sliderFrame = CGRectMake(margin, margin, self.view.frame.size.width - margin * 2, 30);     _rangeSlider = [[CERangeSlider alloc] initWithFrame:sliderFrame];     _rangeSlider.backgroundColor = [UIColor redColor];       [self.view addSubview:_rangeSlider]; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0424\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u0434\u0430\u043d \u043a\u0440\u0430\u0441\u043d\u044b\u043c, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0444\u043e\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0446\u0432\u0435\u0442 \u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c, \u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0434\u043e\u043b\u0433\u043e \u043b\u043e\u043c\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0432\u0443 \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0443\u0434\u0430 \u043e\u043d \u043f\u0440\u043e\u043f\u0430\u043b. :]<\/p>\n<p>  \u0421\u043e\u0431\u0435\u0440\u0438\u0442\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435; \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/ec7\/191\/e6c\/ec7191e6c52161ee3f21136555ad2bda.png\" alt=\"image\"\/><\/p>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0432\u0430\u043c \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0439\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u042d\u0442\u043e \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442 \u0431\u0430\u0437\u043e\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e API.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> API \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c. \u0414\u0430\u043b\u0435\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 API \u2014 \u0430 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0441\u0432\u044f\u0437\u0438!<\/p><\/blockquote>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.h<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u0435\u0436\u0434\u0443 <code>@interface<\/code> \u0438 <code>@end:<\/code><\/p>\n<pre><code class=\"objectivec\">@property (nonatomic) float maximumValue; @property (nonatomic) float minimumValue; @property (nonatomic) float upperValue; @property (nonatomic) float lowerValue; <\/code><\/pre>\n<p>  \u042d\u0442\u0438\u0445 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430, \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043d\u0438\u0436\u043d\u0438\u0439 \u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043f\u043e\u0440\u043e\u0433\u0438.<\/p>\n<p>  \u0425\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0438\u043d\u0430\u0447\u0435 \u043f\u0440\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.m<\/b>, \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>initWithFrame:<\/code>, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <b>XCode<\/b>, \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u0434\u043e\u043c:<\/p>\n<pre><code class=\"objectivec\">- (id)initWithFrame:(CGRect)frame {     self = [super initWithFrame:frame];     if (self) {         \/\/ Initialization code         _maximumValue = 10.0;         _minimumValue = 0.0;         _upperValue = 8.0;         _lowerValue = 2.0;     }     return self; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430\u043c\u0438 \u0438 \u043f\u043e\u043b\u043e\u0441\u043a\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f.<\/p>\n<h4>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f vs. CoreGraphics<\/h4>\n<p>  \u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435:  <\/p>\n<ol>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f,<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u0441\u043b\u043e\u0435\u0432 \u0438 <i>Core Graphics<\/i>.<\/li>\n<\/ol>\n<p>  \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b.<\/p>\n<ul>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u2014 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0435 \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u043c\u0438, \u0442\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>UIImage<\/code>.<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c. \u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0441\u0435, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u2014 \u043d\u043e \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0434 \u0432\u0435\u0441\u044c\u043c\u0430 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e.<\/li>\n<\/ul>\n<p>  \u0417\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 <i>Core Graphics<\/i> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0433\u043e \u043e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0441\u0438\u043b\u0438\u0439. \u041d\u043e \u0437\u0430\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0439 API. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <i>Core Graphics<\/i>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u044e\u0431\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430, \u0442\u043e\u043b\u0449\u0438\u043d\u0443, \u0438\u0441\u043a\u0440\u0438\u0432\u043b\u0435\u043d\u0438\u0435 \u2014 \u0434\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435, \u043b\u044e\u0431\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u043c \u0432\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 <i>Core Graphics<\/i>.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0427\u0442\u043e \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e, Apple \u0432 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043d\u0435 \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p><\/blockquote>\n<p>  \u0412 <b>Xcode<\/b> \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043e\u043a\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0417\u0430\u0442\u0435\u043c \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 <b>Build Phases<\/b> \u0438 \u0441\u0435\u043a\u0446\u0438\u044e <b>Link Binary With Libraries<\/b>. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a <b>QuartzCore.framework<\/b>. \u041a\u043b\u0430\u0441\u0441\u044b \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u0440\u0443\u0447\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <b>QuartzCore.framework<\/b>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0442\u0430\u043b\u0438\u0441\u044c:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/6b8\/a94\/fa3\/6b8a94fa3c9b9482e0f376c0afffc05f.jpg\" alt=\"image\"\/><\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443:<\/p>\n<pre><code class=\"objectivec\">#import &lt;QuartzCore\/QuartzCore.h&gt; <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u044d\u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b, \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 <code>@implementation<\/code>:<\/p>\n<pre><code class=\"objectivec\">@implementation CERangeSlider {     CALayer* _trackLayer;     CALayer* _upperKnobLayer;     CALayer* _lowerKnobLayer;       float _knobWidth;     float _useableTrackLength; } <\/code><\/pre>\n<p>  \u042d\u0442\u0438 \u0442\u0440\u0438 \u0441\u043b\u043e\u044f \u2014 <code>_trackLayer<\/code>, <code>_upperKnobLayer<\/code> \u0438 <code>_lowerKnobLayer<\/code> \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>_knobWidth<\/code> \u0438 <code>_useableTrackLength<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0412 <b>CERangeSlider.m<\/b> \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>initWithFrame:<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0431\u043b\u043e\u043a <code>if (self) { }<\/code>:<\/p>\n<pre><code class=\"objectivec\">_trackLayer = [CALayer layer]; _trackLayer.backgroundColor = [UIColor blueColor].CGColor; [self.layer addSublayer:_trackLayer];   _upperKnobLayer = [CALayer layer]; _upperKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_upperKnobLayer];   _lowerKnobLayer = [CALayer layer]; _lowerKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_lowerKnobLayer];   [self setLayerFrames]; <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0440\u0438 \u0441\u043b\u043e\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445. \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u044d\u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b:<\/p>\n<pre><code class=\"objectivec\">- (void) setLayerFrames {     _trackLayer.frame = CGRectInset(self.bounds, 0, self.bounds.size.height \/ 3.5);     [_trackLayer setNeedsDisplay];       _knobWidth = self.bounds.size.height;     _useableTrackLength = self.bounds.size.width - _knobWidth;       float upperKnobCentre = [self positionForValue:_upperValue];     _upperKnobLayer.frame = CGRectMake(upperKnobCentre - _knobWidth \/ 2, 0, _knobWidth, _knobWidth);       float lowerKnobCentre = [self positionForValue:_lowerValue];     _lowerKnobLayer.frame = CGRectMake(lowerKnobCentre - _knobWidth \/ 2, 0, _knobWidth, _knobWidth);       [_upperKnobLayer setNeedsDisplay];     [_lowerKnobLayer setNeedsDisplay]; }   - (float) positionForValue:(float)value {     return _useableTrackLength * (value - _minimumValue) \/         (_maximumValue - _minimumValue) + (_knobWidth \/ 2); } <\/code><\/pre>\n<p>  <code>setLayerFrames<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u043e\u0432 \u0438 \u043f\u043e\u043b\u043e\u0441\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. <code>positionForValue<\/code> \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u044d\u043a\u0440\u0430\u043d\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044e \u0434\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0421\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443! \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/554\/cd1\/55b\/554cd155b8c30e03cb8f722735381843.png\" alt=\"image\"\/><\/p>\n<p>  \u0425\u043e\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u043b \u0444\u043e\u0440\u043c\u0443, \u0440\u0430\u0431\u043e\u0442\u0430 \u0435\u0449\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u2014 \u0432\u0435\u0434\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c. \u0412 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d. \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u0438 \u0435\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445.<\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>  \u041a\u043e\u0434, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u044e\u0442, \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434. \u041b\u0443\u0447\u0448\u0438\u043c \u043c\u0435\u0441\u0442\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0441\u043b\u043e\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 <b>CERangeSlider<\/b>: <b>New File -&gt; iOS -&gt; Cocoa Touch -&gt; Objective-C class<\/b>, \u0441\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u0441\u0430\u0431\u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>CALayer<\/code> \u0438 \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 <b>CERangeSliderKnobLayer<\/b>.<\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 <b>CERangeSliderKnobLayer.h<\/b> \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n<pre><code class=\"objectivec\">#import &lt;QuartzCore\/QuartzCore.h&gt;   @class CERangeSlider;   @interface CERangeSliderKnobLayer : CALayer   @property BOOL highlighted; @property (weak) CERangeSlider* slider;   @end <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043e\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d \u043b\u0438 \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a, \u0430 \u0434\u0440\u0443\u0433\u043e\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSliderKnobLayer.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 <code>#import<\/code>:<\/p>\n<pre><code class=\"objectivec\">#import &quot;CERangeSliderKnobLayer.h&quot; <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0442\u0438\u043f <code>_upperKnobLayer<\/code> \u0438 <code>_lowerKnobLayer<\/code> \u0432 \u0431\u043b\u043e\u043a\u0435 <code>@implementation<\/code>:<\/p>\n<pre><code class=\"objectivec\">CERangeSliderKnobLayer* _upperKnobLayer; CERangeSliderKnobLayer* _lowerKnobLayer; <\/code><\/pre>\n<p>  \u042d\u0442\u0438 \u0441\u043b\u043e\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <b>CERangeSliderKnobLayer<\/b>.<\/p>\n<p>  \u0412 \u0442\u043e\u043c \u0436\u0435 <b>CERangeSlider.m<\/b> \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>initWithFrame:<\/code> \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u043a\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>upperKnobLayer<\/code> \u0438 <code>lowerKnobLayer<\/code> \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"objectivec\">_upperKnobLayer = [CERangeSliderKnobLayer layer]; _upperKnobLayer.slider = self; _upperKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_upperKnobLayer];   _lowerKnobLayer = [CERangeSliderKnobLayer layer]; _lowerKnobLayer.slider = self; _lowerKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_lowerKnobLayer]; <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u043e\u0435\u0432 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>slider<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>self<\/code>. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u044c\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/636\/43e\/ca8\/63643eca82d93e96a7718a7e671e63ef.png\" alt=\"image\"\/><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u0448\u0438 \u0441\u043b\u043e\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043c\u0435\u0441\u0442\u0435, \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0438.<\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0439<\/h4>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u043e\u0434 \u0431\u043b\u043e\u043a\u043e\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"objectivec\">CGPoint _previousTouchPoint; <\/code><\/pre>\n<p>  \u042d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0439. \u0410 \u043a\u0430\u043a \u0432\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0438 \u043e\u0442\u0436\u0430\u0442\u0438\u044f \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430?<\/p>\n<p>  <code>UIControl<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u0439. \u0421\u0430\u0431\u043a\u043b\u0430\u0441\u0441\u044b <code>UIControl<\/code> \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0432\u043e\u0435\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u0412 \u0432\u0430\u0448\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430: <code>beginTrackingWithTouch<\/code>, <code>continueTrackingWithTouch<\/code> \u0438 <code>endTrackingWithTouch<\/code>.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 <b>CERangeSlider.m<\/b>:<\/p>\n<pre><code class=\"objectivec\">- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {     _previousTouchPoint = [touch locationInView:self];       \/\/ hit test the knob layers     if(CGRectContainsPoint(_lowerKnobLayer.frame, _previousTouchPoint))     {         _lowerKnobLayer.highlighted = YES;         [_lowerKnobLayer setNeedsDisplay];     }     else if(CGRectContainsPoint(_upperKnobLayer.frame, _previousTouchPoint))     {         _upperKnobLayer.highlighted = YES;         [_upperKnobLayer setNeedsDisplay];     }     return _upperKnobLayer.highlighted || _lowerKnobLayer.highlighted; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0434\u043e\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041e\u043d \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0417\u0430\u0442\u0435\u043c \u043e\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a \u0441 \u0446\u0435\u043b\u044c\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0432 \u0440\u0430\u043c\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u0435\u0442\u043e\u0434 \u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u043e \u0442\u043e\u043c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435.<\/p>\n<p>  \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u043e\u0432 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d. \u0412\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 <code>setNeedsDisplay<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043b\u043e\u0438 \u0431\u044b\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u2014 \u0434\u0430\u043b\u0435\u0435 \u0432\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u0430\u043b\u044c\u0446\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 <b>CERangeSlider.m<\/b>:<\/p>\n<pre><code class=\"objectivec\">#define BOUND(VALUE, UPPER, LOWER)\tMIN(MAX(VALUE, LOWER), UPPER)   - (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {     CGPoint touchPoint = [touch locationInView:self];       \/\/ 1. determine by how much the user has dragged     float delta = touchPoint.x - _previousTouchPoint.x;     float valueDelta = (_maximumValue - _minimumValue) * delta \/ _useableTrackLength;       _previousTouchPoint = touchPoint;       \/\/ 2. update the values     if (_lowerKnobLayer.highlighted)     {         _lowerValue += valueDelta;         _lowerValue = BOUND(_lowerValue, _upperValue, _minimumValue);     }     if (_upperKnobLayer.highlighted)     {         _upperValue += valueDelta;         _upperValue = BOUND(_upperValue, _maximumValue, _lowerValue);     }       \/\/ 3. Update the UI state     [CATransaction begin];     [CATransaction setDisableActions:YES] ;       [self setLayerFrames];       [CATransaction commit];       return YES; } <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0437\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u043c:<\/p>\n<ol>\n<li>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0435 <code>delta<\/code> \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u043d\u0443\u0442 \u043f\u0430\u043b\u0435\u0446. \u0417\u0430\u0442\u0435\u043c \u0432\u044b \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u0445 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/li>\n<li>\u0417\u0434\u0435\u0441\u044c \u0432\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0438 \u043d\u0438\u0436\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0443\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u043d\u0443\u043b \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043c\u0430\u043a\u0440\u043e\u0441 <code>BOUND<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u0435\u043d \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u043d\u0435\u0436\u0435\u043b\u0438 <code>MIN\/MAX<\/code>.<\/li>\n<li>\u042d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0444\u043b\u0430\u0433 <code>disabledActions<\/code> \u0432 <code>CATransaction<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0438\u0446 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u043d\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <code>setLayerFrames<\/code>, \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e.<\/li>\n<\/ol>\n<p>  \u0412\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u2014 \u043d\u043e \u0432\u0430\u043c \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 <b>CERangeSlider.m<\/b>:<\/p>\n<pre><code class=\"objectivec\">- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {     _lowerKnobLayer.highlighted = _upperKnobLayer.highlighted = NO;     [_lowerKnobLayer setNeedsDisplay];     [_upperKnobLayer setNeedsDisplay]; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u0430 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 \u0432 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0439\u0442\u0435 \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u043d\u043e\u0432\u044b\u043c \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u043c! \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/7dd\/7dc\/5bc\/7dd7dc5bc298ced516320de041f28081.png\" alt=\"image\"\/><\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u043f\u0430\u043b\u0435\u0446 \u0437\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u0435\u0433\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 \u0438 \u0441\u0442\u0438\u043b\u0443\u0441\u0430\u043c\u0438 \u0441 \u043d\u0438\u0437\u043a\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e (\u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u043e\u043d\u044f\u043b\u0438, \u0442\u043e \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u043f\u0430\u043b\u044c\u0446\u0430\u0445). :]<\/p>\n<h4>\u0423\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445<\/h4>\n<p>  \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0438 \u043d\u0438\u0436\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430. \u041d\u043e \u043a\u0430\u043a \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043c\u043e\u0433\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c? \u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445: <i>NSNotification<\/i>, <i>Key-Value-Observing (KVO)<\/i>, \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0448\u0430\u0431\u043b\u043e\u043d Target-Action \u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <code>UIKit<\/code>, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <i>NSNotification<\/i> \u0438\u043b\u0438 <i>KVO<\/i>, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 <code>UIKit<\/code> \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432. \u0414\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u2014 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 <i>Target-Action<\/i> \u2014 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 <code>UIKit<\/code>.<\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 \u043e\u0431\u043e\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432:<\/p>\n<ul>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439. \u0423 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u043c\u0435\u043d\u0443\u0435\u043c\u043e\u0435 delegate, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 \u043a\u043b\u0430\u0441\u0441, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b. \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 UITableView, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b UITableViewDelegate. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 delegate. \u0414\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/li>\n<li>\u0428\u0430\u0431\u043b\u043e\u043d <i>Target-Action<\/i> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>UIControl<\/code>. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0446\u0435\u043b\u044c <i>(target)<\/i> \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 <i>(action)<\/i>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 enum \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <code>UIControlEvents<\/code>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0446\u0435\u043b\u0435\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0441\u0435\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u0438, \u0445\u043e\u0442\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f (<code>UIControlEventApplicationReserver<\/code>), \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f. \u042d\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u043b\u0438\u0431\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u043d\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<\/ul>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:  <\/p>\n<ul>\n<li>\u0428\u0430\u0431\u043b\u043e\u043d <i>Target-Action<\/i> \u0448\u0438\u0440\u043e\u043a\u043e\u0432\u0435\u0449\u0430\u0435\u0442 \u043e \u0441\u0432\u043e\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c.<\/li>\n<li>\u0412\u044b \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u0443\u044e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c. <i>Target-Action<\/i> \u0436\u0435 \u043d\u0435 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<\/ul>\n<p>  \u0423 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u0438\u0433\u0440\u0430\u0435\u0442 \u0440\u043e\u043b\u044c \u2014 \u044d\u0442\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 <i>Target-Action<\/i> \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043d\u043e. \u042d\u0442\u043e \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 <code>UIControl<\/code> \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0443\u0440\u043e\u043a\u0430.<\/p>\n<p>  \u041f\u043e\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 <code>continueTrackingWithTouch:withEvent:<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.m<\/b>, \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>continueTrackingWithTouch:withEvent<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u0435\u0440\u0435\u0434 <code>return YES<\/code>:<\/p>\n<pre><code class=\"objectivec\">[self sendActionsForControlEvents:UIControlEventValueChanged]; <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442 \u0432\u0430\u0441 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0446\u0435\u043b\u0438 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445. \u0427\u0442\u043e \u0436, \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c!<\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CEViewController.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043c\u0435\u0442\u043e\u0434\u0430 <code>viewDidLoad<\/code>:<\/p>\n<pre><code class=\"objectivec\">[_rangeSlider addTarget:self                      action:@selector(slideValueChanged:)            forControlEvents:UIControlEventValueChanged]; <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>slideValueChanged<\/code> \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>UIControlEventValueChanged<\/code>.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 <b>CEViewController.m<\/b>:<\/p>\n<pre><code class=\"objectivec\">- (void)slideValueChanged:(id)control {     NSLog(@&quot;Slider value changed: (%.2f,%.2f)&quot;,           _rangeSlider.lowerValue, _rangeSlider.upperValue); } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u043b\u043e\u0433 \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043d\u0430\u0434\u043e. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434\u0432\u0438\u0433\u0430\u0439\u0442\u0435 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432 \u043b\u043e\u0433 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/23d\/6db\/156\/23d6db1568d6d71715c6c7322b49b7f7.png\" alt=\"image\"\/><\/p>\n<p>  \u0412\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043b\u0438 \u043e\u0442 \u0440\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e \u043d\u0430 \u0443\u0436\u0430\u0441\u043d\u044b\u0439 \u0444\u0440\u0443\u043a\u0442\u043e\u0432\u044b\u0439 \u0441\u0430\u043b\u0430\u0442. \u041f\u043e\u0440\u0430 \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434!<\/p>\n<h4>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Core Graphics<\/h4>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0438. \u0412 \u0433\u0440\u0443\u043f\u043f\u0443 <b>CERangeSlider<\/b> \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 <b>CERangeSliderTrackLayer<\/b>, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u0430\u0431\u043a\u043b\u0430\u0441\u0441\u043e\u043c <b>CALayer<\/b>.<\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSliderTrackLayer.h<\/b> \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n<pre><code class=\"objectivec\">#import &lt;QuartzCore\/QuartzCore.h&gt;   @class CERangeSlider;   @interface CERangeSliderTrackLayer : CALayer   @property (weak) CERangeSlider* slider;   @end <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0446\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043b\u044f \u0441\u043b\u043e\u044f \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <code>#import<\/code>:<\/p>\n<pre><code class=\"objectivec\">#import &quot;CERangeSliderTrackLayer.h&quot; <\/code><\/pre>\n<p>  \u0427\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>_trackLayer<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0435 \u0442\u0438\u043f \u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441:<\/p>\n<pre><code class=\"objectivec\">CERangeSliderTrackLayer* _trackLayer; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>initWithFrame:<\/code> \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u044f:<\/p>\n<pre><code class=\"objectivec\">_trackLayer = [CERangeSliderTrackLayer layer]; _trackLayer.slider = self; [self.layer addSublayer:_trackLayer];   _upperKnobLayer = [CERangeSliderKnobLayer layer]; _upperKnobLayer.slider = self; [self.layer addSublayer:_upperKnobLayer];   _lowerKnobLayer = [CERangeSliderKnobLayer layer]; _lowerKnobLayer.slider = self; [self.layer addSublayer:_lowerKnobLayer]; <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u043f\u043e\u043b\u043e\u0441\u043a\u0430, \u0438 \u0432\u044b\u0440\u0432\u0438\u0433\u043b\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u0444\u043e\u043d\u0443. :]<\/p>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u2014 \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0444\u043e\u043d \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CEViewController.m<\/b>, \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043a\u043e\u0434\u0430 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>viewDidLoad<\/code> \u0438 \u0441\u043e\u0442\u0440\u0438\u0442\u0435 \u0435\u0435:<\/p>\n<pre><code class=\"objectivec\">_rangeSlider.backgroundColor = [UIColor redColor]; <\/code><\/pre>\n<p>  \u0421\u043e\u0431\u0435\u0440\u0438\u0442\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u2026 \u0427\u0442\u043e \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435?<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/108\/d48\/9e6\/108d489e63772ab63b52532a32d9c29d.png\" alt=\"image\"\/><\/p>\n<p>  \u041d\u0438\u0447\u0435\u0433\u043e? \u0412\u043e\u0442 \u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e!<\/p>\n<p>  \u0412\u044b \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u2014 \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0433\u043e? \u0412\u0441\u0435 \u043f\u043b\u043e\u0434\u044b \u0442\u044f\u0436\u0435\u043b\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430 \u043f\u0440\u043e\u043f\u0430\u043b\u0438! \u041d\u0435 \u043f\u0443\u0433\u0430\u0439\u0442\u0435\u0441\u044c \u2014 \u0432\u044b \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0443\u0431\u0440\u0430\u043b\u0438 \u044f\u0440\u043a\u0438\u0435 \u0446\u0432\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u0441\u043b\u043e\u044f\u043c. \u0412\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043c\u0435\u0441\u0442\u0435 \u2014 \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439.<\/p>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043b\u044e\u0431\u044f\u0442, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u0434 \u0441\u0442\u0438\u043b\u044c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0445 \u0437\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.h<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"objectivec\">@property (nonatomic) UIColor* trackColour; @property (nonatomic) UIColor* trackHighlightColour; @property (nonatomic) UIColor* knobColour; @property (nonatomic) float curvaceousness;   - (float) positionForValue:(float)value; <\/code><\/pre>\n<p>  \u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f <code>curvaceousness<\/code> \u2014 \u0443\u0437\u043d\u0430\u0435\u0442\u0435 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435. \u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, <code>positionForValue:<\/code>. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043c\u044b \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043b\u043e\u0435\u0432.<\/p>\n<p>  \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043c\u0435\u0442\u043e\u0434 <code>initWithFrame:,<\/code> \u043f\u043e\u0434 \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043e\u0434\u0430, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u043c \u0437\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"objectivec\">_trackHighlightColour = [UIColor colorWithRed:0.0 green:0.45 blue:0.94 alpha:1.0]; _trackColour = [UIColor colorWithWhite:0.9 alpha:1.0]; _knobColour = [UIColor whiteColor]; _curvaceousness = 1.0; _maximumValue = 10.0; _minimumValue = 0.0; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSliderTrackLayer.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <code>#import<\/code>:<\/p>\n<pre><code class=\"objectivec\">#import &quot;CERangeSlider.h&quot; <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u0441\u043b\u043e\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u043e\u043b\u043e\u0441\u043a\u0443, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u0431\u0430 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d\u0430 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 <code>CALayer<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043e\u0441\u043a\u0443, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>drawInContext:<\/code> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CoreGraphics API \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e Core Graphics, \u0442\u043e \u0432\u0430\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d \u043a\u0443\u0440\u0441 <a href=\"http:\/\/www.raywenderlich.com\/2033\/core-graphics-tutorial-for-ios-lines-rectangles-and-gradients\">Core Graphics 101 tutorial series<\/a>, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0435 Core Graphics \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0435 \u0440\u0430\u043c\u043e\u043a \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430.<\/p><\/blockquote>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 <b>CERangeSliderTrackLayer.m<\/b> \u043f\u043e\u0434 <code>@implementation<\/code>:<\/p>\n<pre><code class=\"objectivec\">- (void)drawInContext:(CGContextRef)ctx {     \/\/ clip     float cornerRadius = self.bounds.size.height * self.slider.curvaceousness \/ 2.0;     UIBezierPath *switchOutline = [UIBezierPath bezierPathWithRoundedRect:self.bounds                                                              cornerRadius:cornerRadius]; \tCGContextAddPath(ctx, switchOutline.CGPath);     CGContextClip(ctx);       \/\/ 1) fill the track     CGContextSetFillColorWithColor(ctx, self.slider.trackColour.CGColor);     CGContextAddPath(ctx, switchOutline.CGPath);     CGContextFillPath(ctx);       \/\/ 2) fill the highlighed range     CGContextSetFillColorWithColor(ctx, self.slider.trackHighlightColour.CGColor);     float lower = [self.slider positionForValue:self.slider.lowerValue];     float upper = [self.slider positionForValue:self.slider.upperValue];     CGContextFillRect(ctx, CGRectMake(lower, 0, upper - lower, self.bounds.size.height));       \/\/ 3) add a highlight over the track     CGRect highlight = CGRectMake(cornerRadius\/2, self.bounds.size.height\/2,                                   self.bounds.size.width - cornerRadius, self.bounds.size.height\/2);     UIBezierPath *highlightPath = [UIBezierPath bezierPathWithRoundedRect:highlight                                                              cornerRadius:highlight.size.height * self.slider.curvaceousness \/ 2.0];     CGContextAddPath(ctx, highlightPath.CGPath);     CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:1.0 alpha:0.4].CGColor);     CGContextFillPath(ctx);       \/\/ 4) inner shadow     CGContextSetShadowWithColor(ctx, CGSizeMake(0, 2.0), 3.0, [UIColor grayColor].CGColor);     CGContextAddPath(ctx, switchOutline.CGPath);     CGContextSetStrokeColorWithColor(ctx, [UIColor grayColor].CGColor);     CGContextStrokePath(ctx);       \/\/ 5) outline the track     CGContextAddPath(ctx, switchOutline.CGPath);     CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);     CGContextSetLineWidth(ctx, 0.5);     CGContextStrokePath(ctx);  } <\/code><\/pre>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043b\u043e\u043a\u0438 \u043a\u043e\u0434\u0430, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/575\/0b5\/18b\/5750b518b43743593ff3bcb2f3eb12d3.jpg\" alt=\"image\"\/><\/p>\n<p>  \u041f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c:<\/p>\n<ol>\n<li>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430 \u043f\u043e\u043b\u043e\u0441\u043a\u0438, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0435\u0435 \u0444\u043e\u043d.<\/li>\n<li>\u041f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d.<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0434\u043b\u0434\u044f \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043e\u0441\u043a\u0435 \u043e\u0431\u044a\u0435\u043c\u0430.<\/li>\n<li>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043d\u044c.<\/li>\n<li>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0435 \u043a\u0440\u0430\u044f \u043f\u043e\u043b\u043e\u0441\u043a\u0438.<\/li>\n<\/ol>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u043e \u043f\u043e \u0448\u0430\u0433\u0430\u043c, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <b>CERangeSlider<\/b> \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0435\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434.<\/p>\n<p>  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/e5c\/65c\/81d\/e5c65c81d2fdf108501852c51e1a9fe9.png\" alt=\"image\"\/><\/p>\n<p>  \u041f\u043e\u0438\u0433\u0440\u0430\u0439\u0442\u0435 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438 \u043f\u043e\u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e, \u0447\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>curvaceousness<\/code>, \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c!<\/p>\n<p>  \u0414\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u043e\u0432 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSliderKnobLayer.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <code>#import<\/code>:<\/p>\n<pre><code class=\"objectivec\">#import &quot;CERangeSlider.h&quot; <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434:<\/p>\n<pre><code class=\"objectivec\">- (void)drawInContext:(CGContextRef)ctx {     CGRect knobFrame = CGRectInset(self.bounds, 2.0, 2.0);       UIBezierPath *knobPath = [UIBezierPath bezierPathWithRoundedRect:knobFrame                                                         cornerRadius:knobFrame.size.height * self.slider.curvaceousness \/ 2.0];       \/\/ 1) fill - with a subtle shadow     CGContextSetShadowWithColor(ctx, CGSizeMake(0, 1), 1.0, [UIColor grayColor].CGColor);     CGContextSetFillColorWithColor(ctx, self.slider.knobColour.CGColor);     CGContextAddPath(ctx, knobPath.CGPath);     CGContextFillPath(ctx);       \/\/ 2) outline     CGContextSetStrokeColorWithColor(ctx, [UIColor grayColor].CGColor);     CGContextSetLineWidth(ctx, 0.5);     CGContextAddPath(ctx, knobPath.CGPath);     CGContextStrokePath(ctx);         \/\/ 3) inner gradient     CGRect rect = CGRectInset(knobFrame, 2.0, 2.0);     UIBezierPath *clipPath = [UIBezierPath bezierPathWithRoundedRect:rect                                                         cornerRadius:rect.size.height * self.slider.curvaceousness \/ 2.0];       CGGradientRef myGradient;     CGColorSpaceRef myColorspace;     size_t num_locations = 2;     CGFloat locations[2] = { 0.0, 1.0 };     CGFloat components[8] = { 0.0, 0.0, 0.0 , 0.15,  \/\/ Start color         0.0, 0.0, 0.0, 0.05 }; \/\/ End color       myColorspace = CGColorSpaceCreateDeviceRGB();     myGradient = CGGradientCreateWithColorComponents (myColorspace, components,                                                       locations, num_locations);       CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));     CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));       CGContextSaveGState(ctx);     CGContextAddPath(ctx, clipPath\t.CGPath);     CGContextClip(ctx);     CGContextDrawLinearGradient(ctx, myGradient, startPoint, endPoint, 0);       CGGradientRelease(myGradient);     CGColorSpaceRelease(myColorspace);     CGContextRestoreGState(ctx);       \/\/ 4) highlight     if (self.highlighted)     {         \/\/ fill         CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:0.0 alpha:0.1].CGColor);         CGContextAddPath(ctx, knobPath.CGPath);         CGContextFillPath(ctx);     } }  <\/code><\/pre>\n<p>  \u0421\u043d\u043e\u0432\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n<ol>\n<li>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u043e\u0440\u043c\u0430 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u043e\u0432 \u0433\u043e\u0442\u043e\u0432\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438\u0445 \u0444\u043e\u043d. <\/li>\n<li>\u0414\u0430\u043b\u044c\u0448\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430.<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0435\u0433\u043a\u0438\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442.<\/li>\n<li>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u2014 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d \u2014 \u043e\u043d \u0442\u0430\u043a\u0438\u043c \u0438 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u044e\u0442 \u2014 \u043e\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u0435\u0440\u044b\u043c.<\/li>\n<\/ol>\n<p>  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0435\u0449\u0435 \u0440\u0430\u0437:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/06a\/dee\/f9c\/06adeef9cffd843145a2323da82eeaba.png\" alt=\"image\"\/><\/p>\n<p>  \u0412\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 <i>Core Graphics<\/i> \u0441\u0442\u043e\u0438\u0442 \u0441\u0432\u043e\u0438\u0445 \u0443\u0441\u0438\u043b\u0438\u0439. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0438 \u0433\u0438\u0431\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0447\u0435\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<h4>\u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<p>  \u0418\u0442\u0430\u043a, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0440\u043e\u0441\u043a\u043e, \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u2014 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0438 \u043e\u043d \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d <i>Target-Action<\/i>.<\/p>\n<p>  \u0417\u0430\u0434\u0443\u043c\u0430\u0439\u0442\u0435\u0441\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u0432 \u043a\u043e\u0434\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044d\u0442\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u0432 \u0441\u0432\u043e\u0439 \u043a\u043e\u0434.<\/p>\n<p>  \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u0432\u043d\u0435, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 <i>setter<\/i>. \u0412\u0430\u0448\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"objectivec\">- (void)setTrackColour:(UIColor *)trackColour {     if (_trackColour != trackColour) {         _trackColour = trackColour;         [_trackLayer setNeedsDisplay];     } } <\/code><\/pre>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>trackColor<\/code>, \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0441\u043b\u043e\u0439 \u043f\u043e\u043b\u043e\u0441\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f. \u041d\u043e, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u0432 API \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u043e\u0441\u0435\u043c\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u2014 \u043d\u0435 \u0441\u0430\u043c\u043e\u0435 \u043b\u0443\u0447\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. <\/p>\n<p>  \u041f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0440\u043e\u0441! \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CERangeSlider.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043d\u0430\u0434 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <i>initWithFrame<\/i>:<\/p>\n<pre><code class=\"objectivec\">#define GENERATE_SETTER(PROPERTY, TYPE, SETTER, UPDATER) \\ - (void)SETTER:(TYPE)PROPERTY { \\     if (_##PROPERTY != PROPERTY) { \\         _##PROPERTY = PROPERTY; \\         [self UPDATER]; \\     } \\ } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u0430\u043a\u0440\u043e\u0441, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0438\u0445 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0438\u043d\u0442\u0435\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <i>setter<\/i>. \u041f\u043e\u0434 \u044d\u0442\u0438\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0431\u043b\u043e\u043a:<\/p>\n<pre><code class=\"objectivec\">GENERATE_SETTER(trackHighlightColour, UIColor*, setTrackHighlightColour, redrawLayers)   GENERATE_SETTER(trackColour, UIColor*, setTrackColour, redrawLayers)   GENERATE_SETTER(curvaceousness, float, setCurvaceousness, redrawLayers)   GENERATE_SETTER(knobColour, UIColor*, setKnobColour, redrawLayers)   GENERATE_SETTER(maximumValue, float, setMaximumValue, setLayerFrames)   GENERATE_SETTER(minimumValue, float, setMinimumValue, setLayerFrames)   GENERATE_SETTER(lowerValue, float, setLowerValue, setLayerFrames)   GENERATE_SETTER(upperValue, float, setUpperValue, setLayerFrames)   - (void) redrawLayers {     [_upperKnobLayer setNeedsDisplay];     [_lowerKnobLayer setNeedsDisplay];     [_trackLayer setNeedsDisplay]; } <\/code><\/pre>\n<p>  \u041c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b <i>setter<\/i> \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u0434\u043d\u0438\u043c \u043c\u0430\u0445\u043e\u043c. \u041c\u0435\u0442\u043e\u0434 <code>redrawLayers<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 <code>setLayerFrames<\/code> \u2014 \u0434\u043b\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0445 \u0437\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n<p>  \u042d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>  \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043c\u0430\u043a\u0440\u043e\u0441\u044b \u0438 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043d\u0430\u0434\u043e. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <b>CEViewController.m<\/b> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043c\u0435\u0442\u043e\u0434\u0430 <code>viewDidLoad<\/code>:<\/p>\n<pre><code class=\"objectivec\">[self performSelector:@selector(updateState) withObject:nil afterDelay:1.0f]; <\/code><\/pre>\n<p>  \u042d\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>updateState<\/code> \u043f\u043e\u0441\u043b\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432 <b>CEViewController.m<\/b>:<\/p>\n<pre><code class=\"objectivec\">- (void)updateState {     _rangeSlider.trackHighlightColour = [UIColor redColor];     _rangeSlider.curvaceousness = 0.0; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u043f\u043e\u043b\u043e\u0441\u043a\u0438 \u0441 \u0441\u0438\u043d\u0435\u0433\u043e \u043d\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0439, \u0430 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u043e\u0432 \u2014 \u043d\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u0443\u044e. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0441\u0432\u043e\u044e \u0444\u043e\u0440\u043c\u0443 \u0441 \u044d\u0442\u043e\u0439:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/917\/14c\/9be\/91714c9be56e659c46907d12e65b9667.png\" alt=\"image\"\/><\/p>\n<p>  \u043d\u0430 \u044d\u0442\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/8c6\/572\/d66\/8c6572d669e108d52ed36cfa38593705.png\" alt=\"image\"\/><\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u041a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438, \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 (\u0438, \u043a \u0441\u043b\u043e\u0432\u0443, \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438) \u0441\u0442\u043e\u0440\u043e\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0438\u0445 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0438\u0445 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0432\u0430\u0448\u0430 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c. \u0425\u043e\u0440\u043e\u0448\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u044f\u0441\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p><\/blockquote>\n<h4>\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h4>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435\u043d \u0438 \u0433\u043e\u0442\u043e\u0432 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0432 \u043b\u044e\u0431\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445! \u041e\u0434\u043d\u043e \u0438\u0437 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438.<\/p>\n<p>  \u041d\u0443 \u043a\u0430\u043a, \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u043f\u0440\u0435\u043c\u044c\u0435\u0440\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430?<\/p>\n<p>  \u041d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\u0447:<\/p>\n<p>  <b>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f.<\/b> \u041b\u044e\u0431\u0438\u043c\u043e\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430. :] \u0425\u043e\u0442\u044c \u0432\u044b \u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0432\u0430\u0448 \u043a\u043e\u0434 \u0438\u0434\u0435\u0430\u043b\u0435\u043d \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043c\u043d\u0435\u043d\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f. \u0425\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043a\u043e\u0434\u0430. \u041a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0432\u0430\u0448 <b>CERangeSlider<\/b> \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u2014 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 <code>max<\/code>, <code>min<\/code>, <code>upper<\/code>, <code>lower<\/code>.<\/p>\n<p>  <b>\u041d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u044c.<\/b> \u0427\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>upperValue<\/code> \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c <code>maximumValue<\/code>? \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0430\u043c\u0438 \u0432\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u2014 \u044d\u0442\u043e \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0433\u043b\u0443\u043f\u043e. \u041d\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043a\u0442\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442! \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e \u2014 \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0443\u0440\u043e\u0432\u043d\u044f \u0433\u043b\u0443\u043f\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.<\/p>\n<p>  <b>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 API<\/b>. \u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0443\u043d\u043a\u0442, \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u0438, \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0442\u0435\u043c\u043e\u0439 \u2014 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 API. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0433\u0438\u0431\u043a\u043e\u0439, \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c. \u0412 \u043c\u043e\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, <i>ShinobiControls<\/i>, \u043c\u044b \u0447\u0430\u0441\u0430\u043c\u0438 \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u043c\u0435\u043b\u043a\u0443\u044e \u0434\u0435\u0442\u0430\u043b\u044c \u043d\u0430\u0448\u0438\u0445 API! \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 API \u2014 \u043e\u0447\u0435\u043d\u044c \u0433\u043b\u0443\u0431\u043e\u043a\u0430\u044f \u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0441\u0442\u0430\u043b\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u044d\u0442\u0430 \u0442\u0435\u043c\u0430, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0435\u0441\u0442\u044c <a href=\"http:\/\/mattgemmell.com\/api-design\/\">Matt Gemmell\u2019s 25 rules of API design<\/a>.<\/p>\n<p>  \u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043c\u0435\u0441\u0442, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/\">GitHub<\/a>. GitHub \u0441\u0442\u0430\u043b \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u043b\u043e\u0449\u0430\u0434\u043e\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c. \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430 GitHub \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0431\u0435\u0441\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f iOS. \u0427\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0432 GitHub, \u0442\u0430\u043a \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f.<\/li>\n<li><a href=\"http:\/\/cocoapods.org\/\">CocoaPods<\/a>. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043b\u044e\u0434\u044f\u043c \u0441 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c\u044e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 CocoaPods \u2014 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u0434\u043b\u044f iOS \u0438 OSX.<\/li>\n<li><a href=\"http:\/\/www.cocoacontrols.com\/\">Cocoa Controls<\/a>. \u0421\u0430\u0439\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0430\u043a \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 GitHub, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043d\u0438\u043c\u0438.<\/li>\n<li><a href=\"http:\/\/www.binpress.com\/\">Binpress<\/a>. \u0420\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0438 \u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0430\u043c\u043e\u043c\u0443 \u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0434\u0430\u0436\u0443? \u041a\u0442\u043e \u0437\u043d\u0430\u0435\u0442, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043a\u0442\u043e-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432 \u0437\u0430\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u0437\u0430 \u0447\u0438\u0441\u0442\u044b\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 API.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u0438\u0434\u0435\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <a href=\"https:\/\/github.com\/ColinEberhardt\/CERangeSlider\">\u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u043d\u0430 GitHub<\/a> \u0441 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0434\u0438\u044f\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442\u0435\u0441\u044c, \u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u0442\u0430\u043f\u0430! :]<\/p>\n<p>  \u0412\u0435\u0441\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u0430\u0447\u0430\u0442\u044c <a href=\"http:\/\/cdn4.raywenderlich.com\/wp-content\/uploads\/2013\/04\/CERangeSlider.zip\">\u043f\u043e \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.   \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/212111\/\"> http:\/\/habrahabr.ru\/post\/212111\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">       <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/930\/67a\/c0a\/93067ac0a3cc558d9ac0291c9bb126d0.png\" alt=\"image\"\/><\/p>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e \u0441\u0443\u0442\u0438 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e\u0442 \u0443\u0440\u043e\u043a \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-212111","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/212111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=212111"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/212111\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=212111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=212111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=212111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}