[안드로이드] ActionBar에서 Tab, ViewPager 사용하기

액션바

 

근래에 배포되는 앱을 보면, 앱 상단에 타이틀바 외에도 액션바를 사용하는 것을 많이 볼 수 있다. 

 

액션바 기능중에 탭은 스마트폰의 작은 화면을 효율적으로 사용할 수 있는 기능중에 하나이다.

 

여기서 탭과 스와이프로 프라그먼트 3개화면을 사용하는 앱을 만들어본다.

 

 

 

 

* actionbar_n_tabbar01.xml

<?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">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</LinearLayout>

MainActivity 에 참조될 레이아웃이다. 

 

스와이프로 화면이동 할 수 있게하는 android.support.v4.view.ViewPager 를 정의한다.

 

 

* fragment1.xml

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="#000000"
        android:text="fragment1"/>
</LinearLayout>

첫번째 Tab에 출력될 프라그먼트이다.

 

 

 

 

* fragment2.xml

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="#000000"
        android:text="fragment2"/>
</LinearLayout>

두번째 Tab에 출력될 프라그먼트이다.

 

 

 

 

* fragment3.xml

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="#000000"
        android:text="fragment3"/>
</LinearLayout>

세번째 Tab에 출력될 프라그먼트이다.

 

 

 

프라그먼트를 상속받는 클래스를 3개 만든다. 프라그먼트에 대한 설명은 생략한다.

 

 

* Fragment1.java

package com.studio572.actionbarntabbar;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.zip.Inflater;

/**
 * Created by Administrator on 2016-10-11.
 */
public class Fragment1 extends Fragment {

    public static Fragment1 newInstance(){
        Fragment1 fragment = new Fragment1();
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //return super.onCreateView(inflater, container, savedInstanceState);
        View view = inflater.inflate(R.layout.fragment1,container,false);

        return view;
    }
}

 

 

 

* Fragment2.java

package com.studio572.actionbarntabbar;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2016-10-11.
 */
public class Fragment2 extends Fragment {

    public static Fragment2 newInstance(){
        Fragment2 fragment = new Fragment2();
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //return super.onCreateView(inflater, container, savedInstanceState);
        View view = inflater.inflate(R.layout.fragment2,container,false);

        return view;
    }
}

 

 

 

 

* Fragment3.java

package com.studio572.actionbarntabbar;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2016-10-11.
 */
public class Fragment3 extends Fragment {

    public static Fragment3 newInstance(){
        Fragment3 fragment = new Fragment3();
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //return super.onCreateView(inflater, container, savedInstanceState);
        View view = inflater.inflate(R.layout.fragment3,container,false);

        return view;
    }
}

 

 

 

* CustomFragmentPagerAdapter.java

package com.studio572.actionbarntabbar;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

/**
 * Created by Administrator on 2016-10-11.
 * FragmentPagerAdapter 를 상속받는 아답터를 정의한다.
 */
public class CustomFragmentPagerAdapter extends FragmentPagerAdapter {

    private String[] VIEW_MAPNTOP_TITLES = {"TAB1","TAB2","TAB3"};
    private ArrayList<Fragment> fList;

    // 아답터 생성자
    public CustomFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fList) {
        super(fm);
        this.fList = fList;
    }

    // tab title를 반환 함수.
    @Override
    public CharSequence getPageTitle(int position) {

        return VIEW_MAPNTOP_TITLES[position];

    }

    // 해당 프라그먼트 호출 함수.
    @Override
    public Fragment getItem(int position) {
        return this.fList.get(position);
    }

    @Override
    public int getCount() {
        return fList.size();
    }
}

 

 

 

 

* MainActivity.java

