` 1

사진과 같이 안드로이드에서 Tab기능을 만들어 보도록 하겠습니다.

 

1. 외부라이브러리인 design을 추가해주어야 합니다.

  • 환경설정(?)의 dependency에 들어가서 직접 추가해주셔도 되고,
  • build.gradle에 직접 implementation해주어도 됩니다. 

2. 화면 처럼 나오게 하기 위해선 Actionbar를 없애주어야 합니다. style로 가셔서 NoActionBar로 바꿔주세요

3. 탭을 구성할 layout을 변경합니다.

총 5개의 단계로 구성되어 있습니다.

3-1  Design이라는 외부 라이브러리를 성공적으로 sync하셨다면, Coord를 치시면 1번쨰의 레이아웃을 자동으로 생성해주게 됩니다. Tab이라고 하는 액션바를 추가해주게 되면 원래 있던 View와 겹치게 보이는 현상이 나타나는데 그것을 Coord Layout이 잡아주게 됩니다. 즉, 서로의 위치를 잘 postioning하게 해줍니다.

3-2 그 안에 액션바를 추가해주게 됩니다. AppBarLayout을 사용합니다. 추가하기 위해 android:theme이라는 속성을 추가해줍니다.

3-3 Toolbar는 액션바 안에서 타이틀의 메뉴 아이콘이 보일 영역을 말하며 탭 버튼이 그 아래에 보일 수 있도록 합니다.

3-4 TabLayout아웃을 추가합니다. tabMode는 고정시키는 역할, tabGravity는 탭의 아이템이 2개이든 3개든 가로방향으로 꽉 채워주도록 합니다. tabSelectedTextColor는 선택될 떄 강조할 color를 정해줍니다.

3-5 AppBar는 상단 영역, 주로 사용자가 작업을 할 공간을 그 밑에 정해줍니다. 이때, app:layout_behavior라는 속성을 꼭 넣어줘야 안드로이드가 액션바와 사용자의 영역, 즉 FrameLayout의 영역의 위치를 구분해서 나눠주게 됩니다.

 

4. 프래그먼트는 테스트를 위해 3개를 만들어줍니다. ( 과정 생략 )

5. MainActivity 전체 코드.

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 = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();

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

        TabLayout tabs = findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("친구"));
        tabs.addTab(tabs.newTab().setText("1:1채팅"));
        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;
                }

                getSupportFragmentManager().beginTransaction().replace(R.id.container, selected).commit();
            }

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

            }

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

            }
        });
    }

}

5-1 먼저 우리가 만들어준 Toolbar를 등록을 해줍니다.

5-2 다음으로 Tab의 id를 얻어온 뒤, addTab을 이용해 Tab에 item을 추가해주게 됩니다.

5-3 setOnTabSelectedListener를 사용하여 tab을 클릭했을 때, 우리가 만든 각각의 프래그먼트가 보이도록 합니다.

구글링하면 누구나 해결방법을 아래와 같이 볼 수 있는데..

 

android:elevation -> 0dp

하지만, 가끔 이게 동작되지 않을 때가 있는데 그럴 경우엔

app:elevation -> 0dp 

로 해주면 작동이 잘 되는것을 확인할 수 있다. 

 

 

 

'# 기타 공부한 것들 > Android' 카테고리의 다른 글

Volley 사용하기(GET, POST)  (0) 2018.08.06
Nevigation View 만들기  (0) 2018.07.26
Fragment(프래그먼트) 만들기  (0) 2018.07.15
(MAC) Android Studio 단축키  (0) 2018.07.01
Android Project Review with BP(2)  (0) 2018.06.18

요즘 앱을 사용하시면 거의 모든 것들에서 프래그먼트를 상뇽하고 있다는 것을 쉽게 알 수 있습니다.

그만큼 효율적이고, 잘만 만든다면 코드도 간략해 질 수 있습니다.

 

프래그먼트를 만들려면 2가지 준비물만 만드실 수 있으시면 됩니다.

1. Java Class

2. layout XML

2가지를 만들수만 있다면, 몇 가지 코드만 작성하면 프래그먼트를 만들 수 있는데요.

---------------------------------------------------------------------------------------------------------------------------

Fragment 만들기

1. Java Class파일에 Fragment를 extends하기. 

2. Activity에서도 onCreate가 있듯이, 프래그먼트도 그와 같은 역할을 하는 메소드가 있습니다.

사진과 같이 onCreateView라는 메소드입니다. 

이제 이 안에서 return 부분을 지워주시고, 밑의 두  사진과 같이 입력해주시면 됩니다.

 

* R.layout.fragment_exam은 여러분이 만든 layout파일입니다. container은 메소드에 있는 ViewGroup parameter을 그대로 써주시면 됩니다.

* attachToRoot는 activity화면에 프래그먼트를 바로 붙여줄 것인지, 호출 시에 붙여줄 것인지를 정하는 파라미터입니다. false해주시면 됩니다.

 

3. 위에서 사용햇듯이, layout파일은 여러분이 만든걸로 ^^

자, 그럼 이제 프래그먼트를 액티비티에 올릴 준비가 되었습니다.

mainActivity로 가볼까요?

이 mainActivity에는 container라는 id를 가진 FrameLayout이 있다고 가정하겠습니다. 

프래그먼트를 붙일려면 단 한줄의 코드만 작성해 주시면 됩니다.

프래그먼트는 기본적으로 액티비티와는 조금 다른 구조를 가지게 됩니다.

 Transaction을 통해 시작을 시켜야만 하는데요. 이 모든것이 한줄에 다 들어갈 수 있습니다. 

 

* R.id.container은 위에서 가정한 FrameLayout입니다. 

* fragmentExam은 Fragment를 상속받은 Java Class입니다. 

* commit() 또한, 빼먹지 말아야 합니다.

 

onCreate에 작성하시고 실행시키면 여러분이 만든 프래그먼트가 activity에 올려져 있을겁니다.

 

+) add는 되도록이면 처음 프래그먼트를 넣어줄때만 쓰시는게 좋습니다. 나머지는 전부 add가 아닌 replace를 쓰셔야 합니다.

(쓰는 방법은 똑같습니다^^)

'# 기타 공부한 것들 > Android' 카테고리의 다른 글

Nevigation View 만들기  (0) 2018.07.26
Toobar, appbar 경계선 없애기  (0) 2018.07.25
(MAC) Android Studio 단축키  (0) 2018.07.01
Android Project Review with BP(2)  (0) 2018.06.18
Android Project Review with BP(1)  (0) 2018.06.16