[Doit! 안드로이드 앱 프로그래밍] Do it Mission 9&10
참고서적: Doit 안드로이드 앱 프로그래밍
Mission 9 : 고객정보 입력화면의 구성
고객정보 입력화면을 프래그먼트로 만들어보세요. 이화면은 고객의 이름,나이,생년월일을 입력받기 위한 것입니다.
- 프래그먼트로 고객 정보 입력 화면을 만들어 액티비티에 넣어줍니다.
- 프래그먼트의 레이아웃에는 리니어 레이아웃이나 상대 레이아웃을 사용하고 그안에 이름과 나이를 입력받는 입력상자, 생년월일을 표시하는 버튼 그리고 저장버튼을 배치합니다.
- 생년월일을 표시하는 버튼에는 오늘 날짜를 자동으로 표시하며, 버튼을 누르면 날짜선택 대화상자를 띄우고 날짜를 입력받아 표시합니다. 이름을 넣을수있는 입력상자에는 문자열을, 나이를 입력받기 위한 입력상자에는 숫자를 입력할 수 있도록 설정하여 적당한 키패드를 띄우도록 하고 나이는 세자리까지만 입력할 수 있게 만듭니다.
- 저장 버튼을 누르면 토스트로 입력한 정보를 표시합니다.
이문제는 간단하게 액티비티 하나에 분할화면 하나를 구성하고 텍스트뷰하나, EditText2개,버튼2개로 구성하면 된다.
이름과 나이에해당하는 editText는 inputType을 각각 TextPersonName과 number로 사람이름과 숫자만 받도록 한다.
생년월일 버튼의경우 Calendar 클래스의 getInstance()를 getTime()으로 받아 Date 타입의 변수에 할당하고, SimpleDateFormat 클래스의 format() 메소드의 파라미터로 넣어 현재날짜에 해당하는값으로 Button의 setText()로 자동으로 입력받도록 한다.
DatePickerDialog 클래스를 이용하여 onDatesetListener 를 등록하여 날짜 대화상자에 입력된 날짜를 버튼의 setText() 로 텍스트를 바꾸도록 한다.
그리고 위의 Listener를 변수에 할당하여(Listener객체생성), 버튼이 눌렷을때 DatePickerDialog를 new연산자를 통해 참조하여 객체를 할당한다.(=대화상자가 만들어진다.)
생성자 파라미터로는 context객체, 리스너객체와 날짜포맷 이 들어간다.
저장버튼이 눌렷을때 입력된정보인 이름,나이,생년월일 에 해당하는 각각의 Text를 getText()하여 토스트메세지로 띄워주면 된다.
Mission10: 기본앱 화면구성
바로가기메뉴와 하단탭 그리고 뷰페이저가 들어간 기본앱 화면을 만들어 보세요.
- 앱의 화면에 바로가기 메뉴와 하단탭 그리고 뷰 페이저가 들어가도록 만들어 보세요.
- 하단 탭에는 세개의 탭 메뉴가 보이도록 합니다.
- 하단탭에서 첫번째 텝 메뉴를 눌럿을때 보이는 첫번째 프래그먼트 화면안에 뷰페이저가 표시되도록 합니다.
- 바로가기메뉴를 넣어줍니다.
먼저, 간단히 구성을 원한다면 만들어진 NavigationView 형태를 이용해서 만들수있지만, 공부를위해서라면 일단 전부다 빈프로젝트상에서 만들어보길 권장한다.
바로가기메뉴를 구현하기 위해서는 NavigationView가 필요하며, 더불어 최상단 부모컨테이너는 DrawerLayout으로, AppbarLayout아래에 toolbarLayout을 구성하고, ActionBarDrawerToggle 클래스로 toggle을 구현하여 액션바의 햄버거모양의 아이콘을 누르면 서랍처럼 메뉴구성의 화면이 열리고 닫히는 UI를 구현할수 있다.
또한, 하단탭의경우 BottomNavigationView 클래스를 이용하여 별도의 Tab과 ActionBar 없이 menu 만 세팅해서 각각의 menu에 해당하는 Fragment들의 전환으로 구현할수 있다.
마지막으로 뷰페이저는 ViewPager 클래스를 이용하여 좌우스크롤로 화면을 전환하는 기능을하는 것으로 구현할수 있다.
이문제의 경우 나에게는 매우 어려웠다.
책에서 NavigationView로 바로가기메뉴를 만드는 예제를 할때, 만들어진 프로젝트를 이용하고 그마저도 나머지 소스코드의 경우 책에있는대로 적으면서 하다보니 뭔가 설명도 부족했고, 이해하기 어려웠다.
그래서 이문제를 푸는데만 대략 6~7시간정도 걸렸다.
첫번째난관으로는 XML 구상이다.
위와같이 구상했는데, ConstraintLayout 안에 프래그먼트의 전환으로 화면을 나타내줄 LinearLayout 아래의 ViewPager 와 하단탭의 BottomNavigationView 그리고 액션바를 구성해줄 AppbarLayout과 ToolbarLayout 이다.
이부분에서 Linearlayout은 상단탭과 하단탭의 사이에 만들어져야 되는데, 제약조건인 Constraint을 상단탭의 아래에, 하단탭의 위에 두도록 해도 이상하게 프래그먼트에 구성된 3개의 View들중 두개가짤리는 현상이 나타나는 것이다.(맨위의 Textview와 두번째의 Button 이 사라져서 안보임)
ViewPager는 LinearLayout아래에 존재하기때문에 각각의 width와 height를 LinearLayout전체를 차지하도록 match_parent로 설정했는데 이부분이 원인인거같았다.
Linearlayout이 width와 height가 각각 matchParent 로 설정됬었는데 아무리 제약조건을 건다해도 크기는 결국 부모컨테이너를 모두 차지하는것이므로 이 화면컨테이너를 구성해줄 ViewPager 역시 화면전체를 차지하도록 됫던것이다.
따라서 간단하게 Linearlayout의 height를 줄이도록 조정하여 해결했다.
또한 해결하지 못한것이 하단탭과 바로가기메뉴에 있는 메뉴들을 클릭했을때 프래그먼트의 전환을 야기하도록하고 싶었는데, ViewPager클래스와 Adapter 클래스로 뷰페이저를 구현한뒤에 했더니 각각의 메뉴버튼을 눌럿을때 앱이 강제로 중지되는 현상이 발생했다.
추측하기에 ViewPager와 Adapter로 구성하면 메뉴클릭으로 프래그먼트의전환을 야기하는 방식을 동시에 구현할수 없는 뭔가의 이유가 있는거같다.
이문제의 설명에도 보면 뷰페이저의 전환을 야기하는부분은 하라고 명시해둿지만, 각각의 메뉴를 클릭해서 이벤트를 발생하라고는 명시하지 않았다. 또한 책에서의 예제에서도 동시에 동작하도록 구현하지 않았다.
뒷부분을 공부하면서 설명하지 않을까 싶다.
아무튼 이책에서는 앞부분은 뭔가 전체적으로 설명이 부족하다… 모든책이 그렇긴 하지만..
바로가기메뉴
각각의 메뉴를 눌렀을때 토스트메세지출력
모든 예재소스코드는 깃허브주소 에 있다.
댓글남기기