1 ~ 5 편을 통해 사용할 API에 대한 사용 권한을 확보 했다. 이제 본격적인 타임라인을 구성할 차례.
먼저 세 플랫폼의 Timeline은 Recylcer View를 통해 각각 다른 모습으로 내용물을 구성한다.
Actionbar부분은 각각 다르다.
Twice에서는 Twitter를 참고하여 Layout을 구성한다.
Layout은 Drawer Layout을 구성한 activity_main과 Timeline을 구성한 drawer_user_content 두 부분으로 나뉜다.
1) activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_drawer_user"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.MainActivity">
<include
layout="@layout/drawer_user_content"/>
<com.google.android.material.navigation.NavigationView
android:id="@+id/drawer_user_navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/drawer_user_header"
app:menu="@menu/drawer" />
</androidx.drawerlayout.widget.DrawerLayout>activity_main은 크게 담고 있는내용은 없다. Drawer_layout과 Drawer을 꺼냈을 때 나올 NavigationView item을 담고있는 menu 내용들이 존재한다.
2) drawer_user_content.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Top -->
<RelativeLayout
android:id="@+id/main_top"
android:layout_width="match_parent"
android:layout_height="@dimen/timeline_height"
android:background="@color/timelineHeadBack"
android:elevation="10dp"
android:padding="@dimen/timeline_padding">
<ImageView
android:id="@+id/main_profile_setting"
android:layout_width="@dimen/timeline_height"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:paddingHorizontal="5dp"
android:paddingVertical="2dp"
android:src="@drawable/list" />
<TextView
android:id="@+id/main_top_home_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_toEndOf="@id/main_profile_setting"
android:layout_toStartOf="@id/main_top_post_edit"
android:clickable="true"
android:gravity="center_vertical"
android:padding="2dp"
android:text="Home"
android:textColor="@color/HeadTextColor"
android:textSize="24sp" />
<EditText
android:id="@+id/main_top_search_edit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_toEndOf="@id/main_profile_setting"
android:background="@drawable/edittext_background"
android:hint="Search"
android:imeOptions="actionSearch"
android:paddingHorizontal="10sp"
android:singleLine="true"
android:visibility="gone" />
<ImageView
android:id="@+id/main_top_post_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:paddingHorizontal="5dp"
android:paddingVertical="2dp"
android:src ="@drawable/edit"/>
</RelativeLayout>
<!-- Content Fragment -->
<FrameLayout
android:id="@+id/main_frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/main_bottom"
android:layout_below="@id/main_top" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/main_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="@menu/main_bottom">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>먼저 Top에 해당하는 부분은 어플리케이션의 메뉴의 해당하는 부분이다.
Drawer를 꺼내기 위해서는 해당 버튼을 눌러야만 하는 방식으로 제한했다.
ImageView와 Textview는 main_frame_layout에서 표시되는 Fragment에 따라 홈, 검색으로 바뀌게 된다.
Content Fragment Field에서는 앞서 말한 홈, 검색 Fragment가 Inflate된다.
Oncreate와 함께 Frame Layout에는 Timline Recycler View를 가지고 있는 Home Fragment가 적재된다.
3. fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_drawer_user"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/main_time_line_swipe_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/main_time_line_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/timelineCardUnderBack"/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>당겨서 새로고침을 하기위한 SwipeRefreshLayout에 RecyclerView를 포함시켰다.
3. menu.drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="@+id/drawer_inquiry_book_post"
android:title="@string/app_booking_tile"/>
</group>
<group
android:id="@+id/drawer_menu_related_user"
android:checkableBehavior="single">
<item
android:id="@+id/drawer_account"
android:title="@string/app_account_title"/>
<item
android:id="@+id/drawer_link"
android:title="@string/app_linkage_title" />
<item
android:id="@+id/drawer_logout"
android:title="@string/app_logout_title" />
</group>
<group android:id="@+id/drawer_menu_related_app">
<item
android:id="@+id/drawer_app_setting"
android:title="@string/app_setting_title" />
<item
android:id="@+id/drawer_app_developers"
android:title="@string/app_about_title" />
</group>
</menu>
Source Code에 대한 소스코드는 Github를 통해 공유되고 있습니다.
궁금하신 사항이나 부족한 설명은 댓글을 남겨주시면 답변드리도록 하겠습니다.
MainActivity.java
GirlFriend-Yerin/Twice
Contribute to GirlFriend-Yerin/Twice development by creating an account on GitHub.
github.com
FragmentHome.java
GirlFriend-Yerin/Twice
Contribute to GirlFriend-Yerin/Twice development by creating an account on GitHub.
github.com