仿雷速体育app踢足球tab

MyTabLayout

MyTabLayout用法参照BaseLibrary的Demo
GitHub仓库地址

效果图

引入

gradle

allprojects {
    
    
    repositories {
    
    
        maven {
    
     url 'https://jitpack.io' }
    }
}

implementation 'com.github.DL-ZhangTeng:BaseLibrary:2.3.0'

属性

MyTabLayout属性名	描述：可参考原生控件TabLayout
tabMyGravity	GRAVITY_FILL充满屏幕、GRAVITY_CENTER居中
tabMyMode	MODE_SCROLLABLE可滚动tab、MODE_FIXED固定tab
tabMyTypeface	未被选中tab文本样式
tabMySelectedTypeface	被选中tab文本样式
tabMyPaddingStart	居左Padding
tabMyTextColor	未选中文本颜色
tabMyPaddingEnd	居右Padding
tabMySelectedTextColor	被选中文本颜色
tabMyMaxWidth	最大宽度
tabMyBackground	背景色
tabMyTextAppearance	文本样式
tabMyContentStart	tabs距TabLayout开始位置的偏移量，只有tabMyMode
tabMyMinWidth	最小宽度
tabMyPaddingBottom	距底部Padding
tabMyPaddingTop	距顶部Padding
tabMyPadding	Padding
tabMyTextIconGap	Text与Icon之间的margin
tabMyViewNumber	tab数量
tabMySelectedTextSize	被选中文字大小
tabMyTextSize	未选中文字大小
tabMyTabViewSelf	TabView自定义时宽度自适应
tabMyIndicatorWidth	指示器宽度（设置宽度后指示器Margin失效）
tabMyIndicatorHeight	指示器高度
tabMyIndicatorMarginLeft	指示器居左Margin
tabMyIndicatorMarginTop	指示器居顶部Margin
tabMyIndicatorMarginRight	指示器居右Margin
tabMyIndicatorMarginBottom	指示器居底部Margin
tabMyIndicatorSelfFit	指示器宽度自适应文本宽度（默认false）
tabMyIndicatorMarginBottomSelfFit	指示器自适应文本底部的距离（tabMyIndicatorSelfFit为true时生效，默认false）
tabMyIndicatorBottomLayer	指示器置于文本底部（默认false）
tabMyIndicatorColor	指示器颜色
tabMyIndicatorRoundRadius	指示器圆角
tabMyIndicatorDrawable	图片指示器，支持drawable与mipmap
tabMyIndicatorVerticalOffsets	指示器垂直滚动，String数组对应每一个tab的垂直偏移量（0.0：不进行垂直偏移；1.0：垂直偏移tab高度-指示器高度-垂直Margin）
tabMyIndicatorHorizontalOffsets	指示器水平滚动，String数组对应每一个tab的水平偏移量（0.0：不进行水平偏移；1.0：水平移tab宽度-指示器宽度-水平Margin）

