[Android/안드로이드] Vertical & Horizontal ViewPager / FreeViewPager2/ 상하좌우 뷰페이져

결과화면

ViewPager2에서는 기본적으로 Vertical Paging기능과 Horizontal Paging기능이 있습니다. 하지만 Vertical이면 Vertical, Horizontal이면 Horizontal로만 이루어져 있습니다. 이번 시간에는 Vertical기능도 되고 Horizontal기능도 되는 FreeViewPager를 만들어보겠습니다.

 

 

우선 저번시간과 마찬가지로 ViewPager2를 사용하려면 다음 종속성을 추가해야합니다.

build.gradle(Module:app) 

  
  dependencies {
      
      //viewpager2
      implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha04'
  }
  

 

VerticalVierPager 생성

activity_main.xml

  
  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      tools:context=".MainActivity">
  
      <androidx.viewpager2.widget.ViewPager2
          android:id="@+id/viewPager2"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical" />
  </LinearLayout>
  

 

 

MainActivity.java

  
  package com.example.verpager2;
  
  import android.os.Bundle;
  
  import androidx.appcompat.app.AppCompatActivity;
  import androidx.viewpager2.widget.ViewPager2;
  
  public class MainActivity extends AppCompatActivity {
  
      ViewPager2 viewPager2;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          viewPager2 = findViewById(R.id.viewPager2);
  
          ViewPagerAdapter adapter = new ViewPagerAdapter(this);
          adapter.setType(ViewPagerAdapter.TYPE_VERTICAL_VIEWPAGER);
          viewPager2.setAdapter(adapter);
          viewPager2.setOffscreenPageLimit(6);
      }
  }
  

 

MainActivity에 Vertical기능을 가진 ViewPager2를 생성합니다.

 

ViewPagerAdapter생성

ViewPagerAdapter.java

 
 package com.example.verpager2;
  
  import androidx.annotation.NonNull;
  import androidx.fragment.app.Fragment;
  import androidx.fragment.app.FragmentActivity;
  import androidx.fragment.app.FragmentManager;
  import androidx.lifecycle.Lifecycle;
  import androidx.viewpager2.adapter.FragmentStateAdapter;
  
  public class ViewPagerAdapter extends FragmentStateAdapter {
  
      final static int TYPE_VERTICAL_VIEWPAGER = 1001;
      final static int TYPE_HORIAONTALL_VIEWPAGER = 1002;
      private int type;
      private int count;
  
      public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
          super(fragmentActivity);
      }
  
      public ViewPagerAdapter(@NonNull Fragment fragment) {
          super(fragment);
      }
  
      public ViewPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
          super(fragmentManager, lifecycle);
      }
  
      public void setType(int type){
          this.type = type;
      }
  
      public void setType(int type,int count){
          this.type = type;
          this.count = count;
      }
  
      //보여줄 Fragment
      @NonNull
      @Override
      public Fragment getItem(int position) {
          if(type == TYPE_VERTICAL_VIEWPAGER){
              return new VerticalFragment(position);
          } else{
              return new HorizontalFragment(position,count);
          }
      }
  
      //Fragment 갯수
      @Override
      public int getItemCount() {
          if(type == TYPE_VERTICAL_VIEWPAGER){
              return 10;
          } else{
              return 3;
          }
      }
  }
  

Vertical기능을 가진 Adapter와 Horizontal기능을 가진 Adapter를 따로 만들지 않고 하나의 Adapter로 모듈화 시켰기 때문에 생성할 때 type을 받아 분기를 해줘 type에 맞도록 Fragment를 생성해줍니다.

 

VerticalFragment 생성

fragment_vertical.xml

 
  <?xml version="1.0" encoding="utf-8"?>
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".VerticalFragment">
  
      <androidx.viewpager2.widget.ViewPager2
          android:id="@+id/viewPager2"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="horizontal"/>
  
  </FrameLayout>
  

 

VerticalFragment.java

 
 package com.example.verpager2;
  
  import android.os.Bundle;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  
  import androidx.fragment.app.Fragment;
  import androidx.viewpager2.widget.ViewPager2;
  
  
  /**
   * A simple {@link Fragment} subclass.
   */
  public class VerticalFragment extends Fragment {
  
      private int position;
  
      public VerticalFragment() {
      }
  
      VerticalFragment(int position) {
          // Required empty public constructor
          this.position = position;
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
                               Bundle savedInstanceState) {
          // Inflate the layout for this fragment
          View view = inflater.inflate(R.layout.fragment_vertical, container, false);
          ViewPager2 viewPager2 = view.findViewById(R.id.viewPager2);
  
          ViewPagerAdapter adapter = new ViewPagerAdapter(this);
          adapter.setType(ViewPagerAdapter.TYPE_HORIAONTALL_VIEWPAGER,position);
          viewPager2.setAdapter(adapter);
  
          return view;
      }
  }
  

VerticalViewpager에서 만들어진 Fragment안에 또 Horizontal기능을 가진 ViewPager2를 생성해줍니다.

이렇게 하면 가로로 VerticalViewPager 안에 HorizontalViewPager를 넣은 셈입니다.

 

HorizontalFragment 생성

fragment_horizontal.xml

  
  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".HorizontalFragment">
  
      <TextView
          android:id="@+id/tv_text"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_centerInParent="true"
          android:gravity="center"
          android:textColor="#ffffff"
          android:textSize="56dp" />
  </RelativeLayout>
  

 

HorizontalFragment.java

  
  package com.example.verpager2;
  
  
  import android.os.Bundle;
  
  import androidx.fragment.app.Fragment;
  
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.TextView;
  
  
  public class HorizontalFragment extends Fragment {
  
      private TextView tv_text;
      private int count;
      private int position;
  
      public HorizontalFragment() {
      }
  
      HorizontalFragment(int position, int count) {
          // Required empty public constructor
          this.position = position;
          this.count = count;
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
                               Bundle savedInstanceState) {
          // Inflate the layout for this fragment
          View view = inflater.inflate(R.layout.fragment_horizontal, container, false);
          tv_text = view.findViewById(R.id.tv_text);
  
          String text = "가로 : " + position + "\n" + "세로 : " + count;
          tv_text.setText(text);
          return view;
      }
  
  }
  

 

마무리로 HOrizontalViewPager부분에서는 어느 화면인지에 대해 좌표?값 비슷하게 보여주었습니다.

이렇게 상하좌우기능을 가진 ViewPager인 FreeViewPager를 만들어보았습니다.

 

궁금하신점이나 부족한점 있으면 댓글을 남겨주세요~~!