확장된 플로팅 액션 버튼 확장된 플로팅 액션 버튼은 화면에 떠있는 듯한 버튼을 제공하는 뷰입니다. 머터리얼 라이브러리가 처음 나왔을 때는 플로팅 액션 버튼을 제공했지만, 지금은 버튼에 문자열까지 출력할 수 있는 확장된 플로팅 액션 버튼도 제공 합니다. 확장된 플로팅 액션 버튼 확장된 플로팅 액션 버튼의 icon 속성으로 이미지를 지정하면 이 이미지를 포함해 화면에 떠 있는 듯한 버튼이 출력됩니다. 그리고 text 속성으로 문자열을 지정하면 이미지와 함께 출력됩니다. 만약 text속성을 지정하지 않고 icon 속성만 지정하면 둥근 모양으로 나옵니다. 그리고 코드에서 문자열까지 나오게 확장하거나 아이콘만 나오게 축소하는 등 버튼의 출력 형태를 조절할 수 있습니다. 확장된 플로팅 액션 버튼 조절 binding..
내비게이션 뷰 – 드로어 화면 구성 내비게이션 뷰는 드로어 레이아웃으로 열린화면애 출력되는 내용을 구성할 때 사용 하는데, 보통은 메뉴 항목을 나열하는 형태로 구성합니다. 내비게이션 뷰 등록 (... 생략 ...) 메뉴를 구성한 XML 파일을 menu 속성에 지정만 해도 실행 결과처럼 항목이 자동으로 출력됩니다. 항목 선택 이벤트는 DrawerLayout의 setNavigationItemSelectedListener() 함수로 이벤트 핸들러를 지정하여 처리 합니다. 항목 선택 이벤트 핸들러 binding.mainDrawerView.setNavigationItemSelectedListener { Log.d("kkang", "navigation item click... ${it.title}") true }
탭 레이아웃 – 탭 버튼 구성 탭 레이아웃은 탭으로 구분하는 화면에서 탭 버튼을 배치하는 레이아웃입니다. 탭 레이아웃 등록 FrameLayout위치에 탭의 내용을 출력합니다. 코트에서 탭 버튼정의 val tab1: TabLayout.Tab = tabLayout.newTab() tab1.text="Tab1" tabLayout.addTab(tab1) val tab2: TabLayout.Tab = tabLayout.newTab() tab2.text="Tab2" tabLayout.addTab(tab2) val tab3: TabLayout.Tab = tabLayout.newTab() tab3.text="Tab3" tabLayout.addTab(tab3) 탭 버튼을 코드에서 정의하지 않고도 레이아웃 XML 파일의 ..
컬랩싱 툴바 레이아웃 – 앱바 접히는 형태 설정하기 컬랩싱 툴바 레이아웃(CollapsingToolbarLayout)은 앱바 레이아웃 하위에 선언하여 앱바가 접힐 때 다양한 설정을 할 수 있는 뷰입니다. 앱바 레이아웃 하위에 CollapingToolbarLayout을 추가하여 앱바가 스크롤되어 접히거나 나타날 때 어떻게 동작해야 하는지 설정합니다. 컬랩싱 툴바 레이아웃 등록 컬랩싱 툴바 레이아웃 title 속성으로 앱바의 제목을 설정했으며 expandedTitleMarginStart, expandedTitleMarginBottom 속성으로 앱바가 접히지 않았을 때 제목의 위치를 설정했습니다. 그리고 앱바가 접히면서 내용이 정상으로 출력되지 못하는 상황이라면 contentScrim 속성에 지정한 색상으로 ..
앱바 사용하기 머티리얼 라이브러리란? 구글의 머티리얼 디자인은 모바일과 데스크톱, 그리고 그밖에 다양한 장치를 아우르는 일관된 애플리케이션 디자인 지침입니다. 머터리얼 라이브러리를 사용하려면 빌드 그래들 파일의 dependencies 항목에 선언해 줘야 합니다. 머터리얼 라이브러리 선언 implementation 'com.google.android.material:material:1.4.0' 스튜디오의 4.1버전 이후부터는 자동으로 머터리얼 라이브러리가 선언됩니다. 앱바 레이아웃 – 화면 위쪽 영역 꾸미기 앱바란 화면 위쪽의 꾸밀 수 있는 영역을 의미합니다. 앱바를 이용해 화면 위쪽 영역의 크기만 늘릴 수도 있지만 메뉴를 출력 하는 툴바 포함할 수도 있습니다. 머터리리얼 라이브러리에서는 이러한 앱바를 구..
드로어 레이아웃 – 옆에서 열리는 화면 구성 드로어 레이아웃은 액티비티 화면에 보이지 않던 내용이 왼쪽이나 오른쪽에서 손가락의 움직임에 따라 밀려 나오는 기능을 말합니다. 그래들 파일의 dependencies항목에 드로어 레이아웃 선언 implementation 'androidx.drawerlayout:drawerlayout:1.1.1' 드로어 레이아웃을 액티비티에 적용시키려면 레이아웃 XML 파일에서 드로어 메뉴가 출력되어야 하는 부분의 태그를 DrawerLayout으로 선언해줘야 합니다. DrawerLayout 아래에는 뷰를 2개 선언해줘야 합니다. 이렇게 해주면 자동으로 첫 번째 하위 태그 부분을 액티비티 화면에 출력해주고 두 번째 하위 태그 부분이 안 보이다가 끌려 나옵니다. 드로어 레이아웃 구성..
뷰 페이저 2 – 스와이프로 넘기는 화면 구성 뷰 페이저는 스와이프(손가락으로 화면을 탭 하여 오른쪽이나 왼쪽으로 미는) 이벤트로 화면을 전환할 때 사용합니다. 뷰 페이저는 플랫폼 API에서 제공하지 않으므로 androidx 라이브러리를 이용해 개발해야 합니다. 오랫동안 이용했던 viewpager와 별개로 2019년에 viewpager2를 제공하기 시작합니다. viewpager2가 당연스럽게 viewpager보다 더욱 많은 기능을 제공하므로 viewpager2를 사용하는 것이 좋습니다. 그래들 파일의 dependencies항목에 뷰 페이저2 선언 implementation 'androidx.viewpager2:viewpager2:1.0.0' XML 파일에 뷰 페이저 2 라이브러리 추가 뷰 페이저2는 화면..
리사이클러 뷰- 목록화면 구성 레이아웃 매니저 레이아웃 매니저는 어댑터로 만든 항목을 리사이클러 뷰에 배치합니다. RecyclerView.LayoutManager를 상속받는 클래스로, 라이브러리에서 다음처럼 제공합니다. 함수 설명 LinearLayoutManager 항목을 가로나 세로 방향으로 배치합니다. GridLayoutManager 항목을 그리드로 배치합니다. StaggeredGridLayoutManager 항목을 높이가 불규칙한 그리드로 배치합니다. 항목을 가로·세로 방향으로 배치 LinearLayoutManager를 사용합니다. 항목을 세로로 배치 binding.recyclerView.layoutManager = LinearLayoutManager(this) 항목을 가로로 배치 / LinearL..
리사이클러 뷰- 목록화면 구성 리사이클러 뷰 – 목록 화면 구성 리사이클러 뷰 기초 사용법 리사이클 뷰는 여러 가지 항목을 나열하는 목록 화면을 만들 때 사용합니다. 리사이클 뷰는 RecyclerView클래스를 이용하지만 이것만으로는 화면에 아무것도 출력되지 않습니다. 다음과 같은 구성요소를 이용해야 합니다. 구성요소 설명 ViewHolder(필수) 항목에 필요한 뷰 객체를 가집니다. Adapter(필수) 항목을 구성합니다. LayoutManager(필수) 항목을 배치합니다. ItemDecoration(옵션) 항목을 꾸밉니다 참고 https://developer.android.com/guide/topics/ui/layout/recyclerview?hl=ko RecyclerView로 동적 목록 만들기 | ..
프래그먼트 – 액티비티처럼 동작하는 뷰 프래그먼트 소개 프래그먼트는 액티비티 화면을 구성하는 뷰인데, 그 자체만으로는 화면에 아무것도 출력되지 않습니다. 프래그먼트가 다른 뷰와 다른 점은 액티비티처럼 동작한다는 것입니다. 즉, 액티비티에 구현되는 모든 내용은 프래그먼트 클래스에도 작성할 수 있습니다. 탭을 예로 들면 한 개의 액티비티에서 탭의 여러 항목별로 각각의 화면을 프래그먼트로 구현할 수 있다는 말입니다. 참고 https://developer.android.com/guide/fragments?hl=ko 프래그먼트 | Android 개발자 | Android Developers 프래그먼트 Fragment는 앱 UI의 재사용 가능한 부분을 나타냅니다. 프래그먼트는 자체 레이아웃을 정의 및 관리하고 자체 ..