（原来可以这么简单）实现变色TextView及ViewPager指示器(二)

最新推荐文章于 2022-07-21 14:34:20 发布
最新推荐文章于 2022-07-21 14:34:20 发布
阅读量969 收藏
点赞数
分类专栏： Android初级 Android初级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vv_bug/article/details/52186875
版权

上篇实现了FadeTextView可变色的textView,今天结合ViewPager做一个指示器，运行效果可以见上篇博客：实现变色TextView及ViewPager指示器（原来可以这么简单）

思路：
1、自定义一个叫SimpleViewPagerIndicator继承ViewGroup。
2、根据传入的titles创建FadeView,水平摆放置布局中，布局最底下用画笔绘制一条线，
3、监听ViewPager的滑动，setOnPageChangeListener，根据onPageScrolled方法计算线条绘制的位置以及FadeTextView的颜色变换

测试layout文件：

 <com.cisetech.customer.customer.Animation.SimpleViewPagerIndicator
        android:id="@id/id_stickylayout_nav"
        android:layout_width="match_parent"
        android:layout_height="50dp">
    </com.cisetech.customer.customer.Animation.SimpleViewPagerIndicator>
    <android.support.v4.view.ViewPager
        android:id="@id/id_stickylayout_viewpager"
        android:layout_width="match_parent"
        android:background="#44ff0000"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

第一步：还是继承一个ViewGroup,覆盖三个构造方法，（有种东西叫熟能生巧，所以，骚年加油！！）

/**
     * 定义当点击每个FadeTextView的回调接口
     */
    public interface OnIndicatorClickListener{
        void indicatorClick(View view,int position);
    }
    private OnIndicatorClickListener onIndicatorClickListener;

    public void setOnIndicatorClickListener(OnIndicatorClickListener onIndicatorClickListener) {
        this.onIndicatorClickListener = onIndicatorClickListener;
    }

    /**
     * titles
     */
    private String[]titles;
    private Paint mPaint;
    /**
     * 线条的宽度=控件的宽度/子控件的个数
     */
    private float mLineWidth;
    /**
     * 距离底部的Padding值，可忽略
     */
    private int mLinePading= (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,1,getResources().getDisplayMetrics());
    /**
     * 底部线条绘制的开始位置
     */
    private float mLineStartX;

    public SimpleViewPagerIndicator(Context context) {
        this(context, null);
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mLinePading, getResources().getDisplayMetrics()));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.RED);
        setOrientation(LinearLayout.HORIZONTAL);
    }
    }

第二步：设置titles,并获取线条的宽度=控件宽度/子控件个数

/**
     * 当控件的size发生变化的时候会调用此方法
     * 一般在这获取控件的宽高
     * 我们在这获取线条的宽度
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mLineWidth=w/titles.length;
    }
     /**
     * 设置titles
     */
    public void setTitles(String[] titles) {
        this.titles = titles;
        setupTitles();
    }

    /**
     *添加titles到父控件中，
     * 并给每个子控设置点击监听
     */
    private void setupTitles() {
        if (getChildCount() > 0)
            this.removeAllViews();
        setWeightSum(titles.length);
        for (int i = 0; i < titles.length; i++) {
            final int j=i;
            final FadeView textView=new FadeView(getContext());
            LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(0,LayoutParams.MATCH_PARENT);
            lp.weight=1;
            textView.setLayoutParams(lp);
            textView.setmText(titles[i]);
            textView.setOnClickListener(new View.OnClickListener(){
                @Override
                public void onClick(View v) {
                    if(onIndicatorClickListener!=null){
                        onIndicatorClickListener.indicatorClick(v, j);
                    }
                }
            });
            addView(textView);
        }
    }

第三步：也是重点一步，绘制line

/**
     * 重写dispatchDraw方法绘制底部线条
     */
    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.save();
        /**
         * 通过平移canvas移动线条位置
         * mLineStartX
         */
        canvas.translate(mLineStartX,getHeight()-mLinePading);
        canvas.drawLine(0, 0, mLineWidth, 0, mPaint);
        canvas.restore();
    }

第四步：暴露方法供外部调用，从而不断切换item

