Android
ViewPager

소개

비고

조각이있는 기본 ViewPager 사용법

ViewPager 는 왼쪽 또는 오른쪽으로 움직여 탐색 할 수있는 여러 단편을 활동에 표시 할 수 있습니다. ViewPager 는 PagerAdapter 를 사용하여 뷰 또는 단편의 피드가 PagerAdapter 합니다.

그러나 FragmentPagerAdapter 및 FragmentStatePagerAdapter Fragments를 사용할 경우 가장 유용한 두 가지 구현이 더 있습니다. 프래그먼트를 처음으로 인스턴스화해야하는 경우 인스턴스화해야하는 각 위치에 대해 getItem(position) 이 호출됩니다. getCount() 메소드는 총 페이지 수를 반환하므로 ViewPager 는 얼마나 많은 Fragment를 표시해야하는지 알 수 있습니다.

FragmentPagerAdapter 와 FragmentStatePagerAdapter 는 모두 ViewPager 가 보여줄 필요가있는 Fragments의 캐시를 유지합니다. 기본적으로 ViewPager 는 현재 보이는 Fragment와 오른쪽과 왼쪽 옆에있는 Fragment의 최대 3 개의 Fragment를 저장하려고 시도합니다. 또한 FragmentStatePagerAdapter 는 각 FragmentStatePagerAdapter 의 상태를 유지합니다.

두 가지 구현 모두 조각이 자신의 위치를 ​​유지한다고 가정하므로 getItem() 메서드에서 볼 수있는 정적 개수가 아닌 조각 목록을 유지하는 경우 PagerAdapter 하위 클래스를 PagerAdapter 적어도 instantiateItem() , destroyItem() 및 getItemPosition() 메서드를 재정의합니다.

기본 예제 에서 설명한대로 레이아웃에 ViewPager를 추가하기 만하면됩니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout> 
    <android.support.v4.view.ViewPager
        android:id="@+id/vpPager"> 
    </android.support.v4.view.ViewPager>
</LinearLayout>

그런 다음 어댑터의 각 페이지에 대해 표시 할 페이지 수와 페이지 수를 결정하는 어댑터를 정의하십시오.

public class MyViewPagerActivity extends AppCompatActivity {
    private static final String TAG = MyViewPagerActivity.class.getName();

    private MyPagerAdapter mFragmentAdapter;
    private ViewPager mViewPager;

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

        //Apply the Adapter
        mFragmentAdapter = new MyPagerAdapter(getSupportFragmentManager());    
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(mFragmentAdapter);
    }

    private class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager supportFragmentManager) {
            super(supportFragmentManager);
        }

        // Returns the fragment to display for that page
        @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;
            }
        }

        // Returns total number of pages    
        @Override
        public int getCount() {
            return 3;
        }

    }
}

compile 'com.android.support:support-v13:25.3.1'

android.support.v4.app.Fragment 를 사용하는 경우이 종속성을 추가해야합니다.

compile 'com.android.support:support-fragment:25.3.1'

ViewLayout과 함께 ViewPager

TabLayout 를 사용하면보다 쉽게 ​​탐색 할 수 있습니다.
TabLayout.newTab() 메소드를 사용하여 어댑터의 각 프래그먼트에 대한 탭을 설정할 수 있지만이 타스크에 대해보다 편리하고 쉬운 또 다른 메소드 인 TabLayout.setupWithViewPager() 있습니다.

이 메서드는 호출 할 때마다 ViewPager 와 연결된 어댑터의 내용에 따라 탭을 만들고 제거하여 동기화됩니다.
또한 콜백을 설정하여 사용자가 페이지를 넘길 때마다 해당 탭이 선택됩니다.

레이아웃 정의하기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1" />

</LinearLayout>

그런 다음 FragmentPagerAdapter 구현하고 ViewPager 적용합니다.

public class MyViewPagerActivity extends AppCompatActivity {
    private static final String TAG = MyViewPagerActivity.class.getName();

    private MyPagerAdapter mFragmentAdapter;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

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

        // Get the ViewPager and apply the PagerAdapter
        mFragmentAdapter = new MyPagerAdapter(getSupportFragmentManager());    
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(mFragmentAdapter);

        // link the tabLayout and the viewpager together
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(mViewPager);
    }

    private class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager supportFragmentManager) {
            super(supportFragmentManager);
        }

         // Returns the fragment to display for that page
        @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;
            }
        }
        
        // Will be displayed as the tab's label
        @Override
        public CharSequence getPageTitle(int position) {
            switch(position) {
                case 0:
                    return "Fragment 1 title";

                case 1:
                    return "Fragment 2 title";

                case 2:
                    return "Fragment 3 title";

                default:
                    return null;
            }
        }

        // Returns total number of pages 
        @Override
        public int getCount() {
            return 3;
        }

    }
}

