仿雷速体育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） |
示例
<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动画与偏移数组
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<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>
<resources>
<string-array name="VerticalOffset">
<item>0.258item>
<item>0.258item>
<item>0.254item>
<item>0.760item>
<item>0.258item>
string-array>
<string-array name="HorizontalOffset">
<item>-0.058item>
<item>-0.058item>
<item>0.054item>
<item>0.066item>
<item>0.066item>
string-array>
resources>