[Android] 카카오톡 페이지 만들기(PagerSlidingTabStrip + Viewpager)

안드로이드 개발자 유혁입니다.

이전에 Viewpager와 FragmentTabhost를 이용한 카카오톡 페이지를 만들어 보았습니다.

위 두 가지 방식은 카카오톡 페이지라고 하기에 2%부족한 느낌을 주는 방식이였습니다.

ViewPager는 현재 상태의 대한 띠가 없고, FragmentTabhost는 좌우 스크롤이 안되는 맛있어보이지만 맛없는 느낌을 주었습니다. 이번에 포스팅하는 카카오톡 페이지는 오픈소스로 이루어진 PagerSlidingTabStrip + Viewpager를 이용하여 실제 카카오톡과 비슷한 환경으로 제작을 해 보겠습니다.

 

 

결과

 

 

1. build.gradle(Module:app) 라이브러리 추가.

 

compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

 

Sync Now 버튼을 클릭합니다(우측 상단에나옵니다.)

 

 

2. 어플리케이션 구조(Application Structure)

 

 

fragment와 adapter를 따로 구분지어 패키지를 만들었습니다. 안드로이드 개발에 하나의 패키지의 모든 클래스를 넣으면 복잡하고 유지보수하기가 너무 어렵습니다. 저도 개발하고 일주일뒤에 다시보면 새로운 느낌을 받습니다. 최대한 정리를 잘 해주시기 바랍니다. 더 나아가면 MVC, MVVP, MVP 패턴들이 있으니 참고 하시면 도움이 될 것입니다.

 

adapter는 fragmentpage를 관리해주며 fragment패키지 내에 각각 페이지에 상응하는 fragment가 존재합니다.

layout에는 안드로이드 화면을 제공해주는 View로 구성되어 있으며 layout은 패키지로 분리해서 나눌 수 없으므로 초기에 구분이 쉽게 이름을 설정해 주도록 합시다.

 

 

 

 

3. 프로그램 동작 Flow

 

저는 에제를 보여주기 때문에 MainActivity에서 바로 카카오톡 페이지를 보여주는 어플리케이션입니다. 좀더 완성감 있게 하려면 초기에 Splash Activity를 넣어주면 근사한 프로그램이 될 것입니다.

http://yoo-hyeok.tistory.com/31

Splash Activity가 무엇인지 사용하는 방법은 위 링크에서 정보를 얻을 수 있습니다.

 

메인엑티비티에 Viewpager를 선언과 동시에 adapter를 설정시킵니다.

어뎁터에서 fragment를 할당해주어 카카오톡 페이지를 만들어 줍니다.

자세한 설명은 소스를 보면서 하겠습니다.

 

 

4. 프로그램 소스

 

제어부분(JAVA)

 

MainActivity.class

 

