Viewpager and dot of bottom wireless loop

ViewPager And the dot on the bottom of the wireless loop

Show all of them APP Icon , You can click to jump , Two pages required APP Information , And when the page slides, the small dot at the bottom follows the slide

Implementation scheme : viewPager+ fragment

1. Inheritance implementation FragmentPagerAdapter

class AppFragmentPageAdapter(fragmentManager: FragmentManager) :
    FragmentPagerAdapter(fragmentManager) {
    
    private var fragmentList = ArrayList<AppPagerFragment>()
    fun setFragmentList(fragmentList: ArrayList<AppPagerFragment>) {
    
        this.fragmentList = fragmentList
        notifyDataSetChanged()
    }

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

    override fun getItem(position: Int): AppPagerFragment {
    
        return fragmentList[position]
    }

    override fun getItemId(position: Int): Long {
    
        return System.currentTimeMillis()
    }
}

2. Inheritance implementation RecyclerView.Adapter

class AppItemAdapter : RecyclerView.Adapter<AppItemAdapter.AppViewHolder>() {
    

    private var appList = ArrayList<AppInfoItem>()
    private var itemClickListener: OnItemClickListener? = null
    public fun setAppListInfo(appList: ArrayList<AppInfoItem>) {
    
        this.appList = appList
        notifyDataSetChanged()
    }

    public fun getItemInfo(position: Int):AppInfoItem{
    
        return appList[position]
    }

    fun setOnItemClickListener(listener: OnItemClickListener) {
    
        itemClickListener = listener
    }

    override fun onCreateViewHolder(group: ViewGroup, p1: Int): AppViewHolder {
    
        return AppViewHolder(
            AppPageItemBinding.inflate(
                LayoutInflater.from(group.context),
                group,
                false
            )
        )
    }

    override fun onBindViewHolder(holder: AppViewHolder, position: Int) {
    
        holder.bindValue(appList[position])
        holder.itemView.setOnClickListener {
     itemClickListener?.onItemClick(position) }
    }

    override fun getItemCount(): Int {
    
        return appList.size
    }


    class AppViewHolder(var binding: AppPageItemBinding) : RecyclerView.ViewHolder(binding.root) {
    
        fun bindValue(item: AppInfoItem) {
    
            binding.ivAppIcon.setImageResource(item.appIcon)
            binding.tvAppName.setText(item.appName)
        }
    }

    interface OnItemClickListener {
    
        fun onItemClick(position: Int)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:layout_marginBottom="50dp" tools:ignore="MissingDefaultResource">

    <FrameLayout style="@style/app_menu_fl_style">

        <ImageView android:id="@+id/iv_app_icon" style="@style/app_menu_iv_style" android:src="@drawable/ic_mobile_internet_selector" />
    </FrameLayout>

    <TextView android:id="@+id/tv_app_name" style="@style/app_menu_text_style" android:text="@string/phone_connection" />

</LinearLayout>

3.APP Entity class

data class AppInfoItem(
    var appName: Int,
    var appPackageName: String,
    var appLaunchMain: String,
    var appIcon: Int
) : Parcelable


val appList: ArrayList<AppInfoItem>
    get() {
    
        return ArrayList<AppInfoItem>().apply {
    
        // add to APP Information 
            add(AppInfoItem())
        }

    }

4.Fragment

class AppPagerFragment : android.support.v4.app.Fragment() {
    
    private var appList = ArrayList<AppInfoItem>()
    private var appItemAdapter = AppItemAdapter()
    private var binding: FragmentAppPagerBinding? = null

    companion object {
    
        fun newInstance(appList: ArrayList<AppInfoItem>): AppPagerFragment {
    
            return AppPagerFragment().apply {
    
                val bundle = Bundle()
                bundle.putParcelableArrayList("app_list", appList)
                arguments = bundle
            }
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
    
        super.onCreate(savedInstanceState)
    }

    fun changeData(appInfoData: ArrayList<AppInfoItem>) {
    
        appList = appInfoData
        appItemAdapter.setAppListInfo(appList)
    }

    fun changeData() {
    
        appItemAdapter.notifyDataSetChanged()
    }

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
    
        binding = FragmentAppPagerBinding.inflate(inflater, container, false)
        return binding!!.root
    }

   