PreferenceFragment가있는 ViewPager

최근까지 android.support.v4.app.FragmentPagerAdapter 사용하면 PreferenceFragment 를 FragmentPagerAdapter에 사용 된 Fragment 중 하나로서 사용하지 못하게됩니다.

이제 지원 v7 라이브러리의 최신 버전에는 ViewPager 및 v4 버전의 FragmentPagerAdapter에서 작동하는 PreferenceFragmentCompat 클래스가 포함됩니다.

PreferenceFragmentCompat 를 확장 한 예제 조각 :

import android.os.Bundle; 
import android.support.v7.preference.PreferenceFragmentCompat; 
import android.view.View; 
 
public class MySettingsPrefFragment extends PreferenceFragmentCompat { 
  
    public MySettingsPrefFragment() { 
        // Required empty public constructor 
    } 
 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        addPreferencesFromResource(R.xml.fragment_settings_pref); 
    } 
 
    @Override 
    public void onCreatePreferences(Bundle bundle, String s) { 
 
    } 
}

이제이 Fragment를 android.support.v4.app.FragmentPagerAdapter 하위 클래스에서 사용할 수 있습니다.

private class PagerAdapterWithSettings extends FragmentPagerAdapter {

    public PagerAdapterWithSettings(FragmentManager supportFragmentManager) {
        super(supportFragmentManager);
    }

    @Override
    public Fragment getItem(int position) {
        switch(position) {
            case 0:
                return new FragmentOne();

            case 1:
                return new FragmentTwo();

            case 2:
                return new MySettingsPrefFragment();

            default:
                return null;
        }
    }
    
    // .......

}

ViewPager 추가하기

종속성에 따라 앱의 build.gradle 파일에 다음 종속성이 추가되었는지 확인하십시오.

compile 'com.android.support:support-core-ui:25.3.0'

그런 다음 ViewPager 를 액티비티 레이아웃에 추가하십시오.

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

그런 다음 PagerAdapter 정의하십시오.

public class MyPagerAdapter extends PagerAdapter {

    private Context mContext;

    public CustomPagerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
 
        // Create the page for the given position. For example:
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.xxxx, collection, false);
        collection.addView(layout);
        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        // Remove a page for the given position. For example:
        collection.removeView((View) view);
    }

    @Override
    public int getCount() {
        //Return the number of views available.
        return numberOfPages;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        // Determines whether a page View is associated with a specific key object
        // as returned by instantiateItem(ViewGroup, int). For example:
        return view == object;
    }    
}

마지막으로 Activity에서 ViewPager 를 설정합니다.

public class MainActivity extends AppCompatActivity {

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new MyPagerAdapter(this));
    }
}

점 표시기가있는 ViewPager

우리가 필요로하는 것은 : ViewPager , TabLayout 그리고 선택된 도트와 기본 도트를위한 2 개의 드로어 블입니다.

먼저 우리는 스크린 레이아웃에 TabLayout 을 추가하고 ViewPager 와 연결해야합니다. 우리는 두 가지 방법으로 이것을 할 수 있습니다 :

ViewPager의 중첩 된 TabLayout

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

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.v4.view.ViewPager>

이 경우 TabLayout 은 ViewPager 와 자동으로 연결되지만 TabLayout 은 ViewPager 옆에있을 것이고 그 위에있을 것은 아닙니다.

별도의 TabLayout

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

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

이 경우 TabLayout 아무 곳에 나 배치 할 수 있지만 TabLayout 과 프로그래밍 방식으로 ViewPager 를 연결해야합니다.

ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);
PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);
pager.setAdapter(adapter);

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(pager, true);

레이아웃을 작성한 후에는 점을 준비해야합니다. 그래서 우리는 세 개의 파일을 생성했다 : selected_dot.xml , default_dot.xml , tab_selector.xml .

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>    
    </item>
</layer-list>

default_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>    
    </item>
</layer-list>

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
          android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

이제 xml 레이아웃의 TabLayout 에 3 줄의 코드 만 추가하면됩니다.

app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"

OnPageChangeListener 설정

선택한 페이지에 대한 변경 사항을 수신해야하는 경우 ViewPager.OnPageChangeListener 리스너를 구현할 수 있습니다.

viewPager.addOnPageChangeListener(new OnPageChangeListener() {
    
    // This method will be invoked when a new page becomes selected. Animation is not necessarily complete.
    @Override
    public void onPageSelected(int position) {
         // Your code
    }
    
    // This method will be invoked when the current page is scrolled, either as part of 
    // a programmatically initiated smooth scroll or a user initiated touch scroll.
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
         // Your code
    }
    
    // Called when the scroll state changes. Useful for discovering when the user begins
    // dragging, when the pager is automatically settling to the current page, 
    // or when it is fully stopped/idle.
    @Override
    public void onPageScrollStateChanged(int state) {
         // Your code
    }
});