自定义炫酷效果ViewPage指示器

一,前言

        心血来潮想着做一个颜色渐变带缩放的指示器,虽然网上很多大佬开源的指示器开源库,但如果一直都是使用别人造的轮子,那么对于自身的能力是毫无提升作用的,即使是参考别人的,然后自己动手写一遍那对于自身来说也是一种升华

二,思路

        1,其实主要的内容就是自定义一个带颜色渐变的一个TextView,需要定义两个画笔,一个负责绘制未选中颜色,一个负责绘制选中时的颜色,各自绘制各自的区域就能绘制出一个带颜色渐变的TextView

        2,然后外部再包装一层LinearLayout,水平排放每个tab,再监听Viewpage的滑动,根据滑动百分比来改变TextView的选中以及未选中区域的大小三,代码实现

三,难点

        1,绘制渐变色的TextView其实最重要的还是计算基线的位置,基线位置计算出来,那么就能调用drawText()方法去绘制我们的文本了,在这里我也是参考某大佬的思想:基线计算方式

四,代码实现渐变TextView

/**
 * create by lijianhui
 * on 2022-7-21
 * <p>
 * description: 渐变色TextView
 */
@RequiresApi(Build.VERSION_CODES.Q)
class CustomTextView : AppCompatTextView {
    /**
     * 未选中画笔
     */
    private var mUnSelectPaint: Paint? = null

    /**
     * 选中画笔
     */
    private var mSelectPaint: Paint? = null

    /**
     * 滑动进度百分比
     */
    var mScrollProcess = 0f

    /**
     * 是否左边滑动
     */
    var mScrollToLeft = true

    /**
     * 文字缩放比例
     */
    var mTextScale = 0.7f

    /**
     * 选中颜色以及未选中颜色
     */
    private var mSelectColor = Color.parseColor("#8966FF")
    private var mUnSelectColor = Color.parseColor("#DBC0FF")

    constructor(context: Context) : this(context, null)

    constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)

    constructor(context: Context, attributeSet: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attributeSet,
        defStyleAttr
    ) {
        //初始化画笔
        mUnSelectPaint = Paint()
        mUnSelectPaint?.apply {
            color = mUnSelectColor
            textSize = this@CustomTextView.textSize
            isAntiAlias = true
            isDither = true
        }

        mSelectPaint = Paint()
        mSelectPaint?.apply {
            color = mSelectColor
            textSize = this@CustomTextView.textSize
            isAntiAlias = true
            isDither = true
        }
    }

    /**
     * 绘制内容
     */
    override fun onDraw(canvas: Canvas?) {
        val x = width * mScrollProcess

        if (mScrollToLeft) {
            drawText(canvas!!, mUnSelectPaint!!, x, width.toFloat())
            drawText(canvas!!, mSelectPaint!!, 0f, x)
        } else {
            drawText(canvas!!, mUnSelectPaint!!, 0f, width - x)
            drawText(canvas!!, mSelectPaint!!, width - x, width.toFloat())
        }
    }


    /**
     * 绘制文字
     */
    private fun drawText(canvas: Canvas, paint: Paint, startX: Float, endX: Float) {
        paint.textSize = textSize * mTextScale

        //保存画布,剪切画布(设置画布显示区域)
        canvas.save()
        canvas.clipRect(startX, 0f, endX, height.toFloat())

        //获取文字矩形区域
        var bounds = Rect()
        paint.getTextBounds(text, 0, text.length, bounds)

        //获取文字的度量指标
        val fontMetrics = paint.fontMetrics

        //计算基线到中心点位置
        val dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom

        //计算基线
        val baseLine = height / 2 + dy

        //绘制文字
        canvas.drawText(
            text.toString(),
            (width / 2 - bounds.width() / 2).toFloat(),
            baseLine,
            paint
        )
        canvas.restore()
    }

    /**
     * 设置选中 未选中颜色
     */
    fun setColor(selectColor: Int, unSelectColor: Int) {
        mSelectColor = selectColor
        mUnSelectColor = unSelectColor

        mSelectPaint?.color = selectColor
        mUnSelectPaint?.color = unSelectColor
        invalidate()
    }
}

1,在构造方法中初始化两支画笔,分别用于绘制未选中区域和选中区域

2,在onDraw()方法中根据滑动百分计算出绘制区域的宽度

3,判断滑动方向

4,开始绘制文本

        4.1,设置画笔的文字大小(文字大小 * 缩放比例)

        4.2,保存画布,并根据计算出来的绘制区域的开始坐标和结束坐标剪切画布,这是整个绘制核心,一旦剪切等下调用darwText()方法就只会绘制剪切的这部分

        4.3,获取文字矩形区域,通过调用paint.getTextBounds()这个方法就能拿到我们绘制文本的区域

        4.4,获取文字的度量指标,计算出基线的位置

        4.5,调用画布的drawText()去绘制我们的文本