package com.studio572.actionbarntabbar;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    android.support.v7.app.ActionBar bar;
    private FragmentManager fm;
    private ArrayList<Fragment> fList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.actionbar_n_tabbar01);

        // 스와이프할 뷰페이저를 정의
        mViewPager = (ViewPager) findViewById(R.id.pager);

        // 프라그먼트 매니져 객체 정의
        fm = getSupportFragmentManager();

        // 액션바 객체 정의
        bar = getSupportActionBar();

        // 액션바 속성 정의
        bar.setDisplayShowTitleEnabled(true);   // 액션바 노출 유무
        bar.setTitle("Actionbar Tab Sample");   // 액션바 타이틀 라벨

        // 액션바에 모드 설정 = ActionBar.NAVIGATION_MODE_TABS 로 TAB 모드로 설정
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // 액션바에 추가될 탭 생성
        ActionBar.Tab tab1 = bar.newTab().setText("Tab1").setTabListener(tabListener);
        ActionBar.Tab tab2 = bar.newTab().setText("Tab2").setTabListener(tabListener);
        ActionBar.Tab tab3 = bar.newTab().setText("Tab3").setTabListener(tabListener);

        // 액션바에 탭 추가
        bar.addTab(tab1);
        bar.addTab(tab2);
        bar.addTab(tab3 );

        // 각 탭에 들어갈 프라그먼트 생성 및 추가
        fList = new ArrayList<Fragment>();
        fList.add(Fragment1.newInstance());
        fList.add(Fragment2.newInstance());
        fList.add(Fragment3.newInstance());

        // 스와이프로 탭간 이동할 뷰페이저의 리스너 설정
        mViewPager.setOnPageChangeListener(viewPagerListener);

        // 뷰페이져의 아답터 생성 및 연결
        CustomFragmentPagerAdapter adapter = new CustomFragmentPagerAdapter(fm, fList);
        mViewPager.setAdapter(adapter);

    }

    ViewPager.SimpleOnPageChangeListener viewPagerListener = new ViewPager.SimpleOnPageChangeListener(){
        @Override
        public void onPageSelected(int position) {
            super.onPageSelected(position);

            // 뷰페이저 이동시 해당 탭으로 이동
            bar.setSelectedNavigationItem(position);
        }
    };


    ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 해당 탭에서 벚어났을때 처리
        }

        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 해당 탭을 선택시 처리
            // 해당 탭으로 뷰페이저도 이동
            mViewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 해당 탭이 다시 선택됐을때 처리
        }
    };
}

ViewPager는 Tab 클릭으로만 화면전환을 할 수 있는 기능을 스와이프로도 화면을 전환 할 수 있도록 해줌으로써 좀 더 편리한 Tab사용을 하게한다.

 

 

 

아래는 위 소스의 실행화면

 

 

 

 

*관련글 보러가기 링크(클릭하시면 관련 글로 연결됩니다.)

 

[안드로이드] TTS(TextToSpeech) 음성출력 사용하기

[안드로이드] Margin 과 Padding의 차이점과 사용방법 - (마진과 패딩 차이점)

[안드로이드] ImageView에 Bitmap 최적화 로딩하기 - OutOfMemoryError 처리

[안드로이드] ActionBar에서 Tab, ViewPager 사용하기

[안드로이드] ImageView scaleType 속성별 차이 예제

[안드로이드] ImageView에 이미지 출력하기

[안드로이드] Thread(쓰레드)에서 UI 변경하기 - runOnUiThread 사용하기

[안드로이드] Camera Preview - 카메라 프리뷰 만들기

[안드로이드] 상태바, 타이틀바 숨기기(제거), 전체화면 - StatusBar,TitleBar , Full Screen

[안드로이드] Intent (인텐트) 에 대해 알아보자

[안드로이드] Android 6.0 Marshmallow (마시멜로우)에서 권한 처리작업

[안드로이드] 뒤로 버튼 두번 눌러 종료하기

[안드로이드] 키보드 보이기(올리기) / 숨기기(내리기) - android keyboard show/hide

[안드로이드] 쉐어드 프리퍼런스 저장/불러오기 (Shared Preference)

[안드로이드] xml selector - 버튼 눌림(클릭) 효과 커스텀하여 만들기

[안드로이드] AutoCompleteTextView 자동완성 검색 기능 구현

[안드로이드] 리스트뷰 검색 기능 구현 (android ListView search)

[안드로이드] 커스텀 다이얼로그 ( Custom Dialog ) 만들기

[안드로이드] ListView paging ( 리스트뷰 스크롤이 맨 하단으로 갔을 때 페이징 )처리

안드로이드 스튜디오 설치하는 방법