https://kelly-chui.github.io/tags/calayer/Recent content in CALayer on Kelly DevHugoen-usTue, 17 Sep 2024 00:00:00 +0000https://kelly-chui.github.io/posts/ios-uikit-uiview-calayer/Tue, 17 Sep 2024 00:00:00 +0000https://kelly-chui.github.io/posts/ios-uikit-uiview-calayer/<p><code>UIView</code>는 화면의 직사각형 영역을 나타내고, 그 안에 콘텐츠를 관리하는 객체이다. 대부분의 UI 요소가 <code>UIView</code>를 상속받으며, 화면에 콘텐츠를 보여주고 터치나 제스처를 감지하는 역할을 한다.</p> <h2 id="uiview로-콘텐츠-표시하기">UIView로 콘텐츠 표시하기</h2> <p><code>UIView</code>는 UIKit에서 제공하는 메소드나 Core Graphics를 이용해 직사각형 영역에 콘텐츠를 그릴 수 있다. 배경색만 있는 간단한 <code>UIView</code>를 만들어보자.</p> <div class="code-theme-github"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-swift" data-lang="swift"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nv">magentaRectView</span><span class="p">:</span> <span class="n">UIView</span> <span class="p">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nv">magentaRectView</span> <span class="p">=</span> <span class="n">UIView</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="n">magentaRectView</span><span class="p">.</span><span class="n">backgroundColor</span> <span class="p">=</span> <span class="p">.</span><span class="n">magenta</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="n">magentaRectView</span> </span></span><span class="line"><span class="cl"><span class="p">}()</span></span></span></code></pre></div></div> <p>오토레이아웃 제약은 임의로 정했다.</p> <img loading="lazy" src="https://kelly-chui.github.io/posts/ios-uikit-uiview-calayer/image-001-optimized-image.webp"><p><code>UIView</code>는 내부에 다른 <code>UIView</code>를 포함할 수 있다. 상위 뷰에 포함된 뷰를 서브 뷰라고 한다. <code>UIViewController</code>의 <code>view</code> 프로퍼티도 <code>UIView</code> 인스턴스이기 때문에, 위 마젠타 사각형도 <code>UIView</code> 내부의 <code>UIView</code>이다. 좀 더 직관적으로 확인하려면, 마젠타 사각형 안에 검은색 사각형을 추가해보자.</p>