├── .gitignore ├── .idea ├── codeStyles │ ├── Project.xml │ └── codeStyleConfig.xml ├── gradle.xml ├── misc.xml ├── runConfigurations.xml └── vcs.xml ├── README.MD ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── yunlei │ │ └── hindicator │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── yunlei │ │ │ └── hindicator │ │ │ ├── MainActivity.kt │ │ │ └── widget │ │ │ └── HIndicator.kt │ └── res │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ └── ic_launcher_background.xml │ │ ├── layout │ │ ├── activity_main.xml │ │ └── item_test.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── attrs.xml │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── com │ └── yunlei │ └── hindicator │ └── ExampleUnitTest.kt ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── screenshot ├── 1.gif ├── 2.gif └── 3.gif └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 |

16 | 17 | 18 | 19 | xmlns:android 20 | 21 | ^$ 22 | 23 | 24 | 25 |

26 |

27 | 28 | 29 | 30 | xmlns:.* 31 | 32 | ^$ 33 | 34 | 35 | BY_NAME 36 | 37 |

38 |

39 | 40 | 41 | 42 | .*:id 43 | 44 | http://schemas.android.com/apk/res/android 45 | 46 | 47 | 48 |

49 |

50 | 51 | 52 | 53 | .*:name 54 | 55 | http://schemas.android.com/apk/res/android 56 | 57 | 58 | 59 |

60 |

61 | 62 | 63 | 64 | name 65 | 66 | ^$ 67 | 68 | 69 | 70 |

71 |

72 | 73 | 74 | 75 | style 76 | 77 | ^$ 78 | 79 | 80 | 81 |

82 |

83 | 84 | 85 | 86 | .* 87 | 88 | ^$ 89 | 90 | 91 | BY_NAME 92 | 93 |

94 |

95 | 96 | 97 | 98 | .* 99 | 100 | http://schemas.android.com/apk/res/android 101 | 102 | 103 | ANDROID_ATTRIBUTE_ORDER 104 | 105 |

106 |

107 | 108 | 109 | 110 | .* 111 | 112 | .* 113 | 114 | 115 | BY_NAME 116 | 117 |

