[패스트캠퍼스 챌린지 최종 후기] Android

가장 최근에 따라하면서 만든 앱은 당근마켓처럼 판매할 물건을 올리고 물건을 누르면 채팅창이 열리는 앱을 만들어봤습니다. 

<LinearLayout
        android:id="@+id/toolBarLayout"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center_vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="중고거래"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:textStyle="bold" />
        <ImageView
            android:src="@drawable/carrot"
            android:layout_width="25dp"
            android:layout_height="25dp"/>
    </LinearLayout>

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@color/gray_cc"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolBarLayout" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/itemRecyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolBarLayout" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/addFloatingButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:backgroundTint="@color/orange"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:tint="@color/white" />

홈버튼, 채팅버튼, 마이페이지버튼을 아래 nav버튼으로 만들어주었습니다. home 버튼을 눌렀을때 나타나는 fragment 레이아웃의 코드입니다.

<LinearLayout
        android:id="@+id/toolBarLayout"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center_vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="채팅방 리스트"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:textStyle="bold" />
        <ImageView
            android:src="@drawable/carrot"
            android:layout_width="25dp"
            android:layout_height="25dp"/>
    </LinearLayout>

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@color/gray_cc"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolBarLayout" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/chatListRecyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolBarLayout" />

채팅 리스트 fragment 레이아웃 코드입니다.

<EditText
        android:id="@+id/emailEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:hint="Email"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/passwordEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailEditText" />

    <Button
        android:id="@+id/signInOutButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/orange"
        android:enabled="false"
        android:text="로그인"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/passwordEditText" />

    <Button
        android:id="@+id/signUpButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:backgroundTint="@color/orange"
        android:enabled="false"
        android:text="회원가입"
        app:layout_constraintEnd_toStartOf="@+id/signInOutButton"
        app:layout_constraintTop_toBottomOf="@+id/passwordEditText" />

마이페이지 layout 구성모습입니다. 

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/chatRecyclerView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/messageEditText"
        android:layout_width="0dp"
        android:layout_height="0dp"/>
    <EditText
        android:id="@+id/messageEditText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/sendButton"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/sendButton"
        android:text="전송"
        android:backgroundTint="@color/orange"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

채팅이 만들어졌을때 다른 사용자의 이름을 누르면 채팅창이 나옵니다. 그 채팅창의 layout을 구성하였습니다.

 

<FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:itemIconTint="@drawable/selector_menu_color"
        app:itemRippleColor="@null"
        app:itemTextColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_menu" />

메인 activity에서는 위에서 만들어준 홈버튼, 채팅 리스트 보기 버튼, 마이페이지 버튼을 연결해주었습니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val homeFragment = HomeFragment()
        val chatListFragment = ChatListFragment()
        val myPageFragment = MyPageFragment()

        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottomNavigation)

        replaceFragment(homeFragment)
        bottomNavigationView.setOnItemSelectedListener {
            when(it.itemId){
                R.id.home -> replaceFragment(homeFragment)
                R.id.chatList ->replaceFragment(chatListFragment)
                R.id.myPage -> replaceFragment(myPageFragment)
            }
            true
        }
    }

    private fun replaceFragment(fragment: Fragment){
        supportFragmentManager.beginTransaction()
            .apply {
                replace(R.id.fragmentContainer, fragment)
                commit()
            }
    }
}

메인 액티비티에서는 replaceFragment 함수를 만들어줬습니다. 버튼의 id 값의 따라서 fragment가 변하는 것으로 만들어주었습니다. 

위 처럼 여러가지를 만들어보면서 앱 개발자로 진로를 정할 수 있었습니다. 컴공을 다니지만 웹을 할지 앱을 할지 고민이 정말 많았는데 이 수업을 듣기 잘한 것 같습니다. 수업량이 어마어마해서 지금도 챌린지가 끝났지만 꾸준하게 따라가고있습니다. 또 수업을 들으면서 개인적으로 만들고 싶었던 앱도 제작하게 되었습니다. 처음엔 혼자 간단하게 할려했는데 다른분께서 좋아보이셨는데 협업을 하게 되었습니다. 이 글을 보는 여러분들도 본인이 만들고 싶은 앱을 만들고 싶으시다면 이 강의를 듣는걸 추천드립니다.

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.