/**
     * 通过监听ViewParger传进来当前ViewPager位置，
     * 以及偏移量（0-1）
     * 当从第0页切换到第一页的时候 position（int 0-1）offset(float 0-1)
     */
    public void setOffset(final int position, final float positionOffset) {
        /**
         * 线条开始的位置=线条的宽度*position+mLineWidth*positionOffset
         * 数学一样跟我不是很好的同学可以打个log看看值就懂了
         */
        float startX = mLineWidth * (position + positionOffset);
        setmLineStartX(startX);
        /**
         * 为什么是小于0.1呢，mPager.setCurrentItem(position,true);
         * 比如当前ViewPager位置是3，然后切换到0，跨了一个item，
         * 有点小bug，所以测试了一下当《0.1的，状态都重新切换一次就不会有bug了
         * 如果是mPager.setCurrentItem(position,false);不用动画切换的是不会有bug的
         */
        if (positionOffset < 0.1) {
            for (int k = 0; k < getChildCount(); k++) {
                FadeView fade = (FadeView) getChildAt(k);
                if (position == k) {
                    fade.setmProgress(1.0f);
                } else {
                    fade.setmProgress(0f);
                }
            }
        } else {
            FadeView left = (FadeView) getChildAt(position);
            FadeView right = (FadeView) getChildAt(position + 1);
            if (left != null) {
                left.setmDirection(FadeView.DIRECTION.RIGHT);
                left.setmProgress(1 - positionOffset);
            }
            if (right != null) {
                right.setmDirection(FadeView.DIRECTION.LEFT);
                right.setmProgress(positionOffset);
            }
        }
    }

