首页的tab和viewpager的功能已完成

.gitignore

@@ -12,4 +12,5 @@
 /build
 /captures
 .externalNativeBuild
-.cxx
\ No newline at end of file
+.cxx
+/library_ad/build/

app/src/main/java/com/mints/goodnews/main/home/HomeFragment.kt

 package com.mints.goodnews.main.home
 
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
+import android.view.animation.AccelerateInterpolator
+import android.view.animation.DecelerateInterpolator
+import androidx.core.content.ContextCompat
+import androidx.fragment.app.Fragment
+import androidx.viewpager2.adapter.FragmentStateAdapter
+import androidx.viewpager2.widget.ViewPager2
 import com.fry.base.base.BaseFragment
+import com.fry.base.widget.ScaleTransitionPagerTitleView
 import com.mints.goodnews.BR
 import com.mints.goodnews.R
 import com.mints.goodnews.databinding.FragmentHomeBinding
+import com.mints.goodnews.main.my.MyFragment
+import me.goldze.mvvmhabit.utils.Utils
+import net.lucode.hackware.magicindicator.MagicIndicator
+import net.lucode.hackware.magicindicator.buildins.UIUtil
+import net.lucode.hackware.magicindicator.buildins.commonnavigator.CommonNavigator
+import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.CommonNavigatorAdapter
+import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.IPagerIndicator
+import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.IPagerTitleView
+import net.lucode.hackware.magicindicator.buildins.commonnavigator.indicators.LinePagerIndicator
 
 /**
  * Created by 冯瑞雨 on 2021/7/2.
  * 首页页面
  */
-class HomeFragment: BaseFragment<FragmentHomeBinding, HomeViewModel>() {
+class HomeFragment : BaseFragment<FragmentHomeBinding, HomeViewModel>() {
     override fun initContentView(
             inflater: LayoutInflater?, container: ViewGroup?,
             savedInstanceState: Bundle?) =
             R.layout.fragment_home
 
     override fun initVariableId() = BR.viewModel
+
+    override fun initData() {
+        super.initData()
+        initTabFragment()
+    }
+
+    private fun initTabFragment() {
+        val tabNames = mutableListOf<String>()
+        tabNames.add("热门")
+        tabNames.add("变老特效")
+        tabNames.add("变年轻特效")
+        tabNames.add("老照片修复")
+        tabNames.add("黑白照片上色")
+
+        val fragments = mutableListOf<Fragment>()
+        fragments.add(MyFragment())
+        fragments.add(MyFragment())
+        fragments.add(MyFragment())
+        fragments.add(MyFragment())
+        fragments.add(MyFragment())
+
+
+        //初始化viewpager2
+        binding.viewPager.init(this, fragments)
+
+        //初始化 magic_indicator
+        binding.magicIndicator.bindViewPager2(binding.viewPager, tabNames, {}, 20f, true)
+
+
+    }
+
+    private fun ViewPager2.init(
+            fragment: Fragment,
+            fragments: List<Fragment>,
+            isUserInputEnabled: Boolean = true
+    ): ViewPager2 {
+        //是否可滑动
+        this.isUserInputEnabled = isUserInputEnabled
+        //设置适配器
+        adapter = object : FragmentStateAdapter(fragment) {
+            override fun createFragment(position: Int) = fragments[position]
+            override fun getItemCount() = fragments.size
+        }
+        return this
+    }
+
+    private fun MagicIndicator.bindViewPager2(
+            viewPager: ViewPager2,
+            mStringList: List<String> = arrayListOf(),
+            action: (index: Int) -> Unit = {},
+            mTextSize: Float = 18f,
+            isBold: Boolean = false
+    ) {
+        val commonNavigator = CommonNavigator(Utils.getContext())
+        commonNavigator.adapter = object : CommonNavigatorAdapter() {
+
+            override fun getCount(): Int {
+                return mStringList.size
+            }
+
+            override fun getTitleView(context: Context, index: Int): IPagerTitleView {
+                return ScaleTransitionPagerTitleView(Utils.getContext()).apply {
+                    //设置文本
+                    text = mStringList[index]
+                    //字体大小
+                    textSize = mTextSize
+                    // 加粗
+                    typeface =
+                            if (isBold) Typeface.defaultFromStyle(Typeface.BOLD) else Typeface.defaultFromStyle(
+                                    Typeface.NORMAL
+                            )
+                    //未选中颜色
+                    normalColor = Color.BLACK
+                    //选中颜色
+                    selectedColor = ContextCompat.getColor(context, R.color.main_color)
+                    //点击事件
+                    setOnClickListener {
+                        viewPager.currentItem = index
+                        action.invoke(index)
+                    }
+                }
+            }
+
+            override fun getIndicator(context: Context): IPagerIndicator {
+                return LinePagerIndicator(context).apply {
+                    mode = LinePagerIndicator.MODE_EXACTLY
+                    //线条的宽高度
+                    lineHeight = UIUtil.dip2px(Utils.getContext(), 3.0).toFloat()
+                    lineWidth = UIUtil.dip2px(Utils.getContext(), 30.0).toFloat()
+                    //线条的圆角
+                    roundRadius = UIUtil.dip2px(Utils.getContext(), 6.0).toFloat()
+                    startInterpolator = AccelerateInterpolator()
+                    endInterpolator = DecelerateInterpolator(2.0f)
+                    //线条的颜色
+                    setColors(ContextCompat.getColor(context, R.color.main_color))
+                }
+            }
+        }
+        this.navigator = commonNavigator
+
+        viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
+            override fun onPageSelected(position: Int) {
+                super.onPageSelected(position)
+                this@bindViewPager2.onPageSelected(position)
+                action.invoke(position)
+            }
+
+            override fun onPageScrolled(
+                    position: Int,
+                    positionOffset: Float,
+                    positionOffsetPixels: Int
+            ) {
+                super.onPageScrolled(position, positionOffset, positionOffsetPixels)
+                this@bindViewPager2.onPageScrolled(position, positionOffset, positionOffsetPixels)
+            }
+
+            override fun onPageScrollStateChanged(state: Int) {
+                super.onPageScrollStateChanged(state)
+                this@bindViewPager2.onPageScrollStateChanged(state)
+            }
+        })
+    }
 }
