-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathset-cornerradius-for-part-of-a-uiview.html
142 lines (130 loc) · 8.81 KB
/
set-cornerradius-for-part-of-a-uiview.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Jinhuan Li" />
<meta name="copyright" content="Jinhuan Li" />
<meta name="keywords" content="iOS, cornerRadius, iOS, cornerRadius" />
<title>IOS Code Collection#1: Set cornerRadius for part of a UIView's corners · Likers
</title>
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://likers.github.io/theme/css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://likers.github.io/theme/css/solarizedlight.css" media="screen">
<link rel="shortcut icon" href="http://likers.github.io/theme/images/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="http://likers.github.io/theme/images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="http://likers.github.io/theme/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://likers.github.io/theme/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://likers.github.io/theme/images/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://likers.github.io/theme/images/apple-touch-icon-144x144.png" />
<link rel="icon" href="http://likers.github.io/theme/images/apple-touch-icon-144x144.png" />
</head>
<body>
<div id="content-sans-footer">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://likers.github.io/"><span class=site-name>Likers</span></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right top-menu">
<li ><a href="http://likers.github.io">Home</a></li>
<li ><a href="http://likers.github.io/categories.html">Categories</a></li>
<li ><a href="http://likers.github.io/tags.html">Tags</a></li>
<li ><a href="http://likers.github.io/archives.html">Archives</a></li>
<li><form class="navbar-search" action="http://likers.github.io/search.html" onsubmit="return validateForm(this.elements['q'].value);"> <input type="text" class="search-query" placeholder="Search" name="q" id="tipue_search_input"></form></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span10">
<article>
<div class="row-fluid">
<header class="page_header span10 offset2">
<h1><a href="http://likers.github.io/set-cornerradius-for-part-of-a-uiview.html"> IOS Code Collection#1: Set cornerRadius for part of a UIView's corners </a></h1>
</header>
</div>
<div class="row-fluid">
<div class="span8 offset2 article-content">
<h2>Requirement</h2>
<p>Some times we need to set cornerRadius of a UIView, but only part of them. Like say only the bottom left and bottom right corner, but keep top left and top right as it was.</p>
<h2>Implementation</h2>
<p><code>view.lay.cornerRadius</code> will set all four corners' radius, thus it won't work for this situation. I did research on stackoverflow and fond <a href="http://stackoverflow.com/questions/10167266/how-to-set-cornerradius-for-only-top-left-and-top-right-corner-of-a-uiview">this approch</a>:</p>
<blockquote>
<p>Create a bezier mask and apply it to your view. </p>
</blockquote>
<div class="highlight"><pre><span class="bp">UIBezierPath</span> <span class="o">*</span><span class="n">maskPath</span><span class="p">;</span>
<span class="n">maskPath</span> <span class="o">=</span> <span class="p">[</span><span class="bp">UIBezierPath</span> <span class="nl">bezierPathWithRoundedRect</span><span class="p">:</span><span class="n">_backgroundImageView</span><span class="p">.</span><span class="n">bounds</span>
<span class="nl">byRoundingCorners</span><span class="p">:(</span><span class="n">UIRectCornerBottomLeft</span><span class="o">|</span><span class="n">UIRectCornerBottomRight</span><span class="p">)</span>
<span class="nl">cornerRadii</span><span class="p">:</span><span class="n">CGSizeMake</span><span class="p">(</span><span class="mf">3.0</span><span class="p">,</span> <span class="mf">3.0</span><span class="p">)];</span>
<span class="bp">CAShapeLayer</span> <span class="o">*</span><span class="n">maskLayer</span> <span class="o">=</span> <span class="p">[[</span><span class="bp">CAShapeLayer</span> <span class="n">alloc</span><span class="p">]</span> <span class="n">init</span><span class="p">];</span>
<span class="n">maskLayer</span><span class="p">.</span><span class="n">frame</span> <span class="o">=</span> <span class="nb">self</span><span class="p">.</span><span class="n">bounds</span><span class="p">;</span>
<span class="n">maskLayer</span><span class="p">.</span><span class="n">path</span> <span class="o">=</span> <span class="n">maskPath</span><span class="p">.</span><span class="bp">CGPath</span><span class="p">;</span>
<span class="n">_backgroundImageView</span><span class="p">.</span><span class="n">layer</span><span class="p">.</span><span class="n">mask</span> <span class="o">=</span> <span class="n">maskLayer</span><span class="p">;</span>
<span class="p">[</span><span class="n">maskLayer</span> <span class="k">release</span><span class="p">];</span>
</pre></div>
<p>The key is <code>[UIBezierPath bezierPathWithRoundedRect:
byRoundingCorners:
cornerRadii:CGSizeMake(3.0, 3.0)];</code></p>
<p>This method draws a bezierPath with only to corner rounded. And then just add this path to view's mask layer and you are all set. </p>
<aside>
<hr/>
<nav>
<ul class="articles_timeline">
<li class="previous_article">« <a href="http://likers.github.io/assign-retain-strong-weak-and-copy.html" title="Previous: IOS tips #2: Assign, Retain, Strong, Weak, and Copy">IOS tips #2: Assign, Retain, Strong, Weak, and Copy</a></li>
<li class="next_article"><a href="http://likers.github.io/protocol-delegate-notification.html" title="Next: IOS Tips #3: Protocol, Delegate and Notification">IOS Tips #3: Protocol, Delegate and Notification</a> »</li>
</ul>
</nav>
</aside>
</div>
<section>
<div class="span2" style="float:right;font-size:0.9em;">
<h4>Published</h4>
<time pubdate="pubdate" datetime="2016-01-14T00:00:00-06:00">Jan 14, 2016</time>
<h4>Last Updated</h4>
<div class="last_updated">2016-01-14 00:00:00-06:00</div>
<h4>Category</h4>
<a class="category-link" href="/categories.html#iOS-ref">iOS</a>
<h4>Tags</h4>
<ul class="list-of-tags tags-in-article">
<li><a href="/tags.html#cornerRadius-ref">cornerRadius
<span>1</span>
</a></li>
<li><a href="/tags.html#iOS-ref">iOS
<span>7</span>
</a></li>
</ul>
</div>
</section>
</div>
</article>
</div>
<div class="span1"></div>
</div>
</div>
</div>
<footer>
<div id="footer">
<ul class="footer-content">
<li class="elegant-power">Powered by <a href="http://getpelican.com/" title="Pelican Home Page">Pelican</a>. Theme: <a href="http://oncrashreboot.com/pelican-elegant" title="Theme Elegant Home Page">Elegant</a> by <a href="http://oncrashreboot.com" title="Talha Mansoor Home Page">Talha Mansoor</a></li>
</ul>
</div>
</footer> <script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script>
function validateForm(query)
{
return (query.length > 0);
}
</script>
</body>
</html>