[Android] Fragment 를 이용한 탭 만들기

덜지 2017. 5. 18. 14:19
 

Fragment와 ViewPager를 이용하여 탭을 만들어보도록 하겠습니다.

아래와 같은 순서로 진행됩니다.

-Fragment의 특징

-Fragment의 생명주기

-소스코드 

 

 

Fragment 특징

기존 Activity는 하나의 화면에 여러개 사용할수없게 설계되어있는 반면 Fragment는

Activity와 비슷한 Lifecycle을 가지면서 여러가지 화면을 넣을 수 있는 방법을 지원해준다.

 

- Fragment는 Activity와 비슷한 LifeCycle을 가진다.

- Fragment는 하나의 Activity에서 다수의 Fragment를 사용할 수 있다.

- Fragment는 Activity에서만 존재하며 단독으로 실행될수 없는 구조이다

- Fragment는 Activity와 마찬가지로 Back Stack을 사용할 수 있으나, Activity처럼 다양한 Stack방식을 지원하지 않는다.

- Fragment는 Activity와 위에서만 존재하기때문에 다수의 Fragment를 동시에 띄울때 메모리 문제가 될 수 있으므로 너무 복잡한 구조는 지양해야한다.

 

 

 

 

Fragment 생명주기

* 1. Fragment is added

* 2. onAttach() 

* 3. onCreate() 

액티비티와 마찬가지로 초기화해야하는 리소스들을 여기서 초기화해줌

주의할점은 UI초기화는 할수없다.

 

* 4. onCreateView() 

Layout을 inflate하는 곳.

View객체를 얻을 수 있으므로, UI초기화를 여기서 진행한다.

 

* 5. onActivityCreated() 

Activity의 onCreate()가 호출되고나서 호출되는 메소드이다.

Activity와 Fragment의 뷰가 모두 생성된 상태로, View를 변경하는 작업이 가능하다

 

* 6. onStart() 

* 7. onResume() 

유저에게 Fragment가 보여지고, 유저와 상호작용이 가능하게 되는 부분

 

* 8. Fragment is active

* 9. User navigates backward or fragment is removed/replaced or Fragment is added to the back stack, then removed/replaced

* 10. onPause()

* 11. onStop() 

Fragment는 Activity와 마찬가지로 화면을 완전히 가리게되면 호출된다.

 

* 12. onDestroy() 

* 13. onDetached()

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

* 14. Fragment is destroyed

 

 

결과물

버튼또는 터치슬라이딩으로 탭을 이동할 수 있습니다.

 

 

 

 

 

소스코드

 

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

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_first"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="First Tab"/>

        <Button
            android:id="@+id/btn_second"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Second Tab"
            />

        <Button
            android:id="@+id/btn_third"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Third Tab"
            />

    </LinearLayout>

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

</RelativeLayout>

 

 

 

fragment_fragment2.xml

(나머지 탭도 똑같이 만든다)

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30dp"
        android:textStyle="bold"
        android:text="Second_Page" />

</RelativeLayout>

 

 

 

Fragment2.java

(나머지 탭도 똑같이 만든다)

 

 

package com.example.kjh.viewpager_fragment;
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 android.widget.RelativeLayout;

public class Fragment2 extends Fragment {
public Fragment2()
{
// required
}

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

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,

@Nullable Bundle savedInstanceState) {
RelativeLayout layout = (RelativeLayout)inflater.inflate(R.layout.fragment_fragment2,

container, false);
return layout;
}
}

 

 

MainActivity.java

 

package com.example.kjh.viewpager_fragment;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    ViewPager pager;

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

        pager = (ViewPager)findViewById(R.id.pager);
        Button btn_first = (Button)findViewById(R.id.btn_first);
        Button btn_second = (Button)findViewById(R.id.btn_second);
        Button btn_third = (Button)findViewById(R.id.btn_third);

        pager.setAdapter(new pagerAdapter(getSupportFragmentManager()));
        pager.setCurrentItem(0);

        View.OnClickListener movePageListener = new View.OnClickListener()
        {
            @Override
            public void onClick(View view) {
                int tag = (int)view.getTag();
                pager.setCurrentItem(tag);
            }
        };

        btn_first.setOnClickListener(movePageListener);
        btn_first.setTag(0);
        btn_second.setOnClickListener(movePageListener);
        btn_second.setTag(1);
        btn_third.setOnClickListener(movePageListener);
        btn_third.setTag(2);
    }

    private class pagerAdapter extends FragmentStatePagerAdapter
    {
        public pagerAdapter(FragmentManager fm )
        {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch(position)
            {
                case 0:
                    return new Fragment1();
                case 1:
                    return new Fragment2();
                case 2:
                    return new Fragment3();
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            // total page count
            return 3;
        }
    }
}

 

 

 

 

 

 

 

 



출처: https://duzi077.tistory.com/119 [개발하는 두더지]

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
101 나인패치(Nine Patch) 이미지란? file 졸리운_곰 2020.10.10 54
100 Python으로 안드로이드 앱 만들기 졸리운_곰 2020.09.30 839
» [Android] Fragment 를 이용한 탭 만들기 file 졸리운_곰 2020.09.19 52
98 빠르게배우는 안드로이드 Fragment-4(Fragment간 에 데이터전달) file 졸리운_곰 2020.09.19 36
97 빠르게배우는 안드로이드 Fragment-3(Fragment기초 실습) file 졸리운_곰 2020.09.19 58
96 빠르게배우는 안드로이드 Fragment-2(Activity-> Fragment로 쉽게 변경) 졸리운_곰 2020.09.19 38
95 빠르게배우는 안드로이드 Fragment -1 (배경) file 졸리운_곰 2020.09.19 38
94 안드로이드 스튜디오 - 새로 생성한 Activity Class를 쉽게 Manifest에 등록하기. file 졸리운_곰 2020.08.08 52
93 Android Studio Build시 failed linking references 해결방법 file 졸리운_곰 2020.05.05 517
92 [안드로이드 스튜디오] COULD NOT FIND COM.ANDROID.TOOLS.BUILD:GRADLE:3.0.0-BETA6 file 졸리운_곰 2020.05.05 43
91 Android Sync SQLite Database with Server using PHP and MySQL file 졸리운_곰 2019.02.25 7386
90 안드로이드의 MVC, MVP, MVVM 종합 안내서 file 졸리운_곰 2019.01.06 255
89 Getting Started: WebView-based Applications for Web Developers file 졸리운_곰 2018.09.03 264
88 App Inventor - MySQL interface 앱 인벤터 mysql 연결 file 졸리운_곰 2018.04.07 2320
87 Connect App Inventor to MySQL Database 앱 인벤터와 mysql 데이터베이스 연결 file 졸리운_곰 2018.04.07 5276
86 Create an API (PHP) 앱 인벤터와 php 통합 file 졸리운_곰 2018.04.07 493
85 Android WebView javascriptInterface 사용하기 file 졸리운_곰 2018.03.26 497
84 Using the WebViewer Control in App Inventor 앱인터에서 웹뷰 컨트롤 사용 file 졸리운_곰 2018.03.24 390
83 WebView Javascript Processor for App Inventor 앱 인벤터 웹뷰 자바스크립트 인터페이스 file 졸리운_곰 2018.03.24 365
82 android webview로 javascript 호출 및 이벤트 받기(연동하기) file 졸리운_곰 2018.03.19 1299
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED