Android ViewPager+Fragmentスライドを実現

25796 ワード

自分が使った機能を記録し、検索しやすい.レイアウトファイル
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/viewPager"
        android:layout_weight="1"/>

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/horizontalScrollView"
        android:scrollbars="none">
        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/radioGroup">
            <RadioButton
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center"
                android:drawableTop="@drawable/check_radiobutton"
                android:layout_margin="10dp"
                android:checked="true"
                android:id="@+id/rb_one"/>
            <RadioButton
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center"
                android:layout_margin="10dp"
                android:drawableTop="@drawable/check_button2"
                android:id="@+id/rb_two"/>
            <RadioButton
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center"
                android:drawableTop="@drawable/check_button3"
                android:layout_margin="10dp"
                android:id="@+id/rb_three"/>
            <RadioButton
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center"
                android:drawableTop="@drawable/check_button4"
                android:layout_margin="10dp"
                android:id="@+id/rb_four"/>
        </RadioGroup>
    </HorizontalScrollView>

</LinearLayout>

MainActivity

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.HorizontalScrollView
import android.widget.RadioButton
import android.widget.RadioGroup
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.viewpager.widget.ViewPager

class MainActivity : AppCompatActivity(), RadioGroup.OnCheckedChangeListener {


    private lateinit var viewPager: ViewPager
    private lateinit var radioGroup: RadioGroup
    private lateinit var horizontalScrollView: HorizontalScrollView
    private  var fragments : ArrayList<Fragment> = ArrayList()
    private lateinit var fragmentManager: FragmentManager
    var list = arrayListOf<Int>(R.id.rb_one,R.id.rb_two,R.id.rb_three,R.id.rb_four)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPager = findViewById(R.id.viewPager)
        radioGroup = findViewById(R.id.radioGroup)
        horizontalScrollView = findViewById(R.id.horizontalScrollView)

        fragments.add(FragmentOne())
        fragments.add(FragmentTwo())
        fragments.add(FragmentThree())
        fragments.add(FragmentFour())

        viewPager.offscreenPageLimit = 4 //  4 fragment
        fragmentManager = supportFragmentManager
        viewPager.adapter = MyFragmentAdapter(fragmentManager,fragments)

        radioGroup.setOnCheckedChangeListener(this)
        viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
            override fun onPageScrollStateChanged(state: Int) {
            }

            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
            }

            override fun onPageSelected(position: Int) {
                radioGroup.check(list[position])
            }

        })
    }

    override fun onCheckedChanged(group: RadioGroup?, checkedId: Int) {
        for (i in list.indices){
            if (list[i] == checkedId){
                viewPager.setCurrentItem(i)
            }
            scrollToFocus()
        }
    }

    /**
     *   RadioButton,        
     */
    private fun scrollToFocus() {
        //      
        val screenWith = this.resources.displayMetrics.widthPixels
        //  RadioButton X  
        val item = findViewById<RadioButton>(radioGroup.checkedRadioButtonId)
        var x = item.x.toInt()
        if (x + item.width < screenWith){
            x = 0
        }
        horizontalScrollView.smoothScrollTo(x,0)
    }
}


Adapter

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import java.util.ArrayList

class MyFragmentAdapter : FragmentStatePagerAdapter {
    private lateinit var fragments: ArrayList<Fragment>

    constructor(fragmentManager: FragmentManager, fragments: ArrayList<Fragment>) : super(fragmentManager){
        this.fragments = fragments
    }

    override fun getItem(position: Int): Fragment {
        return fragments.get(position)
    }

    override fun getCount(): Int {
        return fragments.size
    }

}