# CustomUI

sangpok

리액트에서 마퀴를 구현할 상황이 생겨서 간단하게 구현해보았다. 구현내용 내가 원하는 효과는 다음과 같았다. 오른쪽에서 왼쪽으로 흘러가는 마퀴 일정한 간격을 두고 반복되는 텍스트가 등장 뒤따라오는 텍스트가 맨 왼쪽에 다다르면 3초간 인터벌 다시 애니메이션 Package 설치 필요한 package들은 다음과 같다. 구현 스타일 파일과 로직 파일을 구분해서 구현하였다. MarqueeText.styled.tsx MarqueeText.tsx 주요 포인트는 아래와 같다. useAnimationFrame 요 Hooks은 Framer Motion에서 제공하는 Hook인데, 잘은 모르겠지만 javascript에서 제공하는 `request

tygerhwang

Tab View 만들기(4) - Custom 2탄 Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(3) - Custom 1탄 1편에 이어서 로직 부분에 해당되는 GetController의 코드를 만들어 보자. 작성된 코드는 최대한 복잡하지 않게 작성을 하였지만, 이해가 어려우시다면 Git 클론해서 직접 실행해보면서 값을 변경해 보면 이해가 될 것이다. 자 한번 작성해보자. Flutter 작성에 앞서 상태관리를 하여야하는 부분이 1탄에서 작성한 UI부분에 필요한 Cus

tygerhwang

Tab View 만들기(3) - Custom 1탄 Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(4) - Custom 2탄 Tab View 시리즈의 마지막은 직접 TabBarView 부분을 만들어 보려고 한다. 이전 글에서 PageView로 Tab View를 구현할 때는 상단 TabBar 부분을 직접 만들었지만 인디케이터의 포지셔닝 까지 PageView의 움직임과 싱크를 맞추지는 않았었는데, 이번에는 여기 부분도 싱크가 맞춰질 수 있도록 개발을 해보겠다. 우선 Tab Vie

tygerhwang

Tab View 만들기(2) - PageView Tab View 만들기(1) - Tabbar Tab View 만들기(3) - Custom 1탄 Tab View 만들기(4) - Custom 2탄 이전 글에 이어서 이번에는 Tab View를 PageView를 활용하여 만드는 방법에 대해서 소개하도록 하겠다. 여기서는 PageView로 만들기 때문에 TabBar도 직접 커스텀해서 만들어 볼 예정이다. 사실 TabBarView 위젯을 보면 PageView로 개발이 되어있기도 하고 TabBarView, PageView 작동 방식이 거의 비슷하다고 볼

tygerhwang

Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(3) - Custom 1탄 Tab View 만들기(4) - Custom 2탄 이번 글 부터 Tab View를 만드는 방법에 대해서 작성하도록 하겠다. Tab View는 앱을 만들다 보면 거의 무조건 사용을 해야하는 위젯 중에 하나라고 볼 수 있는데, Tab View가 조금의 다른 UI 구조로 개발을 하려고 하면 잘 안되서 결국 직접 만들어 쓰는 경우도 있었다. Tab View를 가장 쉽고 간단하게 사용하는 방법은 바로 Fl

tygerhwang

SNS 애니메이션 만들기(1) - 좋아요 아이콘 SNS 애니메이션 만들기(2) - 하트 모션 이번 글에서는 인스타그램 등의 SNS에서 좋아요 하트 아이콘을 클릭 했을 때 처럼 아이콘에 애니메이션 처리를 하는 방법에 대해서 작성하려고 한다. 애니메이션 처리를 위해 AnimatedSwitcher 위젯을 활용하였고, 아래에서 예시로 만든 방법 외에도 다른 방법으로도 충분히 처리하거나 커스텀으로 만들어서 사용할 수도 있다. Flutter UI 여기서 상태관리는 Provider를 사용하기에 Provider를 등록을 해주었다. 아래 snsUiHeartComponent 위젯을 메소드로 만들어서 다른 부분에서도 공통으로 사용할 수 있게 만들어 주었다. UI는 인스타그램의 폼과 비슷한 구조로 간단하게 만들었다. 공통 위젯을 살펴보면 아래 AnimatedS

hey_hen

서론 특별한 건 아니고, UIControl을 상속해서 만든 CustomTextField가 있다. 굳이 UITextField를 상속해서 만들지 않았던 이유는, CustomTextField를 UIView처럼 사용해야 하기 때문이었다. 만약 UITextField를 사용했다면, 사이즈나, 애니메이션 등에서 불편한게 많기 때문이라고 생각. 구현 어쨌든 그래서 UIControl을 사용해서 프로퍼티로 UITextField를 주입했는데 잘 알겠지만 TextField를 rx로 바인딩 할때 이런식으로 사용하는데 지금 형식은 View에서는 CustomTextField의 text속성에만 접근이 가능하고 UITextField에는 접근이 불가능하다. text속성에 rx 바인딩을 하고 싶어서 찾아봤는데, 생각보다 구글