示例

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="false"
        app:tabMyIndicatorColor="#ff000000"
        app:tabMyIndicatorHeight="2dp"
        app:tabMyIndicatorMarginBottomSelfFit="false"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="false"
        app:tabMyMode="MODE_SCROLLABLE"
        app:tabMyPaddingEnd="18dp"
        app:tabMyPaddingStart="18dp"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="16sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL" />

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="false"
        app:tabMyIndicatorColor="#00000000"
        app:tabMyIndicatorDrawable="@mipmap/ic_delete"
        app:tabMyIndicatorHeight="15dp"
        app:tabMyIndicatorMarginBottomSelfFit="false"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="false"
        app:tabMyIndicatorWidth="15dp"
        app:tabMyMode="MODE_SCROLLABLE"
        app:tabMyPaddingEnd="18dp"
        app:tabMyPaddingStart="18dp"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="16sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL" />

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout2"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="false"
        app:tabMyIndicatorColor="#ff000000"
        app:tabMyIndicatorHeight="2dp"
        app:tabMyIndicatorMarginBottomSelfFit="false"
        app:tabMyIndicatorMarginLeft="5dp"
        app:tabMyIndicatorMarginRight="5dp"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="false"
        app:tabMyMode="MODE_SCROLLABLE"
        app:tabMyPaddingEnd="18dp"
        app:tabMyPaddingStart="18dp"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="16sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL" />

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout3"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="true"
        app:tabMyIndicatorColor="#ff000000"
        app:tabMyIndicatorHeight="2dp"
        app:tabMyIndicatorMarginBottomSelfFit="true"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="true"
        app:tabMyMode="MODE_SCROLLABLE"
        app:tabMyPaddingEnd="18dp"
        app:tabMyPaddingStart="18dp"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="16sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL" />

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout4"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="true"
        app:tabMyIndicatorColor="#ff000000"
        app:tabMyIndicatorHeight="2dp"
        app:tabMyIndicatorMarginBottomSelfFit="true"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="true"
        app:tabMyMode="MODE_FIXED"
        app:tabMyPaddingEnd="18dp"
        app:tabMyPaddingStart="18dp"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="16sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL"
        app:tabMyViewNumber="5" />

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout5"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="true"
        app:tabMyIndicatorColor="#ff000000"
        app:tabMyIndicatorHeight="2dp"
        app:tabMyIndicatorMarginBottomSelfFit="true"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="true"
        app:tabMyMode="MODE_FIXED"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="26sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL"
        app:tabMyViewNumber="5" />

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout6"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="false"
        app:tabMyIndicatorColor="#00000000"
        app:tabMyIndicatorDrawable="@mipmap/icon_match_event_goal_mini"
        app:tabMyIndicatorHeight="10dp"
        app:tabMyIndicatorHorizontalOffsets="@array/HorizontalOffset"
        app:tabMyIndicatorMarginBottomSelfFit="false"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="false"
        app:tabMyIndicatorVerticalOffsets="@array/VerticalOffset"
        app:tabMyIndicatorWidth="10dp"
        app:tabMyMode="MODE_FIXED"
        app:tabMyPaddingEnd="18dp"
        app:tabMyPaddingStart="18dp"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="16sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL"
        app:tabMyViewNumber="5" />

    <com.zhangteng.base.widget.MyTabLayout
        android:id="@+id/tab_layout7"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        app:tabMyBackground="@color/colorWhite"
        app:tabMyIndicatorBottomLayer="false"
        app:tabMyIndicatorColor="#00000000"
        app:tabMyIndicatorDrawable="@mipmap/icon_match_event_goal_mini"
        app:tabMyIndicatorHeight="10dp"
        app:tabMyIndicatorHorizontalOffsets="@array/HorizontalOffset"
        app:tabMyIndicatorMarginBottomSelfFit="false"
        app:tabMyIndicatorRoundRadius="2dp"
        app:tabMyIndicatorSelfFit="false"
        app:tabMyIndicatorVerticalOffsets="@array/VerticalOffset"
        app:tabMyIndicatorWidth="10dp"
        app:tabMyMode="MODE_FIXED"
        app:tabMyPaddingEnd="18dp"
        app:tabMyPaddingStart="18dp"
        app:tabMySelectedTextColor="#222222"
        app:tabMySelectedTextSize="16sp"
        app:tabMySelectedTypeface="NORMAL"
        app:tabMyTabViewSelf="true"
        app:tabMyTextColor="#999999"
        app:tabMyTextSize="14sp"
        app:tabMyTypeface="NORMAL"
        app:tabMyViewNumber="5" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

package com.zhangteng.baselibrary.activity

import android.graphics.drawable.AnimationDrawable
import android.os.Bundle
import android.widget.ImageView
import androidx.fragment.app.Fragment
import androidx.viewpager.widget.ViewPager
import com.zhangteng.base.adapter.CommonFragmentAdapter
import com.zhangteng.base.base.BaseActivity
import com.zhangteng.base.widget.MyTabLayout
import com.zhangteng.base.widget.MyTabLayoutMediator
import com.zhangteng.baselibrary.R
import com.zhangteng.baselibrary.fragment.BaseDemoFragment


