본문 바로가기

728x90

🍎 iOS/UI59

[iOS] 키보드가 텍스트필드를 가릴때 해결법(When the keyboard covers text field) 안녕하세요 Foma 👟 입니다! 오늘은 텍스트필드를 만들다보면 정말 자주 만나는 키보드 문제에 대해서 다뤄보려고 해요. 시뮬레이터로 개발하다보면 키보드의 위치를 고려하지 않고 짜다가 키보드가 올라오는 순간 키보드 아래에 있는 텍스트필드나 버튼들이 가려지곤 하는데요. 오늘은 이것에 대한 해결법을 정리하도록 하겠습니다. 바로 시작할게요! Preview Storyboard 아래 화면과 같이 텍스트필드와 버튼이 비교적 아래에 있도록 만들어 주겠습니다. View에는 Tap Gesture Recognizer를 달아놓겠습니다. ViewController 스토리보드에서 만들어준 텍스트필드와 버튼을 연결해줍니다. @IBOutlet weak var textField: UITextField! @IBOutlet weak va.. 2021. 6. 16.

[iOS/UI] PHAsset을 고화질 이미지로 바꾸기(feat.deliveryMode) 안녕하세요 Foma 입니다! 오늘 알아볼건 PHAsset으로 받아온 데이터를 UIImage로 변환할때 고화질로 변환하는 법입니다. 바로 시작할게요~ Storyboard 먼저 스토리보드에 이미지를 확인할 수 있게 이미지뷰를 아래와 같이 세팅합니다. ViewController 이미지뷰를 뷰컨트롤러에 연결해줍니다. @IBOutlet weak var photo:UIImageView! 포토라이브러리의 애셋데이터를 받아올 allPhotos를 반들어줍니다. var allPhotos:PHFetchResult? = nil 애셋데이터를 얻기 위해서 포토라이브러리에 권한을 요청합니다. func request() { PHPhotoLibrary.requestAuthorization { (status) in if status =.. 2021. 3. 31.

[iOS/UI] 테이블뷰 안에 있는 텍스트뷰 높이 글에 따라 조정하기(Dynamic tableviewcell height by textview text) 안녕하세요 Foma 입니다! 오늘은 알아볼건 텍스트뷰안에 글씨에 따라서 테이블뷰셀의 높이가 자동으로 조정되는 기능을 구현해볼거에요! 바로 시작할게요~ Storyboard 스토리보드에서 테이블뷰 컨트롤러를 만들어주시고 테이블뷰셀 안에 텍스트뷰를 넣어주세요! (텍스트뷰가 늘어나는 걸 한 눈으로 보기 위해 테이블뷰 백그라운드 색을 검정색으로 해주었습니다.) 오토레이아웃은 아래와 같이 해주세요! TableViewCell 테이블뷰에 텍스트뷰를 연결해주세요! class TableViewCell: UITableViewCell { @IBOutlet weak var textView: UITextView! override func awakeFromNib() { super.awakeFromNib() // Initializa.. 2021. 3. 30.

[iOS/UI] 커스텀 XIB UIView 적용해보기 (UITableView,UICollectionView 포함) 안녕하세요 Foma 입니다! 요즘 들어 날씨 띄우기를 공부하고 있는데요. 스크롤뷰에 커스텀한 UIView를 넣기 위해서 xib로 따로 레이아웃을 잡아서 만들고 적용했는데요. 이 과정을 정리해놓고 공유해드리고 싶어서 글을 적게 되었습니다! 바로 시작할게요~ Preview 제가 만들고싶은 화면 아래와 같습니다. ScrollVIew 위에 커스텀한 UIView를 얹어서 스크롤이 좌우로 되게끔 만드는 것입니다. UIView에는 테이블뷰와 컬렉션뷰도 들어가 있습니다. 먼저 WeatherView라는 UIView Swift 파일과 xib 파일을 만들어줍니다. xib 파일을 만드는 법은 new File에서 User Interface에서 View를 골라주시고 생성해주시면 됩니다. Xib xib파일에서 원하시는 레이아웃을 .. 2021. 2. 18.

[iOS/UI] Swift 스크롤뷰로 이미지 페이지처럼 넘기기(Image Paging with UIScrollView) 안녕하세요 Foma 입니다!! 오늘은 스크롤뷰를 이용해서 이미지를 페이지처럼 넘기는 방법에 대해서 알아볼건데요. 평소에는 컬렉션뷰를 활용해서 이미지 페이징을 했었는데 스크롤뷰로 하는것이 더 간단한거 같아서 정리해보려고 합니다! 바로 시작할게요~ Preview Storyboard 먼저 다음과 같이 scrollView 세팅하고 스크롤뷰 아래쪽에 pageControl도 만들어주세요! PageControl은 스크롤뷰 바깥쪽에 위치하게 세팅해주세요! 그리곤 스크롤뷰를 클릭하셔서 Scrolling - Paging Enabled를 체크해주세요. ViewController 이제 ViewController로 이동하셔서 아래와 같이 스토리보드에서 설정해주었던 스크롤뷰와 페이지컨트롤을 연결해줍니다! @IBOutlet wea.. 2021. 2. 17.

[iOS/UI] 키보드 위에 버튼달기(add custom buttons above Keyboard) 안녕하세요 Foma 입니다!! 키보드 입력할때 키보드를 사라지게 하거나 할때 키보드 위에 done버튼이나 아니면 키보드 아래있는 버튼을 보게 하기위해서 버튼이 키보드 위로 따라오는 듯한 것을 볼 수 있었을텐데 바로 오늘은 키보드 위에 이전과 다음 버튼을 넣어볼거에요! 바로 시작할게요~Storyboard 먼저 스토리보드에 텍스트필드 하나를 만들어줍니다. ViewController 위에서 만들어준 텍스트필드를 연결해줍니다. 바로 UIToolbar를 하나 만들어주는데요. 이제 여기에 넣어줄 버튼들이 필요하겠죠? 바로 이전버튼을 만들어줍니다. 그리고 다음버튼도 똑같이 만들어주세요. 이렇게 버튼을 만드셨으면 바로 툴바에 넣어주면 되느냐? 안됩니다. 툴바에 들어갈 수 있는 아이템들은 UIBarButtonItem만 .. 2021. 1. 22.

[iOS/UI] UILabel 글자수에 따라서 폰트크기 자동으로 맞추기 (Minimum Font Scale) 안녕하세요 Foma 입니다! 오늘은 스토리보드에서 글자수에 맞게 자동으로 폰트크기를 줄여주는 기능을 알게 되어서 여러분과 공유해드릴려고 합니다! 같은 크기 안에 글자가 모두 들어가야하는 상황이라면 (스크롤되지않고) 폰트크기가 줄어들면서 모든 글자가 보이도록 해야할텐데요. StoryBoard 먼저 스토리보드로 가셔서 아래 보이는 Autoshrink를 탭하시면 minimum Font Scale과 minimum Font Size가 있는데요. 여기서 minimum Font Scale을 골라줍니다. 그럼 다음과 같이 아래처럼 글이 적을때는 폰트사이즈가 상대적으로 크게 글이 아주 길때는 폰트사이즈가 작게 조정되는 것을 볼 수 있습니다!! 2020. 12. 14.

[iOS/UI]탭바 아이템 눌렀을 때 애니메이션 넣기 (UITabBarItem Animation) 안녕하세요 Foma 입니다!!! 오늘 알아볼 건 탭바를 탭했을 때 이미지가 스프링처럼 커졌다 작아졌다하는 애니메이션을 적용해볼거에요. 그럼 바로 시작하겠습니다. Xcode 우선 탭바 컨트롤러를 만들어주세요. override된 didSelect(탭바아이템 선택했을시) 메소드를 써줍니다. 아래 사진과 같이 안에 코드를 붙여넣습니다.(인덱스를 찾아내는 코드) 그 다음 애니메이션 함수를 따로 구현해줍니다. 마지막으로 didSelect했을 때 performSpringAnimation함수에 imageView를 인자값으로 넣어준 뒤 실행해줍니다. StoryBoard 스토리보드로 이동하셔서 탭바컨트롤러를 만들고 각 아이템에 이미지를 넣어줍니다. (저렇게 원본 그대로의 이미지를 추가하시고 싶으면 여기를 참고해주세요) 반.. 2020. 10. 28.

[iOS/UI]간단하게 이미지뷰에 이미지 넣기(Image Literal) 안녕하세요 Foma 입니다! 오늘은 Image Literal이란 것을 사용하여 간단하게 이미지뷰에 이미지를 넣어주겠습니다. 바로 시작할게요! 먼저 평소에는 이미지뷰에 이미지를 넣을 때 이미지의 이름을 기억하여서 넣었습니다. 이렇게 하다보면 이미지의 이름을 일일이 알아야하고 넣기 번거로웠습니다. 하지만 아래 사진과 같이 이미지 자체를 넣을 수 있는 기능이 있는데요. 바로 이미지 리터럴이란 기능입니다. Image Literal이라고 친 다음 사진 아이콘이 뜨는데 그것을 더블클릭한 다음 자신이 가지고 있는 이미지 중 사용할 이미지를 클릭해주면 됩니다.! 아래를 참고해서 사용하시면 좋을 거 같습니다! 2020. 10. 27.

[iOS/UI]스크롤뷰 간단하게 적용하기(Simple Use UIScrollView) 안녕하세요 Foma 입니다! 이번에 알아볼 건 스크롤뷰입니다. 저는 스크롤뷰를 적용하려다 보니 새롭게 바뀐 Content Layout Guide 와 Frame Layout Guide를 고려하니 복잡하고 오류가 많이 떴습니다 ㅜ 그래서 열심히 찾아본 결과 간단하게 구현하는 법을 알게되었습니다. 우선 스크롤뷰를 추가해줍니다. 그리고 Constraints를 모두 0으로 해줍니다. 그러면 이렇게 빨간색 줄이 뜨는데요 당황하지 말고 다음 단계로 넘어갑니다! 그리곤 인디케이터 인스펙터로 가서 노란부분으로 표시된 Content Layout Guides의 체크를 풀어줍니다. 그럼 아주 편안(?)하게 파란색 줄로 변하게 됩니다. 그리고 뷰를 컨텐트를 담당할 뷰를 넣어줍니다. 뷰도 마찬가지로 Contraints를 Scro.. 2020. 10. 27.

[iOS/UI] 테이블뷰 특정 인덱스로 바로 이동하기(UITableView scrollToRow) 안녕하세요 Foma입니다 !! 오늘은 테이블뷰에서 특정 인덱스 위치로 바로 이동하는 방법을 알아보겠습니다. 가끔 테이블뷰에 이동할때 바로 몇번째 section 또는 row인 셀이 떴으면 좋겠다고 생각했는데 열심히 구글링한 결과 UITableView에 scrollToRow 메소드를 사용하면 바로 스크롤링이 되면서 이동할 수 있었습니다. 자 그럼 시작하겠습니다 ! 먼저 테이블뷰와 테이블뷰셀과 그 안에 인덱스를 나타낼 레이블 원하는 인덱스로 이동할 버튼을 만들어줍니다. 뷰컨트롤러로 이동해 테이블뷰의 row 갯수와 row의 셀을 정해줍니다. 버튼을 눌렀을 때 원하는 인덱스로 이동하도록 설정해줍니다. 아래 사진과 같이 indexPath 상수를 만들어주어 원하는 row를 적어주고 아래 현재 테이블뷰에 scrollT.. 2020. 9. 14.

[iOS/UI] 서치바 커스텀하기 (Custom UISearchBar) 안녕하세요! Foma입니다! 이번에는 서치바에 대해서 다뤄볼건데요. 가끔 서치바의 배경색이나 돋보기이미지 등을 바꾸고싶을 때가 있었습니다. 그래서 열심히 구글링해본 결과 1.서치바의 플레이스홀더(검색하기 전에 회색글씨로 떠있는것) 세팅 2.서치바의 왼쪽 돋보기 아이콘 이미지 세팅 3.서치바의 오른쪽 엑스버튼 이미지 세팅(검색했을 때) 4.서치바를 네비게이션바에 넣는법 5.서치바의 배경화면,글씨색,플레이스홀더색 세팅 6.서치바 왼쪽,오른쪽 이미지 넣기 틴트색 세팅 이렇게 커스텀하는 법을 알 수 있었습니다. 먼저 가장 먼저 해주어야할 것은 searchbar를 만들어주는 것입니다. = > let searchBar = UISearchBar() 1.플레이스홀더 설정법은 searchBar에 .placeholder를.. 2020. 9. 2.

이전 1 2 3 4 5 다음

728x90

티스토리툴바