import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import com.astuetz.PagerSlidingTabStrip; import com.yoohyeok.myapplication.adapter.SampleFragmentPagerAdapter; public class MainActivity extends FragmentActivity { ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (ViewPager) findViewById(R.id.viewpager); //페이지를 양옆 2개 미리띄어둔다 페이지 이동간에 다시 데이터로드가 발생하기때문에 설정함. viewPager.setOffscreenPageLimit(3); viewPager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager())); // Give the PagerSlidingTabStrip the ViewPager PagerSlidingTabStrip tabsStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs); // Attach the view pager to the tab strip tabsStrip.setViewPager(viewPager); } }

18~25 : PagerSlidingTabStrip + Viewpager 선언부

20 : Viewpager 특성상 여러 페이지를 한꺼번에 로드하는것이 아닌 현재 페이지에서 다음 페이지 정도만 로드하므로 여러 페이지를 한꺼번에 로드 하기위한 메소드 (예제에서는 의미없는 메소드 없어도 된다.)

 

 

SampleFragmentPagerAdapter.class

 

import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.util.Log; import com.astuetz.PagerSlidingTabStrip; import com.yoohyeok.myapplication.R; import com.yoohyeok.myapplication.fragment.FirstFragment; import com.yoohyeok.myapplication.fragment.SecondFragment; import com.yoohyeok.myapplication.fragment.ThirdFragment; import java.util.ArrayList; /** * Created by YooJongHyeok on 2017-09-11. */ public class SampleFragmentPagerAdapter extends FragmentPagerAdapter { final int PAGE_COUNT = 3; //텍스트냐 이미지냐 선택 private String tabTitles[] = new String[] { "첫번째탭", "두번째탭", "세번째탭" }; // private int[] imgs = {R.drawable.today, R.drawable.month, R.drawable.year}; public SampleFragmentPagerAdapter(FragmentManager fm) { super(fm); } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } // @Override // public int getItemPosition(Object object) { //// if (object instanceof MonthFragPage) //// return POSITION_NONE; //// else { // return super.getItemPosition(object); //// POSITION_UNCHANGED //// } // } @Override public int getCount() { return PAGE_COUNT; } @Override public Fragment getItem(int position) { Log.i("position",String.valueOf(position)); if (position == 0) { return new FirstFragment(position); } else if (position == 1) { return new SecondFragment(position); } else { return new ThirdFragment(position); } } //텍스트 쓸때 @Override public CharSequence getPageTitle(int position) { // Generate title based on item position return tabTitles[position]; } //이미지 쓸때 // @Override // public int getPageIconResId(int position) { // return 0; // }

25 : 상단 메뉴를 텍스트로 지정

26 : 상단 메뉴를 이미지로 지정

40 ~ 48 : 특정 객체는 생성될때 ~~조건문 (어떤 페이지에서 ~~조건을 주고싶다)

69 : 페이지 제목 텍스트로 전달

76 :  이미지 정수값(R.drawable.flower) 전달

 

FirstFragment.class

 

import android.content.Context; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TextView; import android.widget.Toast; import com.yoohyeok.myapplication.R; import java.util.ArrayList; /** * Created by YooJongHyeok on 2017-09-11. */ public class FirstFragment extends Fragment { public static final String ARG_PAGE = "ARG_PAGE"; private int mPage; private TextView name, subname; private ListView listView; String[] name_str = {"유혁", "류혁", "김태양", "초파리", "피카츄", "라이츄", "파이리", "꼬부기", "버터플"}; String[] subname_str = {"엉터리블로그", "운동", "안녕", "D-100", "백만볼트", "천만볼트", "불", "물", "나비"}; // newInstance constructor for creating fragment with arguments public FirstFragment (int page) { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); //PageFragment fragment1 = new PageFragment(page ,name_Str, location_Str, state, PhoneNum); this.setArguments(args); } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage = getArguments().getInt(ARG_PAGE); } // Inflate the fragment layout we defined above for this fragment // Set the associated text for the title @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = null; if (mPage == 0) { view = inflater.inflate(R.layout.fragment_one, container, false);//fragment_page createListView(view); } return view; } public void createListView(View v) { listView = (ListView) v.findViewById(R.id.list_one); final ArrayList<String> items = new ArrayList<String>(); for (int i = 0; i < name_str.length; i++) { items.add(name_str[i]); } // listView.addHeaderView(header); CustomAdapter adapter = new CustomAdapter(getActivity(), 0, items); listView.setAdapter(adapter); adapter.notifyDataSetChanged(); } private class CustomAdapter extends ArrayAdapter<String> { private ArrayList<String> items; CustomViewHolder holder; public CustomAdapter(Context context, int textViewResourceId, ArrayList<String> objects) { super(context, textViewResourceId, objects); this.items = objects; } public View getView(int position, View convertView, ViewGroup parent) { final int allposition = position; LayoutInflater vi = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = vi.inflate(R.layout.custom_listview_one, null); holder = new CustomViewHolder(); holder.modelName = (TextView) convertView.findViewById(R.id.listview_one_name); holder.m_name = (TextView) convertView.findViewById(R.id.listview_one_subname); holder.modelName.setText(items.get(position)); holder.m_name.setText(subname_str[position]); convertView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getActivity(), items.get(allposition), Toast.LENGTH_SHORT).show(); //// TODO: 2017-01-02 여기서 데이터 받고 뿌려주자 그래야 익셉션이안뜸 } }); return convertView; } public class CustomViewHolder { public TextView modelName; public TextView m_name; } } }

54 : ListView 생성

70 : ListView 어뎁터를 이용한 생성

89 : 만들어둔 CustomListView로 생성

 

SecondFragment.class

 

import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.yoohyeok.myapplication.R; /** * Created by YooJongHyeok on 2017-09-11. */ public class SecondFragment extends Fragment { public static final String ARG_PAGE = "ARG_PAGE"; private int mPage; public SecondFragment(int page) { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); //PageFragment fragment1 = new PageFragment(page ,name_Str, location_Str, state, PhoneNum); this.setArguments(args); } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage = getArguments().getInt(ARG_PAGE); } // Inflate the fragment layout we defined above for this fragment // Set the associated text for the title @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = null; if (mPage == 1) { view = inflater.inflate(R.layout.fragment_two, container, false);//fragment_page } return view; } }

기본적인 Fragment 페이지

 

ThirdFragment.class

 

import android.annotation.SuppressLint; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.yoohyeok.myapplication.R; /** * Created by YooJongHyeok on 2017-09-11. */ public class ThirdFragment extends Fragment { public static final String ARG_PAGE = "ARG_PAGE"; private int mPage; @SuppressLint("ValidFragment") public ThirdFragment(int page) { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); //PageFragment fragment1 = new PageFragment(page ,name_Str, location_Str, state, PhoneNum); this.setArguments(args); } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage = getArguments().getInt(ARG_PAGE); } // Inflate the fragment layout we defined above for this fragment // Set the associated text for the title @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = null; if (mPage == 2) { view = inflater.inflate(R.layout.fragment_zthree, container, false);//fragment_page } return view; } }

기본적인 Fragment 페이지

 

 

 

 

 

View화면(XML)

 

activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:weightSum="10" android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto"> <com.astuetz.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" app:pstsShouldExpand="true" app:pstsIndicatorColor="#C5E47E" app:pstsIndicatorHeight="10dip" app:pstsUnderlineColor="#0100FF" app:pstsTextAllCaps="true" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="8"> </android.support.v4.view.ViewPager> </LinearLayout>

 

 

custom_listview_one.xml

 

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/g_c_l_background" android:layout_width="match_parent" android:layout_height="50sp" android:background="#f0f0f0f0" android:gravity="center" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="10"> <TextView android:id="@+id/listview_one_name" android:layout_marginLeft="10dp" android:layout_width="0dp" android:layout_height="50dp" android:layout_gravity="bottom" android:layout_weight="5" android:gravity="center" android:text="유혁" android:textSize="20dp" android:textStyle="bold" /> <TextView android:id="@+id/listview_one_subname" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:layout_weight="5" android:text="카카오톡" android:textSize="10dp" android:textStyle="bold" /> </LinearLayout> </LinearLayout>

CustomListView 레이아웃으로 사용자가 원하는 형태로 View를 꾸며 사용 가능(이미지뷰 추가 등등)

 

fragment_one.xml

 

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f0f0f0f0" android:orientation="vertical"> <ListView android:id="@+id/list_one" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>

 

 

fragment_two.xml

 

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f0f0f0" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="두번째"/> </LinearLayout>

 

 

fragment_zthree.xml

 

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f0f0f0" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textColor="#000000" android:textSize="50px" android:text="세번째"/> </LinearLayout>

 

View부분은 간단합니다. 설명은 생략하겠습니다.

궁금하신것은 댓글 남겨주시면 답변드리겠습니다.

 

 

 

후기

 

카카오톡 페이지는 ListView로 Fragment가 처리되기 때문에 ListView를 사용하였고 사용자 입맛에 맞게 적용하기 위해서 CustomListView로 제작하는 방법이 같이 설명되어 있습니다.

다른 방법보다 많은 뷰와 제어를 가지고 있어 처음 접하시는 분들에게는 이해가 안될 것이라 예상됩니다.

사전 지식으로는 ListView에 대한 개념과 CustomListView 제작, fragment의 이해, 외부 라이브러리 사용경험 정도 알고계시면 충분히 이해 가능하다 생각합니다. 전체적으로 설명이 부족하거나 알고싶으신 내용은 댓글 남겨주시면 답변드리겠습니다. 감사합니다.