ViewPager2の使用方法

2019年2月7日以降、GoogleはAndroid ViewPager2のアルファ版をリリースしました 。 このリリースの詳細については、 こちらをご覧ください 。 次に、ViewPager2の概要を見てみましょう。

新機能

• 右から左へのレイアウトをサポートし、
• 垂直方向をサポート、
• PageChangeListener
  
  
  
  改善。

何が変わった？

• PagerAdapterはRecyclerView.Adapterに置き換えられました。
• FragmentStatePagerAdapterはFragmentStateAdapterに置き換えられました。

ViewPager2はAndroid X向けにリリースされているため、使用する場合はプロジェクトでAndroid Xを使用する必要があります。この新しいViewPager2の使用方法を見てみましょう。

依存関係を追加

次の依存関係をアプリケーションレベルのbuild.gradle



ファイルに追加します。

 dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、プロジェクトを同期します。

カスタマイズ

ViewPager2



ウィジェットをアクティビティまたはフラグメントに追加します。

 <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ViewPager2に表示されるページのレイアウトを作成しましょう。

item_page.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:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/tvTitle" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_centerInParent="true" tools:text= "item" android:textSize="32sp" android:layout_height="wrap_content" /> </RelativeLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ViewPager2のアダプターを作成する必要があります。 これが最も興味深いです。 これには、 RecyclerView.Adapter



を使用できます。 クールじゃないですか？

ViewPagerAdapter.kt

 class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH = PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)) override fun getItemCount(): Int = colors.size override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run { tvTitle.text = "item $position" container.setBackgroundResource(colors[position]) } } class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、通常のRecyclerViewに使用するものと同じアダプターであり、ViewPager2でも同様に機能します。

最後のステップでは、ViewPager2のアダプターをインストールします。

 class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager2.adapter = ViewPagerAdapter() } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以上です！ PagerAdapterで古いViewPagerを使用する場合と同じ結果が得られます。

縦スクロール

以前は、サードパーティのライブラリを使用して、垂直スクロールを実装する必要がありました。 これまでのところ、Googleはそのような機会をそのまま提供していません。 この新しいViewPager2では、垂直スクロールがサポートされるようになりました。 ViewPager2の向きを変更するだけで、垂直スクロールが有効になります。 とても簡単です！

 viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果は次のとおりです。

FragmentStateAdapterを使用する

古いViewPagerのように、フラグメントをページとして使用することもできます。 これにはFragmentStateAdapterがあります。 使用方法を見てみましょう。

まず、フラグメントを作成する必要があります。

 class PagerFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.item_page, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { container.setBackgroundResource(it.getInt("color")) tvTitle.text = "Item ${it.getInt("position")}" } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ViewPager2のアダプターを作成します。 FragmentManagerをコンストラクターに渡し、そのコンストラクターがフラグメントを管理します。

 class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun getItem(position: Int): Fragment = PagerFragment().apply { arguments = bundleOf( "color" to colors[position], "position" to position ) } override fun getItemCount(): Int = colors.size }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、この新しいアダプターをViewPager2にインストールすると完了です。

 viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OnPageChangeCallbackの改善

古いViewPagerでは、OnPageChangeListnerインターフェイスはページ変更/スクロールイベントを受け取るように設計されていました。 とても不便でした 3つのメソッド（ onPageScrollStateChanged



、 onPageScrolled



、 onPageSelected



）をすべてオーバーライドする必要がありました。

 oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) { //   } override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { //   } override fun onPageSelected(position: Int) { // ,    } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OnPageChangeCallback



ます。これは、非抽象メソッドを持つ抽象クラスです。 つまり、これらすべてのメソッドを再定義する必要はなく、必要なメソッドまたは使用したいメソッドを再定義するだけです。 したがって、たとえば、ページ変更イベントを追跡できます。

 viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position) //    } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注意！

ViewPager2はアルファ版であるため、このバージョンではまだ実装されていないか、正しく動作しない古いViewPagerの機能がいくつかあります。

ドキュメントによる既知の問題：

• ClipToPadding、
• TabLayoutとの統合なし、
• 画面の外では制御できません。
• ページ幅を設定できません（デフォルトでは100％）

既知の問題に関する詳細はこちらです。 これらすべてが次のアップデートで修正されることを願っています。 この新しいViewPager2の安定したバージョンを楽しみにしています。 それまでは、みんなに良いコードを！