4-5-1 뷰페이저 만들기 / 4-5-2 타이틀스트립 사용하기

MainActivity

 

Fragment1

package com.example.boostcoursepractice;
 
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
 
public class Fragment1 extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
 
        ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment1, container, false);
 
        return rootView;
    }
}
 

 

Fragment2

package com.example.boostcoursepractice;
 
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
 
public class Fragment2 extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
 
        ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment2, container, false);
 
        return rootView;
    }
}
 

 

Fragment3

package com.example.boostcoursepractice;
 
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
 
public class Fragment3 extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
 
        ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment3, container, false);
 
        return rootView;
    }
}
 

 

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">
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:text="두 번째 보기" />
 
    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/button"
        android:layout_alignParentLeft="true"
        android:id="@+id/pager">
 
 <androidx.viewpager.widget.PagerTitleStrip android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#55cedf" android:paddingTop="5dp" android:paddingBottom="5dp" ></androidx.viewpager.widget.PagerTitleStrip>
 
    </androidx.viewpager.widget.ViewPager>
</RelativeLayout>
 
 
 

 

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/design_default_color_primary"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="첫번째"
        android:textSize="40dp" />
 
</LinearLayout>

 

fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="두번째"
        android:textSize="40dp" />
 
</LinearLayout>

 

fragment3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_green_dark"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="세번째"
        android:textSize="40dp" />
 
</LinearLayout>

 

우선 뷰페이저를 만들기 위해서 메인액티비티 xml파일에 뷰페이저 태그를 만들어 추가해주었다.

이제 메인액티비의 자바코드로 가보자. 방금 만든 뷰페이저를 찾아 참조해주어 pager를 만들고 그 페이저에 어댑터를 만들어 줘야 한다.

 

class MoviePagerAdapter extends FragmentStatePagerAdapter

    {

        ArrayList<Fragment> items = new ArrayList<Fragment>();

 

        public MoviePagerAdapter(FragmentManager fm) {

            super(fm);

 

        }

 

        public void addItem(Fragment item)

        {

            items.add(item);

        }

 

        @Override

        public Fragment getItem(int position) {

            return items.get(position);

        }

 

        @Override

        public int getCount() {

            return items.size();

        }

    }

 

위 처럼 FragmentStatePagerAdapter만들어 어댑터를 만들어 줘야 하고 필수로생성자를 만들고 getItem, getCount를 오버라이드 해줘야 된다. 추가로 addItem을 만들어 어댑터의 아이템을 추가할 수 있도록 한다.

 

 MoviePagerAdapter moviePagerAdapter = new MoviePagerAdapter(getSupportFragmentManager());

 

        Fragment fragment1 = new Fragment1();

        moviePagerAdapter.addItem(fragment1);

 

        Fragment fragment2 = new Fragment2();

        moviePagerAdapter.addItem(fragment2);

 

        Fragment fragment3 = new Fragment3();

        moviePagerAdapter.addItem(fragment3);

 

        pager.setAdapter(moviePagerAdapter);

 

 

마지막으로 어댑터를 만들어주고 생성자의 매개변수로 액티비티의 프래그먼트 매니저를 전달해 주고 어댑터의 아이템을 추가해주고 마지막으로 페이저에 어댑터를 설정해주면 끝난다.

 

 

 

 

 

페이지 스트립을 만드는 것은 매우 간다하다. 그냥 아까 만든 뷰페이저 안에 

 

<androidx.viewpager.widget.PagerTitleStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#55cedf"
android:paddingTop="5dp"
android:paddingBottom="5dp"
></androidx.viewpager.widget.PagerTitleStrip>

 

라고 태그만 추가해주고 페이저 어댑터의 

 

@Nullable
@Override
public CharSequence getPageTitle(int position) {
return "페이지" + position;
}

 

이 함수만 추가적으로 오버라이드 해주면 된다.

 

 

 

 

 

결과 화면