arvigoes

안드로이드 JetPack 중에서 많이 사용되고 있고, 개발방향으로 구글에서 많이 밀고 있는 Navigation 의 기본 사용법에 대해 알아보도록 하겠습니다. Navigation 은 사용자가 앱 내의 여러 콘텐츠를 이동하고, 그곳을 들어갔다 나올수 있게 하는 상호작용을 의미 합니다. JetPack 의 Navigation 컴포넌트는 단순 버튼 클릭에서 부터 좀 더 복합한 패턴에 이르기까지 다양한 이동을 구현 할 수 있도록 도와 줍니다. 이제 본격적인 설정법을 알아 보도록 합니다. 우선 build.gradle 에서 설정 부터 추가 합니다. build.gradle (project) repositories { google() jcenter() } build.gradle (app) dependencies { .....

Jetpack은 개발자가 관심 있는 코드에 집중할 수 있도록 권장사항 준수, 상용구 코드 제거, 모든 Android 버전과 기기에서 일관되게 작동하는 코드 작성을 돕는 라이브러리 모음입니다. JetPack 은 개발자들이 더욱 쉽게 높은 퀄리티의 앱을 개발 할 수 있도록 도와 주는 라이브러리 모음입니다. JetPack 포함도니느 라이브러리들은 androidx.* 라는 이름으로 패키지화 되어 있고, android platform API 와는 분리가 되어 있습니다. 사용을 위해서는 원하는 jetpack에서 사용할 라이브러리를 선택하고, build.gradle(Project) 에는 저장소 -google() 추가 build.gradle(Module:App) 에 dependencies 에 추가 해 주면 됩니다. J..

이번에는 각 view 에 클릭 이벤트로 색을 바꿔 보도록 하겠습니다. styles.xml 에서 이전에 만든 style "WhiteBox" 의 background 를 white 로 변경 해 줍니다. 백그라운드 색상을 흰색으로 변경하면 박스들이 약간의 흔적만 남기고 아무것도 보이지 않네요 constraint layout 의 background 의 색상이 완전한 white 라 색상차이가 있는것 같습니다. 자 이제 오랜만에 MainActivity.kt 에서 작업을 해 보도록 하죠 각 뷰에 클릭 이벤트 리스너 (setOnClickListener) 를 생성 해 주도록 합니다. 뷰가 여러개 이번트 리스너 등록하는 함수를 만들어서 onCreate 에서 호출 하게 해 주도록 했습니다. 코드를 간단히 설명하면 setLis..

다른 view 들을 추가하기 전에 chain 에 대해 잠깐 언급하고 넘어가도록 하겠습니다. 두개의 뷰 A, B가 있을때, A와 B가 "서로" 연결되어 있을 경우 이것을 체인 관계 상태라고 합니다. 여러 개의 뷰를 연결할 수도 있으며, 체인상태의 뷰는 하나의 헤드(HEAD)를 가지게 되는데 Vertical방향으로 연결할 경우 연결된 뷰의 최상단에 위치한 뷰, Horizontal 방향으로 연결할 경우 가장 왼쪽에 있는 뷰가 헤드가 됩니다. 두 버튼을 chain 연결 했을때 xml 에서는 자동으로 두 버튼에 대해 제약이 생기게 됩니다. Spread Chain : 모든 요소들이 동일한 간격으로 나눠서 배치 됩니다. Spread Inside Chain : 모든 요소들이 양끝을 기준으로 배치되고 동일한 간격으로 분..

이제 box two를 추가할 차례입니다 일정한 간격유지를 어떻게 설정하는지 보도록 하겠습니다 textView 를 하나 끌어다 ConstraintLayout 에 추가 하시면 됩니다. 추가한 textView 에 ID 를 box_two_text 로 지정 합니다. layout_width , layout_height 모두 130dp 로 사이즈 정해 주시고, style 에 WhiteBox 를 설정 해 주도록 합니다. 사이즈가 항상 유연하게 바뀌는 것도 좋지만 box tow처럼 항산 고정된 사이즈 일때도 필요합니다. 반응형도 중요하지만 의도치 않는 확대나 축소로 인한 깨짐도 발생할 수 있으니 상황에 잘 맞춰서 사용하셔야 합니다 앞으로 추가할 view 들까지 모두 strings.xml 에 추가 하도록 합니다. Colo..

이번에는 만능 Layout 이라 불리는 Constraint Layout 에 대해 학습해 보도록 하겠습니다. 이번 Constraint Layout 에 대해서는 처음부터 끝까지 실습 위주로 가도록 하겠습니다. 좀 더 자세한 내용이 궁금한게 있다면 추가로 포스팅 하도록 하겠습니다. Layout 을 구성하는 것은 UI 를 구성하는 것입니다. UI 화면구성 작업은 쉬운 일이 아닙니다. 앱의 요구 사항 변화가 있을때마다 UI 를 손대는 일도 빈번하게 발생하고, 사용하기 불편하지 않게, 동작을 잘 연결 해 주는것도 상당히 어려운 일입니다. 그리고 우리가 만드는 앱이 항상 동일한 환경에서 구동 되는 것도 아니라 상황에 맞게 각각 사이즈 조절이 되는 반응형으로 제작 되는것이 아주 중요합니다. Constraint Layo..

데이터 바인딩을 사용하지 않으면 findViewById 같은 함수를 통해 실시간으로 모든 리소스 트리 를 뒤져서 해당 데이터를 찾아가야 합니다. 실시간이라면 실행도중에 발생하는 일이라 프로그램의 수행이 느리게 됩니다. 간단한거 수행하는데 뷰들 찾아다니느라 오래걸린다면 상당히 아깝겠죠? 이런 이유로 데이터 바인딩을 사용 합니다. 미리 바인딩 시켜두고 직접 참조 하게 된다면 일일이 찾아서 할 필요가 없으니 검색 오버해드가 상당히 줄어 들게 됩니다. 모르면 못 쓰지만 알게 되면 무조건 쓰는게 좋을 것 입니다. 대략적인 데이터 바인딩 동작 이미지 입니다. 어떻게 동작하는지 한번 상상해 보세요 우선 뷰에대한 데이터 바인딩 먼저 확인 해 보도록 하겠습니다. 데이터 바인딩을 사용하기 우해서는 우선 설정이 필요합니다...

텍스트 에디터가 지난번에 만들어 졌습니다. 사용자 입력이 가능해 졌다는 의미 입니다. 그렇다면 이번에는 사용자 입력을 받아서 그 내용을 반영 시켜 보도록 하겠습니다. 전체 과정은 TextEditor 수정 -> Done Button push -> TextView 에 내용 출력 입니다. 사용자가 입력을 하기전에는 TextEditor 와 Button 만 보이도록 할 것이고 입력이 완료 되면 입력된 내용만 보이도록 할 예정 입니다. 우선은 버튼이 필요 하니 버튼을 추가 하도록 하겠습니다. id 를 done_button 으로 변경 style 변경해 줍니다. 미리 정의된 버튼 스타일중에 Widget.AppCompat.Button.Colored 를 선택해 주도록 합니다. 선택해 보시고 마음에 안드시면 다른 스타일도 ..

글쓰기용 텍스트에드터를 추가 해 보도록 합시다. palette 에서 Text 탭을 선택 합니다. editText 라는 id로 plain Text view 가 추가되었습니다. 추가된 editText ID 변경해 줍니다. (저는 nickname_edit 라고 했습니다.) 이름 만드는 규칙도 각자 만들어 보시길 바래요 나중에 view 들이 많아지면 규칙없이 마음대로 만들었을때 아이디 찾기가 정말 힘들어 지니 각자 나름의 규칙을 정해서 만들어 보세요 만이들 사용하는 규칙도 다음에 기회되면 올리도록 하겠습니다 이제 많이 하셨죠? 만들어둔 syle 도 적용 시켜 줍니다. NameStyle common Attributes > textAppearance > textAlignment 를 가운데정렬로 선택해 주도록 합니다..

ScrollView 이번에 추가해볼 View 는 ScrollView 입니다. ScrollView 는 영역이 너무커서 한 화면에 다 보여주지 못 할때 사용이 됩니다. 한개의 ScrollView는 오직 한개의 뷰만을 가질 수 있습니다. 보통은 아래 그림처럼 LinearLayout View 를 포함 시키고 LinearLayout 의 자식으로 여러 View 들을 등록 하는 방식으로 많이 사용 합니다. (Layout 또한 View 입니다.) 이처럼 많은 View 들을 보여 줄 필요 없이 하나의 뷰만 보여줄 계획이라면 LinearLayout 필요 없이 바로 TextView 등을 추가 하셔서 사용 하셔도 됩니다. (성능향상) 스크롤 뷰 추가 생성된 ScrollView 는 남은 여유 공간 모두를 차지하게 됩니다. 스크..