Android Studio Fragment + Pager 1

Pager에 Page1,2,3(fragment)을 연결(Adapter로)하는 예제이다.

 

<실행 화면>

3개의 페이지가 있고 손가락으로 드래그하면 페이지가 넘어가는 것을 볼 수 있다.

<코드 순서>

0) activity_main.xml 화면 구성 / MainActivity.java (.java는 나중에 코드 작성)

1) Page1 해당 Fragment  ( .xml + .java )

2) Page2 해당 Fragment  ( .xml + .java )

3) Page3 해당 Fragment  ( .xml + .java )

0) activity_main.xml 화면 구성 / MainActivity.java (.java는 나중에 코드 작성)

activity_main.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=".MainActivity">
 
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </androidx.viewpager.widget.ViewPager>
 
 
</RelativeLayout>

 

첫 번째 페이지 .xml 만들어주자.

fragment_page1.xml 코드

fragment_page1.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"
    android:padding="16dp"
    android:background="#ff0000">
 
</RelativeLayout>

첫 번째 페이지 .java 만들어주자

Page1Fragment.java 코드

Page1Fragment.java 코드

package com.lcw.ex45fragmentpager;
 
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
 
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
 
public class Page1Fragment extends Fragment {
    TextView tv;
    Button btn;
 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
 
        View view = inflater.inflate(R.layout.fragment_page1, container, false);
        return view;
    }
}

 

이렇게 page2, page3 똑같이 만들자.

두 번째 페이지 .xml + .java 만들어주자 (코드는 페이지 1 복사 & 붙여넣기)

fragment_page2.xml 파일을 만들자.

Page1과 똑같고 배경색만 달리하여 구분하자.

Page2Fragment.java 파일도 만들자.

이제 세 번째 페이지...그러나 이렇게 추가하는 것은 불편하다.

 

 

xml 파일 선택 후 Ctrl + C

레이 아웃폴더에 붙여넣기. 하고 이름만 바꿔준다. 그럼 코드도 다같이 복사됨 편리!!

마찬가지로 .java파일도 똑같이 해준다.

붙여 넣기하면 위와 같은 창이 나온다. 이름만 바꿔 주자.

이제 페이지는 다 만들었다. ViewPager에 연결해주는 adapter만 만들어 주자. (화면에 보여주기 위해 adapter 필요)

MyAdapter.java 코드

MyAdapter.java 코드

package com.lcw.ex45fragmentpager;

 

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentManager;

import androidx.fragment.app.FragmentPagerAdapter;

 

public class MyAdapter extends FragmentPagerAdapter {

 

    Fragment[] fragments= new Fragment[3];

 

    public MyAdapter(@NonNull FragmentManager fm) {

        super(fm);

        //Fragment객체들 생성

        fragments[0]= new Page1Fragment();

        fragments[1]= new Page2Fragment();

        fragments[2]= new Page3Fragment();

    }

 

    //오버라이드해도 에러가 난다. 이유는 꼭 생성자를 만들어줘야한다.

 

    @NonNull

    @Override

    public Fragment getItem(int position) {

        return fragments[position];

    }

 

    @Override

    public int getCount() {

        return fragments.length;

    }

}

생성자 단축키 : 클래스 명에 커서를 놓고, Alt+Insert

 

MainActivity.java 코드

MainActivity.java 코드

package com.lcw.ex45fragmentpager;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
 
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
    ViewPager pager;
    MyAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        pager=findViewById(R.id.pager);
        adapter= new MyAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
    }
}
 

 

 

<실행 화면>

3개의 페이지가 있고 손가락으로 드래그하면 페이지가 넘어가는 것을 볼 수 있다.

이렇게하면 끝난거지만,,

화면만 넘어가는 앱을 본 적이 있던가? 거기에 버튼이나 여러가지 기능이 있는 것들 뿐... 이런 것을 추가해보자.

 

 

아래 사항은 다음 장에서 하겠다...

 

추가 작업 이제  페이지에 1 TextView랑 Button만 추가해보자.

(페이지 백그라운드는 없애자. 페이지가 바뀌는 것을 알아보기 위해 했던 것임)

 

추가 작업 이제  페이지에 2 Button이랑 imageView만 추가해보자.

(페이지 백그라운드는 없애자. 페이지가 바뀌는 것을 알아보기 위해 했던 것임)

 

추가 작업 이제  페이지에 3 ListView 추가해보자. (View Pager에 또다른 Adapter를 사용하는 것임)

(페이지 백그라운드는 없애자. 페이지가 바뀌는 것을 알아보기 위해 했던 것임)