118 | 119 | 120 | 121 | 122 | 124 | 125 | -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 19 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # HIndicator RecyclerView横向滑动指示器 2 | 3 | 现在很多app除了banner以外，集中的功能展示区都会有这种需要展示多个，甚至翻页的情况，通常的设计有两种， 4 | 一种是类似于banner的翻页的，比如京东app；另一种是平滑的滚动，比如淘宝app。 5 | 6 | 下面我我们实际看一下这个效果 7 | 8 | 淘宝首页 9 | 10 | ![taobao](https://github.com/leiyun1993/HIndicator/raw/master/screenshot/1.gif) 11 | 12 | 京东到家首页 13 | 14 | ![jingdong](https://github.com/leiyun1993/HIndicator/raw/master/screenshot/2.gif) 15 | 16 | 下面使我们自定义的效果 17 | 18 | ![zidingyi](https://github.com/leiyun1993/HIndicator/raw/master/screenshot/3.gif) 19 | 20 | ### 1、分析 21 | 22 | 其实这个很简单，主要就是有以下几点 23 | 24 | >* 绘制一个圆角矩形做背景； 25 | >* 绘制一个圆角矩形做指示器； 26 | >* 确定指示器的长度和指示器的位置； 27 | >* 根据RecyclerView滑动的距离动态改变指示器的位置。 28 | 29 | 30 | ### 2、绘制指示器 31 | 32 | 绘制背景的圆角矩形的时候，不考虑padding信息，就很简单 33 | 34 | ```kotlin 35 | override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { 36 | super.onSizeChanged(w, h, oldw, oldh) 37 | viewWidth = w 38 | mBgRect.set(0f, 0f, w * 1f, h * 1f) 39 | mRadius = h / 2f 40 | } 41 | 42 | override fun onDraw(canvas: Canvas?) { 43 | super.onDraw(canvas) 44 | //绘制背景 45 | canvas?.drawRoundRect(mBgRect, mRadius, mRadius, mBgPaint) 46 | } 47 | ``` 48 | 49 | 绘制指示器 50 | 51 | **ratio**指的是指示器长度，即如果滚动内容有两屏，则指示器应该为1/2长度，以此类推 52 | （当然上面所示app不一定实现了这个，可能会为了美观设置一个固定比例） 53 | 54 | **progress**指的是滑动距离和指示器对应关系，这个实际上就是滑动进度条的意思 55 | 56 | ```kotlin 57 | //计算指示器的长度和位置 58 | val leftOffset = viewWidth * (1f - ratio) * progress 59 | val left = mBgRect.left + leftOffset 60 | val right = left + viewWidth * ratio 61 | mRect.set(left, mBgRect.top, right, mBgRect.bottom) 62 | 63 | //绘制指示器 64 | canvas?.drawRoundRect(mRect, mRadius, mRadius, mPaint) 65 | ``` 66 | 67 | ### 3、和RecyclerView联动 68 | 69 | 获取RecyclerView滚动的位置可根据以下几个方法获取 70 | 71 | >* computeVerticalScrollExtent()/computeHorizontalScrollExtent是当前屏幕显示的区域高度 72 | >* computeVerticalScrollOffset()/computeHorizontalScrollOffset 是当前屏幕之前滑过的距离 73 | >* computeVerticalScrollRange()/computeHorizontalScrollRange是整个RecycleView控件的高度 74 | 75 | 监听滑动，配合上诉方法就可以拿到滑动位置的比例 76 | 77 | ```kotlin 78 | recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() { 79 | override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) { 80 | super.onScrolled(recyclerView, dx, dy) 81 | val offsetX = recyclerView.computeHorizontalScrollOffset() 82 | val range = recyclerView.computeHorizontalScrollRange() 83 | val extend = recyclerView.computeHorizontalScrollExtent() 84 | val progress: Float = offsetX * 1.0f / (range - extend) //因为指示器有长度，所以这里需要减去首屏长度 85 | this@HIndicator.progress = progress //设置滚动距离所占比例 86 | } 87 | }) 88 | ``` -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | apply plugin: 'kotlin-android' 4 | 5 | apply plugin: 'kotlin-android-extensions' 6 | 7 | android { 8 | compileSdkVersion 29 9 | buildToolsVersion "29.0.2" 10 | defaultConfig { 11 | applicationId "com.yunlei.hindicator" 12 | minSdkVersion 19 13 | targetSdkVersion 29 14 | versionCode 1 15 | versionName "1.0" 16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 17 | } 18 | buildTypes { 19 | release { 20 | minifyEnabled false 21 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 22 | } 23 | } 24 | } 25 | 26 | dependencies { 27 | implementation fileTree(dir: 'libs', include: ['*.jar']) 28 | implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 29 | implementation 'androidx.appcompat:appcompat:1.1.0' 30 | implementation 'androidx.core:core-ktx:1.1.0' 31 | implementation 'androidx.constraintlayout:constraintlayout:1.1.3' 32 | testImplementation 'junit:junit:4.12' 33 | androidTestImplementation 'androidx.test.ext:junit:1.1.1' 34 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' 35 | implementation "org.jetbrains.anko:anko:$anko_version" 36 | implementation 'androidx.recyclerview:recyclerview:1.2.0-alpha01' 37 | } 38 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile 22 | -------------------------------------------------------------------------------- /app/src/androidTest/java/com/yunlei/hindicator/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.yunlei.hindicator 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.yunlei.hindicator", appContext.packageName) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app/src/main/java/com/yunlei/hindicator/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.yunlei.hindicator 2 | 3 | import android.graphics.Color 4 | import android.os.Bundle 5 | import android.view.LayoutInflater 6 | import android.view.View 7 | import android.view.ViewGroup 8 | import androidx.appcompat.app.AppCompatActivity 9 | import androidx.recyclerview.widget.RecyclerView 10 | import kotlinx.android.synthetic.main.activity_main.* 11 | 12 | class MainActivity : AppCompatActivity() { 13 | 14 | override fun onCreate(savedInstanceState: Bundle?) { 15 | super.onCreate(savedInstanceState) 16 | setContentView(R.layout.activity_main) 17 | 18 | recyclerView.adapter = MAdapter() 19 | hIndicator.bindRecyclerView(recyclerView) 20 | 21 | 22 | btn1.setOnClickListener { 23 | hIndicator.setBgColor(Color.parseColor("#333333")) 24 | } 25 | btn2.setOnClickListener { 26 | hIndicator.setIndicatorColor(Color.parseColor("#ffffff")) 27 | } 28 | } 29 | 30 | private inner class MAdapter : RecyclerView.Adapter() { 31 | override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MViewHolder = 32 | MViewHolder( 33 | LayoutInflater.from(parent.context).inflate( 34 | R.layout.item_test, 35 | parent, 36 | false 37 | ) 38 | ) 39 | 40 | 41 | override fun getItemCount(): Int = 15 42 | 43 | override fun onBindViewHolder(holder: MViewHolder, position: Int) { 44 | } 45 | 46 | } 47 | 48 | private inner class MViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) 49 | } 50 | -------------------------------------------------------------------------------- /app/src/main/java/com/yunlei/hindicator/widget/HIndicator.kt: -------------------------------------------------------------------------------- 1 | package com.yunlei.hindicator.widget 2 | 3 | import android.content.Context 4 | import android.content.res.TypedArray 5 | import android.graphics.Canvas 6 | import android.graphics.Color 7 | import android.graphics.Paint 8 | import android.graphics.RectF 9 | import android.util.AttributeSet 10 | import android.view.View 11 | import androidx.annotation.ColorInt 12 | import androidx.recyclerview.widget.RecyclerView 13 | import com.yunlei.hindicator.R 14 | 15 | /** 16 | * 横向滑动的指示器 17 | * 做了基于recyclerView的联动[bindRecyclerView]，其余的需要自己适配 18 | * 19 | * 20 | * @author Yun.Lei 21 | * @email waitshan@163.com 22 | * @date 2020年1月15日 23 | */ 24 | class HIndicator @JvmOverloads constructor( 25 | context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 26 | ) : View(context, attrs, defStyleAttr) { 27 | 28 | private val mBgPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG) 29 | private val mBgRect: RectF = RectF() 30 | private var mRadius: Float = 0f 31 | private val mPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG) 32 | private var mRect: RectF = RectF() 33 | private var viewWidth: Int = 0 34 | private var mBgColor = Color.parseColor("#e5e5e5") 35 | private var mIndicatorColor = Color.parseColor("#ff4646") 36 | var ratio = 0.5f //长度比例 37 | set(value) { 38 | field = value 39 | invalidate() 40 | } 41 | var progress: Float = 0f //滑动进度比例 42 | set(value) { 43 | field = value 44 | invalidate() 45 | } 46 | 47 | init { 48 | 49 | val typedArray: TypedArray = context.obtainStyledAttributes(attrs, R.styleable.HIndicator) 50 | mBgColor = typedArray.getColor(R.styleable.HIndicator_hi_bgColor, mBgColor) 51 | mIndicatorColor = 52 | typedArray.getColor(R.styleable.HIndicator_hi_indicatorColor, mIndicatorColor) 53 | typedArray.recycle() 54 | 55 | mBgPaint.color = mBgColor 56 | mBgPaint.style = Paint.Style.FILL 57 | mPaint.color = mIndicatorColor 58 | mPaint.style = Paint.Style.FILL 59 | 60 | } 61 | 62 | override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { 63 | super.onSizeChanged(w, h, oldw, oldh) 64 | viewWidth = w 65 | mBgRect.set(0f, 0f, w * 1f, h * 1f) 66 | mRadius = h / 2f 67 | } 68 | 69 | /** 70 | * 设置指示器背景进度条的颜色 71 | * @param color 背景色 72 | */ 73 | fun setBgColor(@ColorInt color: Int) { 74 | mBgPaint.color = color 75 | invalidate() 76 | } 77 | 78 | /** 79 | * 设置指示器的颜色 80 | * @param color 指示器颜色 81 | */ 82 | fun setIndicatorColor(@ColorInt color: Int) { 83 | mPaint.color = color 84 | invalidate() 85 | } 86 | 87 | /** 88 | * 绑定recyclerView 89 | */ 90 | fun bindRecyclerView(recyclerView: RecyclerView) { 91 | recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() { 92 | override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) { 93 | super.onScrolled(recyclerView, dx, dy) 94 | val offsetX = recyclerView.computeHorizontalScrollOffset() 95 | val range = recyclerView.computeHorizontalScrollRange() 96 | val extend = recyclerView.computeHorizontalScrollExtent() 97 | val progress: Float = offsetX * 1.0f / (range - extend) 98 | this@HIndicator.progress = progress //设置滚动距离所占比例 99 | } 100 | }) 101 | 102 | recyclerView.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> 103 | val range = recyclerView.computeHorizontalScrollRange() 104 | val extend = recyclerView.computeHorizontalScrollExtent() 105 | val ratio = extend * 1f / range 106 | this@HIndicator.ratio = ratio //设置指示器所占的长度比例 107 | } 108 | } 109 | 110 | override fun onDraw(canvas: Canvas?) { 111 | super.onDraw(canvas) 112 | //绘制背景 113 | canvas?.drawRoundRect(mBgRect, mRadius, mRadius, mBgPaint) 114 | 115 | //计算指示器的长度和位置 116 | val leftOffset = viewWidth * (1f - ratio) * progress 117 | val left = mBgRect.left + leftOffset 118 | val right = left + viewWidth * ratio 119 | mRect.set(left, mBgRect.top, right, mBgRect.bottom) 120 | 121 | //绘制指示器 122 | canvas?.drawRoundRect(mRect, mRadius, mRadius, mPaint) 123 | } 124 | 125 | } -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 19 | 22 | 25 | 26 | 27 | 28 | 34 | 35 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 19 | 20 | 26 | 27 | 28 |