ViewPager kullanarak parçalar arasında kaydırma

Ekran slaytları, bir ekranın tamamından diğerine geçişlerdir ve kullanıcı arayüzlerinde yaygındır. gibi eğitimlere hazırlanır. Bu derste, yüksek çözünürlüklü destek kitaplığı tarafından sağlanan bir ViewPager. ViewPager nesneleri ekran slaytlarına animasyon ekleyebilir otomatik olarak oluşturur. Şundan bir ekran slaytına geçiş yapılır: bir içerik ekranını diğerine geçirebilir:

Ekran slaytı animasyonu
 

ViewPager. AndroidX'in bir parçasıdır. Daha fazla bilgi için bkz. AndroidX kullanıyorsanız.

Görünümleri oluşturma

Daha sonra bir parçanın içeriği için kullanacağınız düzen dosyası oluşturun. Ayrıca şunlara da ihtiyacınız vardır: ifadesini kullanabilirsiniz. Aşağıdaki örnek metin, metnin bir kısmını gösteren bir metin görünümü içerir:

<!-- fragment_screen_slide_page.xml -->
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView style="?android:textAppearanceMedium"
        android:padding="16dp"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem_ipsum" />
</ScrollView>

Parçayı oluşturma

Düzeni döndüren bir Fragment sınıfı oluşturma az önce oluşturduğunuz (onCreateView()) yöntemidir. Daha sonra, yeni bir sayfaya ihtiyaç duyduğunuzda üst etkinlikte bu parçanın örneklerini kullanıcıya gösterilsin:

Kotlin

import android.support.v4.app.Fragment

class ScreenSlidePageFragment : Fragment() {

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_screen_slide_page, container, false)
}

Java

import android.support.v4.app.Fragment;
...
public class ScreenSlidePageFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(
                R.layout.fragment_screen_slide_page, container, false);

        return rootView;
    }
}

ViewPager Ekle

ViewPager nesnede, geçiş için yerleşik kaydırma hareketleri var ve varsayılan olarak ekran slaytı animasyonları görüntüler. Bu nedenle, istediğiniz kullanabilirsiniz. ViewPager kullanımları PagerAdapter nesnesini görüntülemesi için yeni sayfaların bir tedariki olarak. Bu nedenle, PagerAdapter parça sınıfını kullanabilir.

Başlamak için ViewPager içeren bir düzen oluşturun:

<!-- activity_screen_slide.xml -->
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Aşağıdaki işlemleri gerçekleştiren bir etkinlik oluşturun:

  • İçerik görünümünü, ViewPager öğesinin düzeni olacak şekilde ayarlar.
  • FragmentStatePagerAdapter soyut sınıfını genişleten ve şunu uygulayan bir sınıf oluşturur: getItem() yöntemini kullanarak yeni sayfa olarak ScreenSlidePageFragment örneği. Çağrı cihazı adaptörü ayrıca getCount() yöntemini kullanın.
  • PagerAdapter cihazını ViewPager uygulamasına bağlar.

Kotlin

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
...
/**
 * The number of pages (wizard steps) to show in this demo.
 */
private const val NUM_PAGES = 5

class ScreenSlidePagerActivity : FragmentActivity() {

    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private lateinit var mPager: ViewPager

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_screen_slide)

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = findViewById(R.id.pager)

        // The pager adapter, which provides the pages to the view pager widget.
        val pagerAdapter = ScreenSlidePagerAdapter(supportFragmentManager)
        mPager.adapter = pagerAdapter
    }

    override fun onBackPressed() {
        if (mPager.currentItem == 0) {
            // If the user is currently looking at the first step, allow the system to handle the
            // Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed()
        } else {
            // Otherwise, select the previous step.
            mPager.currentItem = mPager.currentItem - 1
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private inner class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
        override fun getCount(): Int = NUM_PAGES

        override fun getItem(position: Int): Fragment = ScreenSlidePageFragment()
    }
}

Java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
...
public class ScreenSlidePagerActivity extends FragmentActivity {
    /**
     * The number of pages (wizard steps) to show in this demo.
     */
    private static final int NUM_PAGES = 5;

    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private ViewPager mPager;

    /**
     * The pager adapter, which provides the pages to the view pager widget.
     */
    private PagerAdapter pagerAdapter;

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

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = (ViewPager) findViewById(R.id.pager);
        pagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(pagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (mPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step, allow the system to handle the
            // Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
        public ScreenSlidePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return new ScreenSlidePageFragment();
        }

        @Override
        public int getCount() {
            return NUM_PAGES;
        }
    }
}

PageTransformer'ı kullanarak animasyonu özelleştirme

