增加了Tab的数据填充以及与ViewPager的交互

2020-07-31 16:37:55 +08:00
parent 0001a775dd
commit 813612cecb
6 changed files with 124 additions and 24 deletions
--- a/config.gradle
+++ b/config.gradle
@@ -76,7 +76,7 @@ targetSdkVersion        : 22,
            roomRxjava               : "android.arch.persistence.room:rxjava2:1.1.1",

            // material
-            material                 : 'com.google.android.material:material:1.0.0',
+            material                 : 'com.google.android.material:material:1.1.0',


            // modules
--- a/modules/mogo-module-event-panel/build.gradle
+++ b/modules/mogo-module-event-panel/build.gradle
@@ -44,6 +44,7 @@ dependencies {
    implementation rootProject.ext.dependencies.androidxappcompat
    implementation rootProject.ext.dependencies.androidxconstraintlayout
    implementation rootProject.ext.dependencies.arouter
+    implementation rootProject.ext.dependencies.material
    kapt rootProject.ext.dependencies.aroutercompiler
    implementation rootProject.ext.dependencies.rxjava
    implementation rootProject.ext.dependencies.rxandroid
--- a/modules/mogo-module-event-panel/src/main/java/com/zhidao/mogo/module/event/panel/EventPanelModuleProvider.kt
+++ b/modules/mogo-module-event-panel/src/main/java/com/zhidao/mogo/module/event/panel/EventPanelModuleProvider.kt
@@ -52,7 +52,6 @@ class EventPanelModuleProvider : IEventPanelProvider {
        return EventPanelFragment.getInstance().isPanelShow()
    }

-
    /**
     * 隐藏面板
     */
--- a/modules/mogo-module-event-panel/src/main/java/com/zhidao/mogo/module/event/panel/adapter/EventPagerAdapter.kt
+++ b/modules/mogo-module-event-panel/src/main/java/com/zhidao/mogo/module/event/panel/adapter/EventPagerAdapter.kt
@@ -2,17 +2,15 @@ package com.zhidao.mogo.module.event.panel.adapter

 import androidx.fragment.app.Fragment
 import androidx.viewpager2.adapter.FragmentStateAdapter
-import com.zhidao.mogo.module.event.panel.fragment.ShareEventsFragment
-import com.zhidao.mogo.module.event.panel.fragment.SurroundingEventFragment
-import com.zhidao.mogo.module.event.panel.fragment.ScenarioHistoryFragment

 /**
 * 事件面板viewpager2的adapter
 *
 * @author tongchenfei
 */
-class EventPagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
-    private val fragments: Array<Fragment> = arrayOf(ScenarioHistoryFragment(), SurroundingEventFragment(), ShareEventsFragment())
+class EventPagerAdapter(fragment: Fragment,
+                        private val fragments: Array<Fragment>) :
+        FragmentStateAdapter(fragment) {

    /**
     * 目前一共就三个fragment
--- a/modules/mogo-module-event-panel/src/main/java/com/zhidao/mogo/module/event/panel/fragment/EventPanelFragment.kt
+++ b/modules/mogo-module-event-panel/src/main/java/com/zhidao/mogo/module/event/panel/fragment/EventPanelFragment.kt
@@ -1,7 +1,15 @@
 package com.zhidao.mogo.module.event.panel.fragment

+import android.content.res.ColorStateList
+import android.graphics.Typeface
+import android.view.Gravity
 import android.view.View
+import android.widget.TextView
 import androidx.fragment.app.Fragment
+import androidx.viewpager2.widget.ViewPager2
+import androidx.viewpager2.widget.ViewPager2.OnPageChangeCallback
+import com.google.android.material.tabs.TabLayoutMediator
+import com.google.android.material.tabs.TabLayoutMediator.TabConfigurationStrategy
 import com.mogo.commons.mvp.MvpFragment
 import com.mogo.utils.logger.Logger
 import com.zhidao.mogo.module.event.panel.EventPanelConstants.MODULE_NAME
@@ -10,6 +18,7 @@ import com.zhidao.mogo.module.event.panel.adapter.EventPagerAdapter
 import com.zhidao.mogo.module.event.panel.presenter.EventPanelPresenter
 import kotlinx.android.synthetic.main.module_event_panel_fragment_event_panel.*

+
 /**
 * 事件面板主fragment
 *
@@ -17,9 +26,26 @@ import kotlinx.android.synthetic.main.module_event_panel_fragment_event_panel.*
 */
 class EventPanelFragment : MvpFragment<EventPanelFragment, EventPanelPresenter>() {

-    companion object{
+
+    private val tabsTitle = arrayOf("出行动态", "周边事件", "我的分享")
+    private val fragments: Array<Fragment> =
+            arrayOf(
+                    ScenarioHistoryFragment(),
+                    SurroundingEventFragment(),
+                    ShareEventsFragment()
+            )
+
+    private val activeColor: Int = android.graphics.Color.parseColor("#ff678f")
+    private val normalColor: Int = android.graphics.Color.parseColor("#666666")
+
+    private val activeSize = 30
+    private val normalSize = 20
+
+    private var mediator: TabLayoutMediator? = null
+
+    companion object {
        private val fragment = EventPanelFragment()
-        fun getInstance():EventPanelFragment{
+        fun getInstance(): EventPanelFragment {
            return fragment
        }
    }
@@ -30,32 +56,79 @@ class EventPanelFragment : MvpFragment<EventPanelFragment, EventPanelPresenter>(

    override fun initViews() {
        Logger.d(MODULE_NAME, "EventPanelFragment init view===")
-        vpEventPanel.adapter = EventPagerAdapter(this)
+        //禁用预加载
+        vpEventPanel.offscreenPageLimit = ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT
+        vpEventPanel.adapter = EventPagerAdapter(this, fragments)
+        //viewPager 页面切换监听
+        vpEventPanel.registerOnPageChangeCallback(changeCallback);
+
+        //这里可以自定义TabView
+        mediator = TabLayoutMediator(tabLayout, vpEventPanel, TabConfigurationStrategy { tab, position ->
+            val tabView = TextView(context)
+            tabView.gravity=Gravity.CENTER
+            val states = arrayOfNulls<IntArray>(2)
+            states[0] = intArrayOf(android.R.attr.state_selected)
+            states[1] = intArrayOf()
+            val colors = intArrayOf(activeColor, normalColor)
+            val colorStateList = ColorStateList(states, colors)
+            tabView.text = tabsTitle[position]
+            tabView.textSize = normalSize.toFloat()
+            tabView.setTextColor(colorStateList)
+            tab.customView = tabView
+        })
+        //要执行这一句才是真正将两者绑定起来
+        mediator!!.attach()
+
        btnShowOrHidePanels.setOnClickListener {
-            if (vpEventPanel.visibility == View.GONE) {
+            if (clPanelContainer.visibility == View.GONE) {
                showPanel()
-            }else{
+            } else {
                hidePanel()
            }
        }
    }
+
+    private val changeCallback: OnPageChangeCallback = object : OnPageChangeCallback() {
+        override fun onPageSelected(position: Int) {
+            //可以来设置选中时tab的大小
+            val tabCount = tabLayout.tabCount
+            for (i in 0 until tabCount) {
+                val tab = tabLayout.getTabAt(i)
+                val tabView = tab!!.customView as TextView?
+                if (tab.position == position) {
+                    tabView!!.textSize = activeSize.toFloat()
+                    tabView.typeface = Typeface.DEFAULT_BOLD
+                } else {
+                    tabView!!.textSize = normalSize.toFloat()
+                    tabView.typeface = Typeface.DEFAULT
+                }
+            }
+        }
+    }
+
+    override fun onDestroyView() {
+        mediator?.detach()
+        vpEventPanel?.unregisterOnPageChangeCallback(changeCallback)
+        super.onDestroyView()
+    }
+
    override fun createPresenter(): EventPanelPresenter {
        return EventPanelPresenter(this)
    }

-    fun showPanel(){
-        Logger.d(MODULE_NAME,"in fragment show panel")
-        vpEventPanel.visibility = View.VISIBLE
+    fun showPanel() {
+        Logger.d(MODULE_NAME, "in fragment show panel")
+        clPanelContainer.visibility = View.VISIBLE
        btnShowOrHidePanels.text = "隐藏面板"
    }

-    fun hidePanel(){
-        Logger.d(MODULE_NAME,"in fragment hide panel")
-        vpEventPanel.visibility = View.GONE
+    fun hidePanel() {
+        Logger.d(MODULE_NAME, "in fragment hide panel")
+        clPanelContainer.visibility = View.GONE
        btnShowOrHidePanels.text = "显示面板"
    }

-    fun isPanelShow():Boolean{
-        return vpEventPanel.visibility == View.VISIBLE
+    fun isPanelShow(): Boolean {
+        return clPanelContainer.visibility == View.VISIBLE
    }
 }
--- a/modules/mogo-module-event-panel/src/main/res/layout/module_event_panel_fragment_event_panel.xml
+++ b/modules/mogo-module-event-panel/src/main/res/layout/module_event_panel_fragment_event_panel.xml
@@ -1,15 +1,44 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:id="@+id/clPanelContainer"
+    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

-    <androidx.viewpager2.widget.ViewPager2
-        android:id="@+id/vpEventPanel"
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/clPanelContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
-        android:visibility="gone" />
+        android:background="@color/cardview_dark_background"
+        android:visibility="gone"
+        tools:visibility="visible">
+
+        <com.google.android.material.tabs.TabLayout
+            android:id="@+id/tabLayout"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/dp_150"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:tabGravity="fill"
+            app:tabIndicatorColor="#ff678f"
+            app:tabIndicatorFullWidth="false"
+            app:tabIndicatorHeight="2dp"
+            app:tabMode="fixed"
+            app:tabSelectedTextColor="#ff678f"
+            app:tabTextColor="#EE00FF"
+            app:tabUnboundedRipple="true" />
+
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/vpEventPanel"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/tabLayout" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/btnShowOrHidePanels"