class TabLayoutActivity : BaseActivity() {
    
    
    private var tab_layout: MyTabLayout? = null
    private var tab_layout1: MyTabLayout? = null
    private var tab_layout2: MyTabLayout? = null
    private var tab_layout3: MyTabLayout? = null
    private var tab_layout4: MyTabLayout? = null
    private var tab_layout5: MyTabLayout? = null
    private var tab_layout6: MyTabLayout? = null
    private var tab_layout7: MyTabLayout? = null
    private var vp: ViewPager? = null
    private val titleList: Array<String?> =
        arrayOf("111111", "111111", "111111", "111111", "111111")

    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tablayout)
    }

    override fun initView() {
    
    
        tab_layout = findViewById(R.id.tab_layout)
        tab_layout1 = findViewById(R.id.tab_layout1)
        tab_layout2 = findViewById(R.id.tab_layout2)
        tab_layout3 = findViewById(R.id.tab_layout3)
        tab_layout4 = findViewById(R.id.tab_layout4)
        tab_layout5 = findViewById(R.id.tab_layout5)
        tab_layout6 = findViewById(R.id.tab_layout6)
        tab_layout7 = findViewById(R.id.tab_layout7)
        vp = findViewById(R.id.vp)

        val fragments = ArrayList<Fragment>()
        fragments.add(BaseDemoFragment())
        fragments.add(BaseDemoFragment())
        fragments.add(BaseDemoFragment())
        fragments.add(BaseDemoFragment())
        fragments.add(BaseDemoFragment())
        vp?.adapter =
            CommonFragmentAdapter(
                supportFragmentManager,
                titleList,
                fragments
            )

        tab_layout?.setupWithViewPager(vp)
        tab_layout1?.setupWithViewPager(vp)
        tab_layout2?.setupWithViewPager(vp)
        tab_layout3?.setupWithViewPager(vp)
        tab_layout4?.setupWithViewPager(vp)
        tab_layout5?.setupWithViewPager(vp)

        //使用newTab()自定义Tab
        for (position in titleList.indices) {
    
    
            val tab = tab_layout6?.newTab()
            tab?.let {
    
    
                val imageView = ImageView(this@TabLayoutActivity)
                setAnimation(imageView, position)
                tab.setCustomView(imageView)
                tab_layout6?.addTab(tab)
                if (position == 0) {
    
    
                    val animationDrawable =
                        (tab.getCustomView() as ImageView).drawable as AnimationDrawable?
                    if (animationDrawable != null && !animationDrawable.isRunning) {
    
    
                        animationDrawable.start()
                    }
                }
            }
        }
        vp?.addOnPageChangeListener(MyTabLayout.TabLayoutOnPageChangeListener(tab_layout6))

        tab_layout6?.addOnTabSelectedListener(object : MyTabLayout.OnTabSelectedListener {
    
    
            override fun onTabSelected(tab: MyTabLayout.Tab?) {
    
    
                tab?.let {
    
    
                    vp?.currentItem = tab.getPosition()

                    val animationDrawable =
                        (tab.getCustomView() as ImageView).drawable as AnimationDrawable?
                    if (animationDrawable != null && !animationDrawable.isRunning) {
    
    
                        animationDrawable.start()
                    }
                }
            }

            override fun onTabUnselected(tab: MyTabLayout.Tab?) {
    
    
                tab?.let {
    
    
                    setAnimation(tab.getCustomView() as ImageView, tab.getPosition())
                }
            }

            override fun onTabReselected(tab: MyTabLayout.Tab?) {
    
    
                tab?.let {
    
    
                    setAnimation(tab.getCustomView() as ImageView, tab.getPosition())
                }
            }
        })

        //使用MyTabLayoutMediator自定义Tab
        MyTabLayoutMediator(
            tab_layout7!!,
            vp!!,
            object : MyTabLayoutMediator.TabConfigurationStrategy {
    
    
                override fun onConfigureTab(tab: MyTabLayout.Tab, position: Int) {
    
    
                    val imageView = ImageView(this@TabLayoutActivity)
                    setAnimation(imageView, position)
                    tab.setCustomView(imageView)
                    if (position == 0) {
    
    
                        val animationDrawable =
                            (tab.getCustomView() as ImageView).drawable as AnimationDrawable?
                        if (animationDrawable != null && !animationDrawable.isRunning) {
    
    
                            animationDrawable.start()
                        }
                    }
                }
            })
            .attach()

        tab_layout7?.addOnTabSelectedListener(object : MyTabLayout.OnTabSelectedListener {
    
    
            override fun onTabSelected(tab: MyTabLayout.Tab?) {
    
    
                tab?.let {
    
    
                    val animationDrawable =
                        (tab.getCustomView() as ImageView).drawable as AnimationDrawable?
                    if (animationDrawable != null && !animationDrawable.isRunning) {
    
    
                        animationDrawable.start()
                    }
                }
            }

            override fun onTabUnselected(tab: MyTabLayout.Tab?) {
    
    
                tab?.let {
    
    
                    setAnimation(tab.getCustomView() as ImageView, tab.getPosition())
                }
            }

            override fun onTabReselected(tab: MyTabLayout.Tab?) {
    
    
                tab?.let {
    
    
                    setAnimation(tab.getCustomView() as ImageView, tab.getPosition())
                }
            }
        })
    }

    override fun initData() {
    
    

    }

    private fun setAnimation(imageView: ImageView, position: Int) {
    
    
        when (position) {
    
    
            0 -> {
    
    
                imageView.setImageResource(R.drawable.tab_animation_1)
            }
            1 -> {
    
    
                imageView.setImageResource(R.drawable.tab_animation_2)
            }
            2 -> {
    
    
                imageView.setImageResource(R.drawable.tab_animation_3)
            }
            3 -> {
    
    
                imageView.setImageResource(R.drawable.tab_animation_4)
            }
            4 -> {
    
    
                imageView.setImageResource(R.drawable.tab_animation_5)
            }
        }
    }
}

足球Tab动画与偏移数组

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <!-- animation-list 帧动画 -->
    <!-- android:oneshot的值为 false代表播放多次，true代表只播放一次 -->
    <!-- duration代表每张图片的播放时间 ,定义一个持续时间为50毫秒的动画帧 -->
    <item
        android:drawable="@mipmap/icon_match_1"
        android:duration="150" />
    <item
        android:drawable="@mipmap/icon_match_2"
        android:duration="150" />
    <item
        android:drawable="@mipmap/icon_match_3"
        android:duration="50" />
    <item
        android:drawable="@mipmap/icon_match_4"
        android:duration="50" />
</animation-list>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="VerticalOffset">
        <item>0.258</item>
        <item>0.258</item>
        <item>0.254</item>
        <item>0.760</item>
        <item>0.258</item>
    </string-array>
    <string-array name="HorizontalOffset">
        <item>-0.058</item>
        <item>-0.058</item>
        <item>0.054</item>
        <item>0.066</item>
        <item>0.066</item>
    </string-array>
</resources>