Varsayılan ekran slaytı animasyonundan farklı bir animasyon görüntülemek için ViewPager.PageTransformer arayüzünü ve bunu görüntüleme çağrı cihazıdır. Arayüzde tek bir yöntem (transformPage()) gösterilir. Ekran geçişinin her noktasında, bu yöntem her görünür sayfa (genellikle yalnızca bir tane görünür sayfa vardır) ve ekranın hemen dışındaki bitişik sayfalar için bir kez çağrılır. Örneğin, üçüncü sayfa görünür durumdaysa ve kullanıcı dördüncü sayfaya sürükleniyorsa transformPage() adı ikinci, üçüncü ve dördüncü sayfalar için hareketin her adımında görüntüler.

transformPage() uygulamanızda, Ardından, yukarıdaki öğelere göre dönüştürülmesi gereken sayfaları belirleyerek özel slayt animasyonları position parametresinden elde edilen, sayfanın ekrandaki konumu arasında geçiş yapmak için transformPage() yöntemini kullanabilirsiniz.

position parametresi, belirli bir sayfanın ekranın ortasına göre nerede olduğunu gösterir. Bu, kullanıcı sayfalarda gezinirken değişen dinamik bir özelliktir. Bir sayfa ekranı doldurduğunda konum değeri 0 olur. Bir sayfa ekranın sağ tarafından çizildiğinde konum değeri 1 olur. Kullanıcı birinci ve ikinci sayfaların ortasında kaydırırsa birinci sayfanın konumu -0,5, ikinci sayfanın konumu ise 0,5 olur. Sayfaların ekrandaki konumuna bağlı olarak, sayfa özelliklerini setAlpha(), setTranslationX() veya setScaleY().

PageTransformer uyguladığınızda, setPageTransformer() adlı kişiyi şununla ara: özel animasyonlarınızı uygulamak için. Örneğin, PageTransformer adlandırıldı ZoomOutPageTransformer, özel animasyonlarınızı ayarlayabilirsiniz aşağıdaki gibidir:

Kotlin

val mPager: ViewPager = findViewById(R.id.pager)
...
mPager.setPageTransformer(true, ZoomOutPageTransformer())

Java

ViewPager mPager = (ViewPager) findViewById(R.id.pager);
...
mPager.setPageTransformer(true, new ZoomOutPageTransformer());

Yakınlaştırma sayfası dönüştürücü ve Derinlik sayfası dönüştürücü konularına bakın. bölümlerine PageTransformer ile ilgili örnekler ve videolar ekleyin.

Uzaklaştırma sayfası dönüştürücü

Bu sayfa dönüştürücü, uygulamalar arasında kaydırma yaparken sayfaları küçültür ve soluklaştırır bitişik sayfalar. Sayfa merkeze yaklaştıkça yeniden karar veriyor.

ZoomOutPageTransformer örnek
 

Kotlin

private const val MIN_SCALE = 0.85f
private const val MIN_ALPHA = 0.5f

class ZoomOutPageTransformer : ViewPager.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            val pageHeight = height
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 1 -> { // [-1,1]
                    // Modify the default slide transition to shrink the page as well
                    val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
                    val vertMargin = pageHeight * (1 - scaleFactor) / 2
                    val horzMargin = pageWidth * (1 - scaleFactor) / 2
                    translationX = if (position < 0) {
                        horzMargin - vertMargin / 2
                    } else {
                        horzMargin + vertMargin / 2
                    }

                    // Scale the page down (between MIN_SCALE and 1)
                    scaleX = scaleFactor
                    scaleY = scaleFactor

                    // Fade the page relative to its size.
                    alpha = (MIN_ALPHA +
                            (((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

Derinlik sayfası dönüştürücü

Bu sayfa dönüştürücü, kayan sayfalar için varsayılan slayt animasyonunu kullanır sol tarafa, "derinlik" ayarını kullanarak kayan sayfaların animasyonu sağ. Bu derinlik animasyonu, sayfayı şeffaflaştırır ve doğrusal olarak aşağı ölçeklendirir.

DepthPageTransformer örnek
 

Derinlik animasyonu sırasında, varsayılan animasyon (ekran slaytı) Bu nedenle, ekran slaytına eksi X çevirisiyle karşı çıkmanız gerekir. Örnek:

Kotlin

view.translationX = -1 * view.width * position

Java

view.setTranslationX(-1 * view.getWidth() * position);

Aşağıdaki örnekte, varsayılan ekran slayt animasyonunun nasıl engelleneceği gösterilmektedir oluşturmak için:

Kotlin

private const val MIN_SCALE = 0.75f

class DepthPageTransformer : ViewPager.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 0 -> { // [-1,0]
                    // Use the default slide transition when moving to the left page
                    alpha = 1f
                    translationX = 0f
                    scaleX = 1f
                    scaleY = 1f
                }
                position <= 1 -> { // (0,1]
                    // Fade the page out.
                    alpha = 1 - position

                    // Counteract the default slide transition
                    translationX = pageWidth * -position

                    // Scale the page down (between MIN_SCALE and 1)
                    val scaleFactor = (MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1f);
            view.setTranslationX(0f);
            view.setScaleX(1f);
            view.setScaleY(1f);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}