\ No newline at end of file

app/src/main/res/layout/fragment_home.xml

@@ -5,18 +5,21 @@
             name="ViewModel"
             type="com.mints.goodnews.main.home.HomeViewModel" />
     </data>
-    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
-        <TextView
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        >
+        <net.lucode.hackware.magicindicator.MagicIndicator
+            android:id="@+id/magic_indicator"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            android:text="首页"
-            android:textColor="@color/black"
-            android:textSize="39dp"
-            />
+            android:layout_height="46dp"
+            android:layout_gravity="center" />
 
-    </androidx.constraintlayout.widget.ConstraintLayout>
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/view_pager"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent" />
+
+    </LinearLayout>
 </layout>
\ No newline at end of file

app/src/main/res/layout/home_tab_item.xml

+<?xml version="1.0" encoding="utf-8"?>
+<androidx.appcompat.widget.AppCompatTextView
+    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:textSize="15sp"
+    android:singleLine="true"
+    android:gravity="center_horizontal"
+    android:textColor="@color/main_color">
+
+</androidx.appcompat.widget.AppCompatTextView>
\ No newline at end of file

config.gradle

@@ -99,7 +99,9 @@ ext {
             //"jsbridge"                             : 'com.jeme:tbsjsbridge:1.1.0',
             //瓦力渠道包
             "walle"                                : 'com.meituan.android.walle:library:1.1.6',
-            'viewpager2'                           : "androidx.viewpager2:viewpager2:1.0.0"
+            'viewpager2'                           : "androidx.viewpager2:viewpager2:1.0.0",
+            //指示器库
+            'hackware1993'                           : "com.github.hackware1993:MagicIndicator:1.7.0"
     ]
     boolean flutterEnable = false
 

library_base/build.gradle

@@ -45,6 +45,8 @@ dependencies {
 
     //阿里路由框架
     api rootProject.ext.dependencies["arouter-api"]
+    //指示器
+    api rootProject.ext.dependencies["hackware1993"]
 
     api 'androidx.multidex:multidex:2.0.1'
 

library_base/src/main/java/com/fry/base/widget/ScaleTransitionPagerTitleView.kt

+package com.fry.base.widget
+
+import android.content.Context
+
+import net.lucode.hackware.magicindicator.buildins.commonnavigator.titles.ColorTransitionPagerTitleView
+
+/**
+ * 带颜色渐变和缩放的指示器标题
+ * 博客: http://hackware.lucode.net
+ * Created by hackware on 2016/6/26.
+ */
+class ScaleTransitionPagerTitleView(context: Context) : ColorTransitionPagerTitleView(context) {
+
+    var minScale = 0.7f
+
+    override fun onEnter(index: Int, totalCount: Int, enterPercent: Float, leftToRight: Boolean) {
+        super.onEnter(index, totalCount, enterPercent, leftToRight)    // 实现颜色渐变
+        scaleX = minScale + (1.0f - minScale) * enterPercent
+        scaleY = minScale + (1.0f - minScale) * enterPercent
+    }
+
+    override fun onLeave(index: Int, totalCount: Int, leavePercent: Float, leftToRight: Boolean) {
+        super.onLeave(index, totalCount, leavePercent, leftToRight)    // 实现颜色渐变
+        scaleX = 1.0f + (minScale - 1.0f) * leavePercent
+        scaleY = 1.0f + (minScale - 1.0f) * leavePercent
+    }
+}

library_base/version.properties

-#Mon Jul 05 11:22:44 CST 2021
-VERSION_BUILD=2550
+#Mon Jul 05 15:08:59 CST 2021
+VERSION_BUILD=2561