탭 (Tab)

탭을 사용하면 한 화면에서 서로 다른 두가지 화면의 정보를 전환하면서 보여줄 수 있다.

• 먼저 com.android.support.design라이브러리를 추가한다. 

File탭 - project structure - app - dependencies에서 (+)추가 버튼을 누른다. 그리고 Library dependency선택 후 해당 라이브러리를 추가한다.

• 메인 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.choonie.tapapp.MainActivity">
 
    <!-- CoordinatorLayout이 화면의 전체 위치를 잡아준다.  -->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <!-- 
        AppBarLayout에는 툴바가 들어 갈 수 있는데.. 탭 기능을 사용하면 탭 도 추가할 수 있다.
        툴바는 액션바와 비슷한 것이다. 
         -->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
 
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                android:elevation="1dp"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
                <TextView
                    android:id="@+id/titleText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="타이틀"
                    android:textAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title" />
 
            </android.support.v7.widget.Toolbar>
 
            <!-- 
            tabMode="fixed"와 tabGravity="fill"로 하면 탭의 크기가 모두 동일하도록 설정 한다.
             -->    
            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/background_light"
                android:elevation="1dp"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@color/colorAccent"
                app:tabTextColor="@color/colorPrimary" />
 
        </android.support.design.widget.AppBarLayout>
 
        <!-- AppBarLayout아래에 이처럼 전환되는 화면을 구성하도록 FrameLayout을 둘 수 있다. -->
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
        </FrameLayout>
 
 
    </android.support.design.widget.CoordinatorLayout>
 
</RelativeLayout>
 

• 탭을 사용하는 것은 한 액티비비에서 화면이 전환되는 것이기 때문에. 프래그먼트(fragment)를 사용해야 한다. 메인에서 사용하기 위한 프래그먼트(java, xml)를 작성한다

app/java/패키지/fragment/FragmentOne

public class FragmentOne extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment1, container, false);
        return view;
    }
}

app/res/layout/fragment1.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_light"
    android:orientation="vertical"
    tools:context="com.example.choonie.tapapp.MainActivity">
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="첫번째" />
 
</LinearLayout>

위 코드를 참조해서 배경색을 다르게 해서 새로운 프래그먼트를 만든다.

ex)fragment2.xml, fragment3.xml

ex)FragmentTwo.java, FragmentThree.java

• 메인 자바 파일을 작성한다.

public class MainActivity extends AppCompatActivity {
 
    //툴바를 저장할 변수
    private Toolbar bar;
 
    //작성한 프래그먼트를 초기화할 변수
    private FragmentOne f1;
    private FragmentTwo f2;
    private FragmentThree f3;
 
    private FrameLayout frameLayout;
    //터치할 때 저장된 탭의 위치값을 가져올 변수
    private int idx;
    //왼쪽, 오른쪽 슬라이드 판별 변수
    private float xUp, xDown;
 
    //프래그먼트 매니저 변수
    private FragmentManager fm;
 
    private TabLayout tabLayout;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
 
        frameLayout = (FrameLayout) findViewById(R.id.container);
 
        bar = (Toolbar) findViewById(R.id.toolbar);
        //setSupportActionBar메서드는 액션바를 인자에 설정한 툴바로 대신한다.
        //그러나 액션바가 없을 경우에만 동작하므로
        //res/values/styles.xml파일을 열고 parent속성을 Theme.AppCompat.Light.NoActionBar로 변경해야 적용된다.
        setSupportActionBar(bar);
 
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false);
 
        //각각의 프래그먼트를 사용하기 위해 초기화
        f1 = new FragmentOne();
        f2 = new FragmentTwo();
        f3 = new FragmentThree();
 
        //프래그먼트를 관리하기 위해 프래그먼트 매니저 초기화
        fm = getSupportFragmentManager();
        //처음 화면은 f1으로 한다.
        fm.beginTransaction().replace(R.id.container, f1).commit();
 
        //탭레이아웃 정보를 xml에서 찾은 후 새로운 탭들을 등록 추가
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("통화기록"));
        tabLayout.addTab(tabLayout.newTab().setText("스팸기록"));
        tabLayout.addTab(tabLayout.newTab().setText("연락처"));
        tabLayout.addTab(tabLayout.newTab().setText("비공개 정보"));
        tabLayout.addTab(tabLayout.newTab().setText("공개 정보"));
 
        //탭을 눌렀을 때 작동하는 리스너 등록
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
 
                int position = tab.getPosition();
                idx = position;
 
                setTabPositionToReplace(position);
 
            }
 
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
 
            }
 
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
 
            }
        });
 
 
        //frameLayout영역에 대하여 터치했을 때 작동하는 리스너 등록
        frameLayout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
 
                if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                    xDown = motionEvent.getX();
                } else if (motionEvent.getAction() == MotionEvent.ACTION_UP) {
                    xUp = motionEvent.getX();
 
                    if (xUp > xDown) {
                        --idx;
                        if (0 > idx) {
                            ++idx;
                            return false;
                        }
                        TabLayout.Tab tab = tabLayout.getTabAt(idx);
                        tab.select();
                        setTabPositionToReplace(idx);
                    } else if (xUp < xDown) {
                        ++idx;
                        if (tabLayout.getTabCount() - 1 < idx) {
                            --idx;
                            return false;
                        }
                        TabLayout.Tab tab = tabLayout.getTabAt(idx);
                        tab.select();
                        setTabPositionToReplace(idx);
                    }
                }
 
                return true;
            }
        });
 
 
    }
 
    //매개변수의 위치값 대로 FrameLayout에 위치하는 프래그먼트를 전환한다.
    private void setTabPositionToReplace(int position) {
        Fragment selected = null;
        boolean replace = true;
        if (position == 0) {
            selected = f1;
        } else if (position == 1) {
            selected = f2;
        } else if (position == 2) {
            selected = f3;
        } else {
            replace = false;
            Toast.makeText(MainActivity.this, "정보가 없는 탭입니다.", Toast.LENGTH_SHORT).show();
        }
 
        if (replace)
            fm.beginTransaction().replace(R.id.container, selected).commit();
    }
 
 
}

탭을 눌렀을 때만 작동하는 코드만 있었으므로, 좌우 슬라이드로 작동하도록 코드를 추가해 보았다.