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>