본문 바로가기

기술 노트/UI

(5)
[UI] Semantic Button 이미지 오른쪽 끝으로 넣기! (버튼 내부 정렬) 안녕하세요~.~ 버튼 구성하는데 이미지를 제일 끝으로 정렬해야하는 디자인이더라구요! 그래서 Semantic이라는 속성을 이용해서 이미지를 오른쪽으로 정렬해보겠습니다!! Storyboard에서 설정하기 아래 이미지처럼 버튼에서 semantic을 설정해주고, 필요에따라 Insets도 설정해줍니다! (텍스트와 이미지가 몇 떨어져 있을지 설정하는 부분) Force Right-to-Left : 이미지 왼쪽 정렬 Force Left-to-Right : 이미지 오른쪽 정렬 UI 코드로 설정하기 semanticContentAttribute 를 이용해서 위의 방법과 동일하게 어느 방향으로 정렬할지 정해줍니다 Insets는 titleEdgeInsets를 사용해서 설정해주면 됩니다!! 하지만... 기존에 사용하던 title..
[UI] UIView 원하는 모서리만 둥글게 만들기 (CornerRadius) 안녕하세요 :) 오늘은 UIView에서 원하는 모서리만 둥글게 만드는 법을 알아보겠습니다! 개발을 하다보면 특정 모서리만 둥글게 만들어줘야하는 상황이 오는데 그때 사용하면 될 것 같아요!ㅎㅎ iOS 11 이상에서는 CALayer의 CACornerMask을 사용하면 특정 모서리만 쉽게 둥글게 처리 할 수 있습니다! 그럼 우선 CACornerMask 에서 만들어준 모서리 값들의 형태를 차례차례 알아볼까요?? 위와 같이 네가지 형태를 가지고 있는데.. 정확히 이해가 잘 가지 않죠? 그림과 함께 알아보겠습니다! layerMinXMinYCorner : 뷰의 왼쪽 상단 모서리 MinX : 뷰의 최소 X 좌표 값 (뷰의 왼쪽) MinY : 뷰의 최소 Y 좌표 값 (뷰의 상단) layerMaxXMinYCorner : ..
[UI] xib로 Table View 만들기 안녕하세요오 소진입니다 ㅎㅎ 오늘은 xib를 사용하여 TableView를 만들어보도록 하겠습니다 : D 회사에서도 custom cell을 사용할때 xib를 많이 이용한다고해요!! 어렵지 않으니 해봅시다@ 다른 방법으로 TableView 만들어보려면! [UI] Code base로 Table View 만들기 [UI] Story board로 Table View 만들기 [UI] SwiftUI로 Table View 만들기 미리 보기 자! 이번에도 위와 같은 디자인으로 Table View를 만들어보겠습니다ㅎㅎㅎㅎ Cell 만들기 자! 이제 Custom Cell을 만들어볼까요?? 우선 xib 파일을 만들러 갑시다! New File을 누르거나 Commend + N 를 눌러줍니다. 여기서 Cocoa Touch Class..
[UI] Code base로 Table View 만들기 안녕하세요! 소진임니당 오늘은 Code base로 TableView를 만들어보도록 하겠습니다 : D 깔끔한 코드를 위해 SnapKit 라이브러리를 사용했습니다! 다른 방법으로 TableView 만들어보려면! [UI] Story board로 Table View 만들기 [UI] xib로 Table View 만들기 [UI] SwiftUI로 Table View 만들기 미리 보기 오늘 위와 같은 Table View를 만들어볼꺼에요! 어렵지 않으니 천천히 따라오시면 됩니다 ㅎㅎㅎㅎ 사전 설정 일단, code base로 UI를 구성하려면 Storyboard도 없애야하고 코드를 몇 줄 적는등.. 사전 설정을 합니다! 해당 부분은 아래 포스팅에서 자세히 다루니 참고해주세요!! SnapKit이 어려운 분들도 아래 쪽에 설..
[UI] Storyboard로 Table View 만들기 안녕하세요 소진입니다 :) 오늘은 가장 많이 쓰이는 TableView!! 만드는 법에대해 알아보도록 하겠습니다ㅎㅎ 일단 제일 쉽고 기초적인 Storyboard로 만들어봅시다 :0 다른 방법으로 TableView 만들어보려면! [UI] Code base로 Table View 만들기 [UI] xib로 Table View 만들기 [UI] SwiftUI로 Table View 만들기 Storyboard로 TableView 구현하는 법 1. ViewController + TableView - UITableViewControllerDelegate, UITableViewControllerDataSource Protocol 채택 - TableView의 delegate, datasource기 ViewController 임..