[Android] Do It! 안드로이드 도전 08. 세 개 이상의 화면 만들어 전환하기 -> 액티비티와 프래그먼트로 구현해보기

Do It! 안드로이드 도전 08. P.259 문제

 

원래는 액티비티들로 구현하라고 나와있지만 프래그먼트도 사용해서 구현을 해 보겠다.

 

 

로그인 액티비티 - 메인 액티비티-(메인메뉴 프래그먼트, 고객 관리, 상품 관리, 매출 관리 프래그먼트)로 만들어 보겠다.

구현한 파일 목록.

유저의 정보를 나타내는 User 클래스

유저의 정보를 나타내는 User 클래스이다. 필수적인 것은 아니고, 그냥 데이터 바인딩에서 쓸 클래스이다.

 

이제 본격적으로 액티비티 관련한 파일들을 살펴보겠다.

 

로그인 액티비티

xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"> <data> <variable name="user" type="com.example.practiceproject.User" /> </data> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".LoginActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/do_login" android:textColor="@color/black" android:textSize="45dp" android:textStyle="bold" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <EditText android:id="@+id/login_id_editText" android:layout_width="180dp" android:layout_height="wrap_content" android:hint="@string/id" android:text="@={user.name}" android:textColor="@color/black" android:textSize="30dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/main_login_btn" app:layout_constraintBottom_toTopOf="@id/login_password_editText"/> <EditText android:id="@+id/login_password_editText" android:layout_width="180dp" android:layout_height="wrap_content" android:hint="@string/password" android:text="@={user.password}" android:textColor="@color/black" android:textSize="30dp" android:inputType="textPassword" app:layout_constraintStart_toStartOf="@+id/login_id_editText" app:layout_constraintTop_toBottomOf="@+id/login_id_editText" app:layout_constraintBottom_toBottomOf="@+id/main_login_btn"/> <Button android:id="@+id/main_login_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="35dp" android:background="@drawable/selector_rectangle_bg" android:onClick="loginBtnOnClick" android:padding="10dp" android:text="@string/login" android:textSize="34dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toEndOf="@+id/login_id_editText" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> </layout>

로그인 액티비티 xml 모습

로그인 화면의 레이아웃 파일에서는 DataBinding을 이용해서 User 클래스를 <data> 태그에 <variable>로 넣었다.

그리고 양방향 데이터 바인딩을 사용해서 EditText 값이 바뀔때마다 자동으로 User 클래스의 값도 바뀌도록 했다.

 

메인 액티비티 소스코드 파일

메인 액티비티의 소스코드 파일이다. 데이터 바인딩과 그동안 써왔던 ActivityResultLauncher를 사용했다.

그리고 특정 메뉴 화면에서 종료했을 때, 9001 resultCode를 넘기도록 해서 어떤 메뉴에서 왔는지 받아오도록 설정했다.

로그인버튼을 클릭했을 때, User의 아이디 혹은 비밀번호가 빈칸이면 로그인이 안되도록 설정했다.

메인 액티비티 레이아웃 xml파일

프래그먼트로 구현할 것이다. container 부분에 프래그먼트를 넣으면 된다.

xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/main_menu" android:textColor="@color/black" android:textSize="45dp" android:textStyle="bold" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/main_manage_cutomer_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="75dp" android:background="@drawable/selector_rectangle_bg" android:padding="10dp" android:text="@string/manage_cutomer" android:textSize="34dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView" /> <Button android:id="@+id/main_manage_sale_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="75dp" android:padding="10dp" android:text="@string/manage_sale" android:textSize="34dp" android:background="@drawable/selector_rectangle_bg" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/main_manage_cutomer_btn" /> <Button android:id="@+id/main_manage_product_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="75dp" android:padding="10dp" android:text="@string/manage_product" android:textSize="34dp" android:background="@drawable/selector_rectangle_bg" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/main_manage_sale_btn" /> </androidx.constraintlayout.widget.ConstraintLayout> </layout>

메인 메뉴 레이아웃 xml 모습

