[Android] Fragment와 MVP 패턴을 이용한 탭 만들기

http://duzi077.tistory.com/119 ( Fragment 를 이용한 탭 만들기 ) 에 이어서 

MVP 패턴을 이용하여  TabLayout , ViewPager, Fragment를 이용한 탭을 만들어보도록 하겠습니다.

우선 MVP 패턴이란 ?

Model View Presenter

- View를 Model로부터 분리시키고 Presenter는 사이에서 중재자 역할을 합니다.

- Unit test를 쉽게할 수 있습니다.

- 일반적으로 View와 Presenter 는 1:1 매칭입니다.

Model          Data에 직접 접근하고 관리한다. Presenter가 요청한 작업을 수행한다.

View            실제 View에 접근하고 화면을 갱신하는 역할을 한다.

Presenter      View로부터 이벤트를 전달받고 View가 알지못하는 Data에 접근하고 로직을 수행하도록 Model 에 요청한다.

https://github.com/googlesamples/android-architecture/tree/todo-mvp ( 구글 MVP 예제 ) 를 참고하여 샘플을 만들었습니다.

결과물

소스코드

BaseView 생성

BaseView.java

Presenter를 설정하고 View에 Toast를 띄우는 인터페이스입니다.

public interface BaseView<T> { void setPresenter(T presenter); void ShowToast(String text); }

BasePresenter 생성

BasePresenter.java

공통 로직이 있다면 여기에 추가합니다.

public interface BasePresenter { }

Contract 생성

RestaurantContract.java

Contract는 View와 Presenter를 연결해주는 인터페이스입니다.

각 Fragment 마다 BaseView와 BasePresenter를 상속받은 View, Presenter 인터페이스를 생성해야합니다.

즉, Base는 공통으로 작성해야되는 기능을 넣어주고 그 Base를 상속받아 각 Fragment의 View, Presenter 인터페이스를 생성해서 각각의 기능을 정의합니다.

public interface RestaurantContract { interface View extends BaseView<Presenter> { } interface Presenter extends BasePresenter { void buttonClickAction(); }

PresenterImpl 생성

RestaurantPresenterImpl.java

Contract.Presenter를 implements한 Presneter 클래스입니다. View와 통신하기 위해 View 객체를 생성자 파라미터로 받아서 초기화합니다.

샘플에서 buttonClickAction 메소드가 실제로는 Model과 연결된 로직을 수행하는 부분입니다.

간단하게 로직이 처리됐다고 생각하고 View에 Toast를 띄우는 ShowToast 메소드만 출력하는 기능을 넣어놨습니다.

public class RestaurantPresenterImpl implements RestaurantContract.Presenter{ private final RestaurantContract.View mRestaurantContractView; public RestaurantPresenterImpl(RestaurantContract.View RestaurantContractView) { mRestaurantContractView = RestaurantContractView; mRestaurantContractView.setPresenter(this); } @Override public void buttonClickAction() { mRestaurantContractView.ShowToast("Success"); } }

Fragment 생성

RestaurantTabFragment.java

Fragment는 Contract.View를 implements 한 View 클래스입니다. 

탭마다 다른 Fragment 클래스를 만들어야합니다.

버튼이 클릭되면 Presenter의 buttonClickAction 메소드가 호출됩니다.

Presenter에서 로직이 수행되고 마지막에 ShowToast를 호출하면 

Fragment에서 오버라이드된 ShowToast가 실행하면서 화면에 Toast가 띄워지게 됩니다.

public class RestaurantTabFragment extends Fragment implements RestaurantContract.View{ private static final String TAG = "KJH"; private RestaurantContract.Presenter mPresenter; private TextView mTextView; private Button mButton; public RestaurantTabFragment() { } public static RestaurantTabFragment newInstance() { return new RestaurantTabFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { View root = inflater.inflate(R.layout.restaurant_frag, container, false); mTextView = (TextView)root.findViewById(R.id.text_sample); mButton = (Button)root.findViewById(R.id.btn_sample); mButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mPresenter.buttonClickAction(); } }); return root; } @Override public void setPresenter(RestaurantContract.Presenter presenter) { mPresenter = presenter; } @Override public void ShowToast(String text) { Toast.makeText(getActivity(), text, Toast.LENGTH_SHORT).show(); } }

Fragment Layout 생성

restaurant_frag.xml

탭을 클릭했을때 보여지는 페이지입니다.

탭마다 다른 Fragment 레이아웃을 만들어야합니다.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text_sample" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello"/> <Button android:id="@+id/btn_sample" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Send"/> </LinearLayout>

MainActivity 생성

MainActivity.java

위의 Google Sample과 조금 다릅니다. 

TabPagerAdapter 안에 각 Fragment의 Presenter를 관리합니다.

public class MainActivity extends AppCompatActivity { private TabLayout mTab; private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Manifest No ActionBar 스타일 적용 // Toolbar 적용 Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar); // 탭 생성 및 적용 TabPagerAdapter tabPagerAdapter = new TabPagerAdapter(getSupportFragmentManager()); mViewPager = (ViewPager) findViewById(R.id.view_pager); mViewPager.setAdapter(tabPagerAdapter); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { mViewPager.setCurrentItem(position); } @Override public void onPageScrollStateChanged(int state) { } }); mTab = (TabLayout) findViewById(R.id.tabs); mTab.setupWithViewPager(mViewPager); } }

MainActivity Layout 생성

activity_main.xml

TabLayout과 ViewPager를 그립니다.

gradle 파일에 선언해야 사용 가능합니다.

dependencies {
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:design:25.3.1'
}

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.kh.companyfood.ui.main.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>

TabPagerAdapter 생성

TabPagerAdapter.java

FragmentPagerAdapter를 상속받은 Adapter입니다.

탭을 클릭했을 때 getItem 메소드가 호출되고 해당되는 Fragment 객체를 반환합니다.

public class TabPagerAdapter extends FragmentPagerAdapter { private static final int PAGE_NUMBER = 3; private RestaurantPresenterImpl mRestaurantPresenter; private RecommandPresenterImpl mRecommandPresenter; private SettingPresenterImpl mSettingPresenter; public TabPagerAdapter(FragmentManager fragmentManager) { super(fragmentManager); } @Override public Fragment getItem(int position) { switch ( position ) { case 0: { RestaurantTabFragment restaurantTabFragment = RestaurantTabFragment.newInstance(); mRestaurantPresenter = new RestaurantPresenterImpl(restaurantTabFragment); return restaurantTabFragment; } case 1: { RecommandTabFragment recommandTabFragment = RecommandTabFragment.newInstance(); mRecommandPresenter = new RecommandPresenterImpl(recommandTabFragment); return recommandTabFragment; } case 2: { SettingFragment settingFragment = SettingFragment.newInstance(); mSettingPresenter = new SettingPresenterImpl(settingFragment); return settingFragment; } default: return null; } } @Override public int getCount() { return PAGE_NUMBER; } @Override public CharSequence getPageTitle(int position) { switch ( position ) { case 0: return "음식점리스트"; case 1: return "추천이력"; case 2: return "환경설정"; default: return "Default"; } } }