第五步：测试成果

 private SimpleViewPagerIndicator mIndicator;
    private ViewPager mPager;
    private List<Fragment> mViews=new ArrayList<Fragment>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test4);
        mIndicator= (SimpleViewPagerIndicator) findViewById(R.id.id_stickylayout_nav);
        mPager= (ViewPager) findViewById(R.id.id_stickylayout_viewpager);
        initData();
    }
    private String titles[]={"简介","评价","相关"};
    private void initData() {
        mIndicator.setTitles(titles);
        for (int i = 0; i < 3; i++) {
            TabFragment frag=TabFragment.newInstance(titles[i]);
            Bundle bundle=new Bundle();
            bundle.putString(TabFragment.TITLE,titles[i]);
            frag.setArguments(bundle);
            mViews.add(frag);
        }
        mPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mViews.get(position);
            }

            @Override
            public int getCount() {
                return mViews.size();
            }
        });
        mPager.setOnPageChangeListener(this);
        mIndicator.setOnIndicatorClickListener(this);
    }

    @Override
    public void onPageScrolled(final int position, final float positionOffset, int positionOffsetPixels) {
        mIndicator.setOffset(position, positionOffset);
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    @Override
    public void indicatorClick(View view, final int position) {
        mPager.setCurrentItem(position,false);
    }

是不是so easy啊！！只要坚持，并不断的总结，我相信你会成为大神的，哈哈~！！

最后附上SimpleViewPagerIndicator的源码:

package com.cisetech.customer.customer.Animation;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Looper;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;

import com.cisetech.customer.customer.View.FadeView;

/**
 * Author:Yqy
 * Date:2016-08-05
 * Desc:
 * Company:cisetech
 */
public class SimpleViewPagerIndicator extends LinearLayout {
    /**
     * 定义当点击每个FadeTextView的回调接口
     */
    public interface OnIndicatorClickListener{
        void indicatorClick(View view,int position);
    }
    private OnIndicatorClickListener onIndicatorClickListener;

    public void setOnIndicatorClickListener(OnIndicatorClickListener onIndicatorClickListener) {
        this.onIndicatorClickListener = onIndicatorClickListener;
    }

    /**
     * titles
     */
    private String[]titles;
    private Paint mPaint;
    /**
     * 线条的宽度=控件的宽度/子控件的个数
     */
    private float mLineWidth;
    /**
     * 距离底部的Padding值，可忽略
     */
    private int mLinePading= (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,1,getResources().getDisplayMetrics());
    /**
     * 底部线条绘制的开始位置
     */
    private float mLineStartX;

    public SimpleViewPagerIndicator(Context context) {
        this(context, null);
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mLinePading, getResources().getDisplayMetrics()));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.RED);
        setOrientation(LinearLayout.HORIZONTAL);
    }

    public String[] getTitles() {
        return titles;
    }

    /**
     * 设置titles
     */
    public void setTitles(String[] titles) {
        this.titles = titles;
        setupTitles();
    }

    public float getmLineStartX() {
        return mLineStartX;
    }

    public void setmLineStartX(float mLineStartX) {
        this.mLineStartX = mLineStartX;
        if(Looper.getMainLooper()==Looper.myLooper()){
            invalidate();
        }else{
            postInvalidate();
        }
    }

    /**
     *添加titles到父控件中，
     * 并给每个子控设置点击监听
     */
    private void setupTitles() {
        if (getChildCount() > 0)
            this.removeAllViews();
        setWeightSum(titles.length);
        for (int i = 0; i < titles.length; i++) {
            final int j=i;
            final FadeView textView=new FadeView(getContext());
            LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(0,LayoutParams.MATCH_PARENT);
            lp.weight=1;
            textView.setLayoutParams(lp);
            textView.setmText(titles[i]);
            textView.setOnClickListener(new View.OnClickListener(){
                @Override
                public void onClick(View v) {
                    if(onIndicatorClickListener!=null){
                        onIndicatorClickListener.indicatorClick(v, j);
                    }
                }
            });
            addView(textView);
        }
    }

    /**
     * 当控件的size发生变化的时候会调用此方法
     * 一般在这获取控件的宽高
     * 我们在这获取线条的宽度
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mLineWidth=w/titles.length;
    }

    /**
     * 重写dispatchDraw方法绘制底部线条
     */
    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.save();
        /**
         * 通过平移canvas移动线条位置
         * mLineStartX
         */
        canvas.translate(mLineStartX,getHeight()-mLinePading);
        canvas.drawLine(0, 0, mLineWidth, 0, mPaint);
        canvas.restore();
    }

    /**
     * 通过监听ViewParger传进来当前ViewPager位置，
     * 以及偏移量（0-1）
     * 当从第0页切换到第一页的时候 position（int 0-1）offset(float 0-1)
     */
    public void setOffset(final int position, final float positionOffset) {
        /**
         * 线条开始的位置=线条的宽度*position+mLineWidth*positionOffset
         * 数学一样跟我不是很好的同学可以打个log看看值就懂了
         */
        float startX = mLineWidth * (position + positionOffset);
        setmLineStartX(startX);
        /**
         * 为什么是小于0.1呢，mPager.setCurrentItem(position,true);
         * 比如当前ViewPager位置是3，然后切换到0，跨了一个item，
         * 有点小bug，所以测试了一下当《0.1的，状态都重新切换一次就不会有bug了
         * 如果是mPager.setCurrentItem(position,false);不用动画切换的是不会有bug的
         */
        if (positionOffset < 0.1) {
            for (int k = 0; k < getChildCount(); k++) {
                FadeView fade = (FadeView) getChildAt(k);
                if (position == k) {
                    fade.setmProgress(1.0f);
                } else {
                    fade.setmProgress(0f);
                }
            }
        } else {
            FadeView left = (FadeView) getChildAt(position);
            FadeView right = (FadeView) getChildAt(position + 1);
            if (left != null) {
                left.setmDirection(FadeView.DIRECTION.RIGHT);
                left.setmProgress(1 - positionOffset);
            }
            if (right != null) {
                right.setmDirection(FadeView.DIRECTION.LEFT);
                right.setmProgress(positionOffset);
            }
        }
    }
}
vv_小虫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android中TextView局部变色功能实现
08-28
给大家详细讲解了一下Android中TextView实现部分文字不同颜色的功能实现过程，有这方面需要的朋友们一起学习下吧。
实现变色TextView及ViewPager指示器（原来可以这么简单）
vv_bug
08-09 1384
又是一天过去了，已经坚持写博客三天了，因为之前在研究自定义view，所以也积累了很多demo了，都是借鉴大神的然后自己敲了很多遍的东西，以前敲完都没什么感觉的，所以还是需要静下心总结一下的，于是我开始写博客了。 废话不多说了，进入我们今天的主题（变色TextView及ViewPager指示器），以前都是用github上面的ViewPagerIndicator，只管用了，感觉很高大上的东西，于是自己
【Android 】TextView 局部文字变色
Mlib
09-07 5713
TextView 对于富文本效果的实现支持不支持呢？比如“局部文字颜色的变动”，“局部字体的变动” 一、需求效果二、解决方案针对这类问题，Android提供了 SpannableStringBuilder，方便我们自定义富文本的实现。 textView = (TextView) findViewById(R.id.textview); SpannableStringBuilder builde
[安卓/Android]解决超出范围的View控件被旁边的View遮住的问题
米歪-miwisay
06-19 2896
这一次是做一个小笔记，emmmm怎么说呢，算是悟到了View绘制这块的机制吧，我也懒得去看。开始吧！ 每只鸡理解成独立的Layout布局，正常情况下，如果存在超出范围的控件时会被旁边的遮盖住，原因是在绘制时是按顺序绘制的，也就是说布局它不知道你的Layout是怎么做的，只知道在添加时第一个在第二个后边，所以会被遮盖。 所以说粉色框的任何布局一定会被蓝色框被遮住。那问题是蓝色框为什...
【android学习】ViewPager中包含TextView，在TextView上拖动不能滑动ViewPager
zkq49099的专栏
05-15 534
问题描述： 利用ViewPager+Fragment左右滑动很灵敏，但是只要手指放在fragment布局中的TextView上面拖动时候，ViewPager就不能拖动，经过后续对比发现，问题点就在TextView中的singleLine和gravity上面。 在做跑马灯效果时候，给TextView设置了 android:singleLine="true"，以及 android:gravity="center" 修改方案： android:singleLine="true"继续保...
自定义炫酷效果ViewPage指示器
qq_42359647的博客
07-21 439
自定义文字颜色渐变，文字缩放指示器
Fragment+TextView+ViewPager实现界面滑动
10-17
Fragment+TextView+ViewPager实现界面滑动简单
Android实现TextView字符串关键字变色的方法
09-01
显示给大家介绍了字符串中关键字变色的实现方法，而后又拓展介绍了在Android中如何实现搜索关键字变色，相信对各位Android开发者们具有一定的参考借鉴价值，感兴趣的朋友们下面来一起看看吧。
动态添加viewpager中的item以及小圆点指示器
04-25
所谓动态添加，就是viewpager中有多个view，然后每个view中又有很多item，每个view相应的会有一个小圆点指示器；view、小圆点是根据实际数据的个数以及每页的item数动态生成的。
viewpager+photoview实现图片查看器
01-05
本文实例为大家分享了Android实现图片查看器的具体...整个demo非常简单，整体就是一个activity，页面布局只有一个viewpager和textview <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android
android文字下的line指示器
07-20
android文字下的line指示器,选择一个类型以后，下边的线跟着移动。 用以表示被选择的条目。
ViewPager实现无限循环（跑马灯）效果
03-01
ViewPager实现无限循环（跑马灯）效果
仿微信底部菜单栏(ViewPager+ImagerView+TextView)
07-18
仿微信底部菜单栏(ViewPager+ImagerView+TextView)
Android自定义View——滑动变色指示器
06-29
博客地址：http://blog.csdn.net/jsonnan/article/details/73849505
Android ViewPager控件
假装你是大灰狼的专栏
10-16 4936
前言 ViewPager可以实现多个界面的左右滑动。 1. ViewPager简单应用 (1) 布局文件 &amp;amp;amp;lt;android.support.v4.view.ViewPager android:id=&amp;amp;quot;@+id/view_pager&amp;amp;quot; android:layout_width=&amp;amp;quot;match_parent&amp;amp;quot;
Android自定义View开篇之（LayoutInflater.inflate()详解）
vv_bug
09-20 8098
学习自定义View一段时间了，从开始的一窍不通到现在终于能写出点东西了，前面也写过几篇关于自定义view的博客，但是感觉这东西吧，一天不敲又忘记了，所以准备写一篇自定义View系列的博客，这也算是我这段时间学习自定义View总结的开篇，接下来还会有一系列的文章，支持我的朋友可以悄悄的点个赞，一起fighting！！！ 既然是总结性的东西我们就要研究透一点，我们从源码看，不啰嗦了，开车了……首先获取
Android Fragment（生命周期+懒加载）
vv_bug
09-21 4685
以前面试的时候吧，能把Fragment的生命周期从头到尾背一遍，然后懒加载也是知道怎么实现，但是呢，没有写过demo具体研究过，于是就准备写篇博客就当笔记了。 先附上一张面试时候常考的一张Fragment生命周期图: 测试的布局activity_main.xml:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi
Android自定义View之(下拉刷新+侧滑删除)
vv_bug
08-22 2295
以前项目中用到了一个放qq的侧滑删除的效果，结果github上一搜就copy了一个，不得不说大神们写的真心牛逼，那个时候呢看到一个东西能用就可以了，也不管怎么实现的，现在反过来一看，原来自定义还可以这么玩，当然，前面项目中也因此出现了一个bug，就是我使用的是PulltorefreshScrollView，因此也出现了ScrollView跟ListView的事件冲突，呵呵，不怕笑话，当是体验不好，直
Android自定义view之（CSDN应用splash界面的倒计时View）
vv_bug
08-08 1537
最近有点闲，准确来说是很闲，每天早上要在公车上度过一段时间，一般我就会打开csdn应用看看别人的博客，哎哟~！ 看到CSDN欢迎页的倒计时view还不错哦，正好最近在学自定义View,所以就捣腾了一下，以前感觉遥不可及的东西真正做起来也不难哈，菜鸟一个，大牛勿喷^~^！！ 先看一下效果图： 思路： 1、肯定是自定义个View了，偷懒下一个，为了不自己定义progress就直接继承Prog
使用ViewPager实现：在ViewPager中设置多个TextView，通过设置ViewPager的滑动动画和自动切换来实现文字轮播效果。以上功能具体如何实现
最新发布
05-31
使用ViewPager实现多个TextView的文字轮播，可以按照以下步骤进行： 1. 准备多个TextView，可以通过代码或布局文件创建。 2. 创建一个适配器（Adapter），将多个TextView作为每个页面的视图。 3. 在适配器中，重写...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值