    override fun onActivityCreated(savedInstanceState: Bundle?) {
    
        super.onActivityCreated(savedInstanceState)
        appList = arguments!!.getParcelableArrayList("app_list")
        appItemAdapter.setAppListInfo(appList)
        binding!!.rlvApp.apply {
    
            layoutManager = GridLayoutManager(context, 5, GridLayoutManager.VERTICAL, false)
            adapter = appItemAdapter
        }
        appItemAdapter.setOnItemClickListener(object : AppItemAdapter.OnItemClickListener {
    
            override fun onItemClick(position: Int) {
    
                var item = appItemAdapter.getItemInfo(position)
                		// Open by package name app
                	}
                }
    }

    override fun onSaveInstanceState(outState: Bundle) {
    
        super.onSaveInstanceState(outState)
    }

}

fragment Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView android:id="@+id/rlv_app" android:overScrollMode="never" android:layout_width="match_parent" android:layout_height="match_parent"/>

</LinearLayout>

5. load viewPager

Main page layout xml

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

    <android.support.v4.view.ViewPager android:id="@+id/vpApps" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="110dp" android:overScrollMode="never" android:scrollbars="none" />

    <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="30dp">

        <LinearLayout android:id="@+id/llPointGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="horizontal">

            <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_pageindicator_default" />

            <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="21dp" android:background="@drawable/ic_pageindicator_default" />
        </LinearLayout>

        <ImageView android:id="@+id/ivCurrentPoint" android:layout_width="12dp" android:layout_height="12dp" android:background="@drawable/ic_pageindicator_current" />
    </RelativeLayout>
</RelativeLayout>

class TestActivity : BaseActivity() {
    
    

    
    private var appInfoList = ArrayList<AppInfoItem>()
    private val viewPagerAdapter by lazy {
     AppFragmentPageAdapter(getSupportFragmentManager()) }

    

    override fun onCreate(savedInstanceState: Bundle?) {
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_apps)
        appInfoList.addAll(appList)
        initViewPageAdapterInfo()
        vpApps.adapter = viewPagerAdapter
        vpApps.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    
            override fun onPageScrolled(
                    position: Int,
                    positionOffset: Float,
                    positionOffsetPixels: Int
            ) {
    
                //viewPager When sliding, move the lower dot according to the sliding coordinates 
                //position  yes viewpager Pages of   Total 2 pages  0  and  1
                val leftMargin = (33 * (positionOffset + position)).toInt()
                val lp = ivCurrentPoint.layoutParams as RelativeLayout.LayoutParams
                lp.leftMargin = leftMargin
                ivCurrentPoint.layoutParams = lp
                Log.e("youdianxiaoshuai", "position : $position positionOffset: $positionOffset" +
                        " lp : $lp leftMargin : $leftMargin"
                )
            }

            override fun onPageSelected(i: Int) = Unit

            override fun onPageScrollStateChanged(i: Int) = Unit
        })
    }
    
    //  Two pages of data 
    private var page1List = ArrayList<AppInfoItem>()
    private var page2List = ArrayList<AppInfoItem>()

    private fun initViewPageAdapterInfo() {
    
        page1List.clear()
        page2List.clear()
        //  fill appinfo data 
        appInfoList.forEachWithIndex(::fillItem)
        if (viewPagerAdapter.count > 0) {
    
            viewPagerAdapter.getItem(0).changeData(page1List)
            viewPagerAdapter.getItem(1).changeData(page2List)
        } else {
    
            viewPagerAdapter.setFragmentList(ArrayList<AppPagerFragment>().apply {
    
                add(AppPagerFragment.newInstance(page1List))
                add(AppPagerFragment.newInstance(page2List))
            })
        }
    }


    private fun fillItem(index: Int, item: AppInfoItem) {
    
        if (index < 10) {
    
            page1List.add(item)
        } else {
    
            page2List.add(item)
        }
    }

    override fun onDestroy() {
    
        super.onDestroy()
    }
}