2019年2月7日以降、GoogleはAndroid ViewPager2のアルファ版をリリースしました 。 このリリースの詳細については、 こちらをご覧ください 。 次に、ViewPager2の概要を見てみましょう。
新機能
- 右から左へのレイアウトをサポートし、
- 垂直方向をサポート、
PageChangeListener改善。
何が変わった？
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) {
OnPageChangeCallbackます。これは、非抽象メソッドを持つ抽象クラスです。 つまり、これらすべてのメソッドを再定義する必要はなく、必要なメソッドまたは使用したいメソッドを再定義するだけです。 したがって、たとえば、ページ変更イベントを追跡できます。
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position)
注意！
ViewPager2はアルファ版であるため、このバージョンではまだ実装されていないか、正しく動作しない古いViewPagerの機能がいくつかあります。
ドキュメントによる既知の問題：
- ClipToPadding、
- TabLayoutとの統合なし、
- 画面の外では制御できません。
- ページ幅を設定できません（デフォルトでは100％）
既知の問題に関する詳細はこちらです。 これらすべてが次のアップデートで修正されることを願っています。 この新しいViewPager2の安定したバージョンを楽しみにしています。 それまでは、みんなに良いコードを！