메인 메뉴 레이아웃에서는 뷰바인딩만 사용했다.

큰 어려운 부분은 없다. 

메인 액티비티 코드

메인 액티비티에서는 맨 처음 실행될 때 로그인 액티비티에서 넘어온

ID값을 받아온 후 OOO님. 환영합니다 토스트 메시지를 띄우도록 만들었다.

 

그리고 맨 처음 container에 메인프래그먼트가 들어가도록 만들었다.

메인 메뉴 프래그먼트에서의 메서드를 살펴보자.

• setFragmentFrsultListener() : 특정 메뉴 프래그먼트가 종료될 때 result값을 넘기도록 했다. 원래는 메뉴로 가는 버튼을 누르면 bundle 객체를 넘겨줘서 프래그먼트가 다시 만들어질 때 호출하는 식으로 만들었는데, 뒤로가기 버튼을 눌러도 전달이 돼서 다르게 만들어 줘야 했다. 찾아보니 프래그먼트도 ActivityResult같은 메서드가 있어서 구현했다.

프래그먼트와 통신  |  Android 개발자  |  Android Developers

 

[Android][Java] 프래그먼트 뒤로가기 누르면 원상복구 + 프래그먼트 데이터 전달

설명은 위 글에 간단하게 해놨다.

 

• initView() : 버튼들의 온클릭 리스너를 지정해주는 메서드이다.
• btnOnClick() : 버튼들의 온클릭 리스너를 만들어 준것이다. 처음에 버튼에 어떤 텍스트 값이 적혀있는지 값을 받아온 후 번들 객체에 저장한다. 그리고 상세메뉴 프래그먼트에 저장하고 현재 실행중인 프래그먼트를 스택에 저장한 후 프래그먼트를 replace한다.

메뉴 레이아웃 xml 파일

메뉴 레이아웃에서는 최상단에 텍스트뷰가 아무것도 적히지 않은 채 있다.

이 텍스트뷰는 메인 화면에서 어떤 메뉴를 눌렀는지 데이터 값을 받아서 동적으로 설정되게 했다.

나머지는 버튼들이므로 패스하겠다.

 

메뉴 프래그먼트 소스 파일

메뉴 프래그먼트에서의 각 메서드가 어떤 역할인지 설명하겠다.

• initView() : 맨 처음에 Bundle 객체를 getArguments() 메서드로 받아온 후 메인 화면에서 어떤 버튼을 눌러서 들어온건지 getString() 메서드를 이용해서 받아온다. 그리고 상단에 텍스트 뷰에 메뉴 이름을 띄운다. 그러고 나서 버튼들의 온클릭 리스너를 지정해준다.
• goMainBtnOnClick() : 메인화면으로 가는 버튼의 온클릭 리스너이다. 상단의 메뉴이름을 가져와서 메인화면으로 돌아갈 때 어떤 메뉴화면에서 들어온건지에 대한 것을 저장해놓고 번들 객체에 저장해 놓는다. 그리고 bundle 객체를 setFragmentResult 메서드를 통해서 전달한 후 종료시키고 프래그먼트 스택에서 메인 프래그먼트를 띄운다.
• goLoginBtnOnClick() : 로그인화면으로 돌아가는 버튼의 온클릭 리스너이다. 상단의 메뉴이름을 가져와서 메인화면으로 돌아갈 때 어떤 메뉴화면에서 들어온건지에 대한 것을 저장해놓고 인텐트 객체에 저장해 놓는다. 그리고 액티비티를 아예 종료시켜야 하므로 setResult로 resultCode와 인텐트 객체를 넘겨주고 액티비티를 종료시킨다. (종료시키는 것이 로그인 화면으로 가는 것이기 때문이다.)

 

기능화면

 

사실 액티비티들로 구현하면 쉬웠겠지만, 프래그먼트들을 사용해서 만들어보았다.

만들면서 내가 몰랐던 프래그먼트들에 대한 기능들도 알게돼서 좋았던 것 같다.