[Android] 액션바를 탭과 함께 보여 주기 예제

액션바를 탭과 함께 보여주는 예제

- 액션바에 가지는기능이상당히많다.
- 액션바 하단에 탭버튼을 붙일 수 있다.
- 탭이 별도로 들어갈 수 있다.

• Example_Tab 프로젝트 생성

1. 탭구성할때는 프래그먼트를 사용하는것이 대부분이다.
 
2. 처음 프로젝트 만들면 style.xml에 보면 탭이 기본적으로 들어가 있는거를 볼 수 있다.
(이탭을 우리가 별도로 바꿀 수 있다.) -> 우리는 NoActionBar로 지정한뒤에 직접 탭을 만들어 볼 것이다.
 
3. 이제 레이아웃에서 액션바를 직접 만들어 보자.(추가)
 
4. 외부 라이브 러리를 사용해야한다
file-> project structure ( app 모듈-> dependencies -> +버튼 -> library dependencies->
com.android.support.design(com.android.support.design 26.0.0-alpha1) 추가
 
5. 그 정보가 build.gradle 파일에 들어가게 되는데, 버전이랑 맞춰줘야 한다. 
 
6. 이제 상단에 액션바를 넣을 수 있음
 
7. 이제 실제로 XML 파일을 작성해보자
 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- CoordinatorLayout 겹쳐서 보이는것을 알아서 자리를 잡아 준다. 기본적으로 액션바를 여기다가 넣는다.-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
        <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:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimaryDark"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            android:elevation="1dp"
            android:id="@+id/toolbar">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="1dp"
            android:background="@android:color/background_light"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabTextColor="@color/colorPrimary"
            app:tabSelectedTextColor="@color/colorAccent">

            <!-- 기본 레이아웃 넣는부분
            layout_behavior을 꼭 넣어 준다. 이래야지 자리가 제대로 잡힌다.-->
        </android.support.design.widget.TabLayout>

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/container"></FrameLayout>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

8. 새로운 레이아웃을만들어보자. fragment1.xml 추가

버튼과, 텍스트뷰 추가 해보자, 그리고 배경 속성조정

 

9. 새로운 레이아웃을 만들어 보자 . fragment2.xml 추가

 

10. 새로운 레이아웃을 만들어 보자. fragment3.xml 추가

 

11. 이제 이 xml파일을 제어해줄 프래그먼트 java파일을 만들어 주자

Fragment1.java,Fragment2.java,Fragment3.java

generate->override method Add-> onCreteView() 메소드 추가 여기서 프래그먼트 인플레이션을 할 수 있도록 함.

 

12.이제 Main.java 로 가보자.

 

xml파일에 제어하는 방법 1

소스파일에서 제어 하는 방법 2

우리는 2번(소스파일에서 제어를 할 것이다.)

 

13. 동작 과정

 

xml 파일 -> 프래그먼트.java 등록 -> main 에서 프래그먼트 java의 객체를 가져와서 띄워준다.

• 소스 코드

<Fragment1.java>

package com.example.example_tab;

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 김관현 on 2017-09-25.
 */

public class Fragment1 extends Fragment {

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

        return rootview;
    }
}

<Fragment2.java>

package com.example.example_tab;

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 김관현 on 2017-09-25.
 */

public class Fragment2 extends Fragment {

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

        return rootview;
    }
}

<Fragment3.java>

package com.example.example_tab;

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 김관현 on 2017-09-25.
 */

public class Fragment3 extends Fragment {

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

        return rootview;
    }
}

<MainActivity.java>

package com.example.example_tab;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);           // 액션바 안에 있으니까 뭐가 안맞는느낌이 있긴함
        // 툴바 설정 완료

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
    // add 나 replace 둘중 아무거나 해도 상관 없다.붙여주기

        getSupportFragmentManager().beginTransaction().add(R.id.container,fragment1);


        // 이제 탭을 완성해 볼것이다. 밑에 소스
        TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("친구"));
        tabs.addTab(tabs.newTab().setText("일대일 채팅"));
        tabs.addTab(tabs.newTab().setText("기타"));
        tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                Fragment selected = null;
                if(position == 0){
                    selected =fragment1;

                }else if(position == 1){
                    selected = fragment2;
                }else if(position == 2){
                    selected = fragment3;
                }
                // 바뀌게 해준다 replace () 기존에 있떤것 commit()을 이용해서 바꿔준다.
                getSupportFragmentManager().beginTransaction().replace(R.id.container,selected).commit();

            }


            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }
}

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- CoordinatorLayout 겹쳐서 보이는것을 알아서 자리를 잡아 준다. 기본적으로 액션바를 여기다가 넣는다.-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.Actionbar">

            <android.support.design.widget.TabLayout
            android:id = "@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="1dp"
            android:background="@android:color/background_light"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabTextColor="@color/colorPrimary"
            app:tabSelectedTextColor="@color/colorAccent">

            <!-- 기본 레이아웃 넣는부분
            layout_behavior을 꼭 넣어 준다. 이래야지 자리가 제대로 잡힌다.-->
        </android.support.design.widget.TabLayout>

            <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"></android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/container"></FrameLayout>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

<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"
    android:background="@android:color/holo_blue_bright">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="첫번째 화면"
        android:TextSize="40dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="다음" />
</LinearLayout>

<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"
    android:background="@android:color/holo_orange_light">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="두번째 화면"
        android:TextSize="40dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="다음" />
</LinearLayout>

<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"
    android:background="@android:color/holo_purple">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="세번째 화면"
        android:TextSize="40dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="다음" />
</LinearLayout>

• <결과>

이상 액션바를 탭과함께 보여주기 예제를 마치겠습니다. 감자개발자였습니다. 감사합니다. : )