목록Custom (6)
와챠의 우당탕탕 개발 기록장

flutter에서는 온보딩 화면을 간단하게 만들 수 있는 라이브러리를 제공해준다. 바로 이것. https://pub.dev/packages/introduction_screen introduction_screen | Flutter Package Introduction/Onboarding package for flutter app with some customizations possibilities pub.dev 기존에 제공해주는 기능은 다음과 같다. 이미지, 타이틀, 설명 텍스트, 스킵 버튼, 다음 버튼, 인디케이터 이것들의 위치가 고정이다. 그래서 아래와 같이 이미지, 타이틀, 설명을 지정해주면 나만의 온보딩을 간단하게 만들 수 있다. PageViewModel( title: "Title of introd..

만들고자 하는 것: 지상/층수 Text가 들어간 Picker Picker divider color 변경 '선택 완료' 버튼 클릭 시 선택한 값 반환 Acivity에서 Dialog 생성하고 Interfase 이용해서 반환값 가져오기 Fragment에서 Dialog 생성하고 Interfase 이용해서 반환값 가져오기 1. dialog_select_floor.xml 생성 + Picker divider color 변경 2. SelectFloorDialog.kt 생성 package com.example.safetymanagement2022.ui.building_detail import android.content.Context import android.graphics.Color import android.gra..

목차 Data binding 적용하기 Data binding 적용 시 image의 src에 이미지 넣는 법 string formatting strings.xml의 string formatting string formatting + 커스텀 BindingAdapter 사용하기 Packaging 1. Data binding 적용하기! Data binding(공식문서) 1. gradle에 data binding enabled를 true로 설정하는 코드 추가 android { ... dataBinding { enabled = true } } 2. 기존 layout에서 Convert to data binding layout 클릭하여 루트 태그를 으로 변경하기 3. 데이터 추가하기 그러면 View에서 이렇게 사용 가..

아래 UI는 "동네 고영희"앱의 UI입니다^______^ 귀엽죠 해당 UI의 Tab 부분에 선택이 안 된 tab 아래 underline이 있는 걸 확인할 수 있다!! 만들어봅시다 res>drawable>tab_underline.xml 이 xml은 뒤에 일단 밑줄의 색이 될 사각형을 깔아놓고 그 위에 탭 레이아웃의 배경색인 흰 색 사각형을 바닥에서 1.5dp만큼 올려깐 것이다. 이 xml을 TabLayout에 요로코롬 달아주면 된다.ㅎ app:tabBackground="@drawable/tab_underline" 참고 https://stackoverflow.com/questions/36367114/set-color-to-unselected-tab-indicator-in-tab-layout

아래 화면은 "동네 고영희" 앱 UI 입니다! 결과 화면 기존 다이얼로그를 사용해도 되겠지만 폰트 변경 과정이 번거롭고/dp 간격 조정을 자유롭게 하기 위해 커스텀하기로 결정!! 방법: CustomDialog.kt 생성 custom_dialog.xml 생성 Dialog 띄우기 1. CustomDialog.kt 생성 import android.graphics.Color import android.graphics.drawable.ColorDrawable import android.os.Bundle import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import androidx.fragment.app...

아래 화면은 '동네 고영희' 앱 UI입니다!!! 결과 화면 스피너(TextView임) 클릭하면 아래에서 다이얼로그(BottomSheetDialog)가 나옴 아이템 선택 시 선택한 아이템으로 스피너(TextView) text 변경 아래로 드래그 시 다이얼로그 내려감(기본 기능임) 클릭 효과 적용 만들어보자~~~ 요약: spinner 처럼 생긴 TextView 만들기 res>drawable>spinner_bottom.xml 생성:레이아웃 맨 위의 오른쪽, 왼쪽 모서리를 둥글게 하기 위함 res>layout>spinner_custom_layout.xml 생성: BottomSheetDialog Layout 만들기 res>values>themes>themes.xml에 아래 style 추가: 뒷배경 투명 처리 1번..