5,效果如下,对算法不理解的需要自行去搜索getTextBounds(),getFontMetrics()这两个方法的作用及其属性变量的作用,到这里,一个渐变色的TextView就出来了,最后容我埋下一个bug

五,代码实现指示器

       

/**
 * create by lijianhui
 * on 2022-7-21
 * <p>
 * description: 自定义颜色渐变 文字缩放指示器
 */
@RequiresApi(Build.VERSION_CODES.Q)
class MyIndicator : LinearLayout, ViewPager.OnPageChangeListener {
    var mTextScale = 0.7f

    constructor(context: Context) : this(context, null)

    constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)

    constructor(context: Context, attributeSet: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attributeSet,
        defStyleAttr
    )

    /**
     * 添加多个tab
     */
    fun addTabs(texts: List<String>) {
        texts.forEach {
            addTab(it)
        }
        
        //选中第一个
        val customTextView = getChildAt(0) as CustomTextView
        customTextView.mScrollToLeft = false
        customTextView.mScrollProcess = 1f
        customTextView.mTextScale = 1f
        customTextView.invalidate()
    }

    /**
     * 添加tab
     */
    fun addTab(text: String) {
        val layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT)
        layoutParams.weight = 1f
        val customTextView = CustomTextView(context)
        customTextView.textSize = 21f
        customTextView.gravity = Gravity.CENTER
        customTextView.text = text
        customTextView.mScrollProcess = 0f
        customTextView.mTextScale = 0.7f
        customTextView.layoutParams = layoutParams
        addView(customTextView)
    }

    /**
     * 关联ViewPage
     */
    fun relationViewPage(viewPage: ViewPager) {
        viewPage.addOnPageChangeListener(this)
    }

    /**
     * 滑动回调
     */
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        if (positionOffset > 0) {
            val tabView = getChildAt(position) as CustomTextView
            tabView.mScrollToLeft = false
            tabView.mScrollProcess = 1 - positionOffset
            tabView.mTextScale = if ((1 - positionOffset) > mTextScale) 1 - positionOffset else mTextScale
            tabView.invalidate()

            val rightTabView = getChildAt(position + 1) as CustomTextView
            rightTabView.mScrollToLeft = true
            rightTabView.mScrollProcess = positionOffset
            rightTabView.mTextScale = if (positionOffset > mTextScale) positionOffset else mTextScale
            rightTabView.invalidate()
        }
    }

    /**
     * 选中某个item回调
     */
    override fun onPageSelected(position: Int) {

    }

    /**
     * 滑动状态改变回调
     */
    override fun onPageScrollStateChanged(state: Int) {

    }
}

1,循环添加多个颜色渐变的CustomTextView,默认选中第一个

2,关联ViewPage,给ViewPage设置一个OnPageChangeListener监听器,监听其滑动距离,根据滑动百分比计算出CustomTextView的滑动比例,CustomTextView的文字缩放比例

3,效果如下,如有不理解的版代码过去自行改改参数就理解其中奥秘了,动起来

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用ViewPager和TabLayout实现滑动效果的步骤: 1.在布局文件中添加ViewPager和TabLayout组件 ```xml <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabMode="scrollable" app:tabTextColor="@android:color/white" app:tabSelectedTextColor="@android:color/white" app:tabIndicatorColor="@android:color/white" app:tabIndicatorHeight="3dp" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2.在Java代码中初始化ViewPager和TabLayout组件 ```java ViewPager viewPager = findViewById(R.id.viewPager); TabLayout tabLayout = findViewById(R.id.tabLayout); MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); ``` 3.实现FragmentPagerAdapter类,用于管理ViewPager中的Fragment ```java public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private String[] titles = {"Tab 1", "Tab 2", "Tab 3"}; public MyFragmentPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); default: return null; } } @Override public int getCount() { return titles.length; } @Nullable @Override public CharSequence getPageTitle(int position) { return titles[position]; } } ``` 4.实现三个Fragment类,用于显示在ViewPager中的内容 ```java public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1_layout, container, false); return view; } } public class Fragment2 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment2_layout, container, false); return view; } } public class Fragment3 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment3_layout, container, false); return view; } } ``` 5.创建三个布局文件fragment1_layout.xml、fragment2_layout.xml、fragment3_layout.xml,用于显示在ViewPager中的内容 ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 1" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 2" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 3" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` 以上就是使用ViewPager和TabLayout实现滑动效果的步骤,希望对你有帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值