文字逐渐变色（自定义View）

最新推荐文章于 2024-04-18 10:06:25 发布
最新推荐文章于 2024-04-18 10:06:25 发布
阅读量461 收藏
点赞数 1
分类专栏： android学习路

效果：
这里写图片描述

最核心的代码是: canvas.clipRect(startX, 0, endX, getMeasuredHeight());
实际上绘画了2种颜色，然后根据progress来剪切，形成这样的效果。

自定义属性和获取
attr.xml

<resources>
   <attr name="text" format="string"></attr>
   <attr name="text_size" format="dimension"></attr>
   <attr name="text_origin_color" format="color|reference"></attr>
   <attr name="text_change_color" format="color|reference"></attr>
   <attr name="progress" format="float"></attr>
   <attr name="direction">
       <enum name="left" value="0"></enum>
       <enum name="right" value="1"></enum>
   </attr>

   <declare-styleable name="ColorTrackView">
       <attr name="text"></attr>
       <attr name="text_size"></attr>
       <attr name="text_origin_color"></attr>
       <attr name="text_change_color"></attr>
       <attr name="progress"></attr>
       <attr name="direction"></attr>
   </declare-styleable>
</resources>

自定义View : ColorTrackView.java

package com.example.day0203;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

public class ColorTrackView extends View{

    private int mTextStartX = 0; 
    private Paint mPaint = new Paint();
    private String mText;
    private int mTextSize =  30;
    private int mTextOriginColor = 0xff000000;
    private int mTextChangeColor = 0xffff0000;
    private Rect mTextBound = new Rect();
    private int mTextWidth = 0;
    public float mProgress = 0;

    public enum Direction  
    {  
        LEFT , RIGHT ;  
    }  

    private int mDirection = DIRECTION_LEFT;   

    private static final int  DIRECTION_LEFT = 0 ;   
    private static final int  DIRECTION_RIGHT= 1 ; 

    public ColorTrackView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackView);
        mText = ta.getString(R.styleable.ColorTrackView_text);
        mTextSize = ta.getDimensionPixelSize(R.styleable.ColorTrackView_text_size, mTextSize);
        mTextOriginColor = ta.getColor(R.styleable.ColorTrackView_text_origin_color, mTextOriginColor);
        mTextChangeColor = ta.getColor(R.styleable.ColorTrackView_text_change_color, mTextChangeColor);
        mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, mProgress);
        mDirection = ta.getInt(R.styleable.ColorTrackView_direction, mDirection);
        ta.recycle();


        mPaint.setTextSize(mTextSize);
        mPaint.setAntiAlias(true);
        measureText();

        }

    private void measureText()  
    {  
        mTextWidth = (int) mPaint.measureText(mText);  
        mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);  
    }  


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int r = (int) (mProgress * mTextWidth +mTextStartX );  //没用到, 本意是拿来封装的
        if(mDirection == DIRECTION_LEFT)  
        {  
            drawChangeLeft(canvas, r);  
            drawOriginLeft(canvas, r);  
        }else  
        {  
            drawOriginRight(canvas, r);  
            drawChangeRight(canvas, r);  
        }  
    }


    private void drawChangeRight(Canvas canvas, int r)  
    {  
        drawText(canvas, mTextChangeColor, (int) (mTextStartX +(1-mProgress)*mTextWidth), mTextStartX+mTextWidth );  
    }  
    private void drawOriginRight(Canvas canvas, int r)  
    {  
        drawText(canvas, mTextOriginColor, mTextStartX, (int) (mTextStartX +(1-mProgress)*mTextWidth) );  
    }  

    private void drawChangeLeft(Canvas canvas, int r)  
    {  
        drawText(canvas, mTextChangeColor, mTextStartX, (int) (mTextStartX + mProgress * mTextWidth) );  
    }  

    private void drawOriginLeft(Canvas canvas, int r)  
    {  
        drawText(canvas, mTextOriginColor, (int) (mTextStartX + mProgress * mTextWidth), mTextStartX +mTextWidth );  
    }  

    private void drawText(Canvas canvas , int color , int startX , int endX)  
    {  
        mPaint.setColor(color);  
        canvas.save(Canvas.CLIP_SAVE_FLAG);  
        canvas.clipRect(startX, 0, endX, getMeasuredHeight());  
        canvas.drawText(mText, mTextStartX, getMeasuredHeight() / 2  
                + mTextBound.height() / 2, mPaint);  
        canvas.restore();  


    }

    public int getDirection() {
        return mDirection;
    }

    public void setDirection(int mDirection) {
        this.mDirection = mDirection;
    } 

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      int  width = measureWidth(widthMeasureSpec);//得到View的宽
      int height = measureHight(heightMeasureSpec);//得到View的高
        setMeasuredDimension(width,height);

    }

    public float getMProgress() {
        return mProgress;
    }

    public void setMProgress(float mProgress) {
        this.mProgress = mProgress;
        invalidate();

    }

    private int measureWidth(int widthMeasureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    private int measureHight(int heightMeasureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(heightMeasureSpec);
        int specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

}

xml使用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.day0203.MainActivity"
     xmlns:app="http://schemas.android.com/apk/res-auto"  xmlns:app1="http://schemas.android.com/apk/res/com.example.day0203">

    <com.example.day0203.ColorTrackView
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv"
        android:layout_marginBottom="40dp" 
        app1:text="BOB_海贼王"  

         />
    <LinearLayout 
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv">

        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bt_left"
            android:text="left"/>


        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bt_right"
            android:text="right"/>

    </LinearLayout>

</RelativeLayout>

MainActivity.java

...
final ColorTrackView mView = (ColorTrackView) findViewById(R.id.tv);

        Button bt1 = (Button) findViewById(R.id.bt_left);
        bt1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                mView.setDirection(0);  
                ObjectAnimator.ofFloat(mView, "mProgress", 0, 1).setDuration(2000).start();  


            }
        });

        Button bt2 = (Button) findViewById(R.id.bt_right);
        bt2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                mView.setDirection(1);  
                ObjectAnimator.ofFloat(mView, "mProgress", 0, 1).setDuration(2000).start();  


            }
        });
        ...

注意事项：
1.canvas.drawText(text,x,y,paint); //这里x,y的点是Text的左下角的位置（T）

2.ObjectAnimator.ofFloat(mView, “mProgress”, 0, 1).setDuration(2000).start(); //Obeject mView 必须包含mProgress的get，set方法，并且方法的名字要是getMProgress(),和setMProgress(),即参数的的第一个字母得大写！（之前写成setmProgress（）无效）。并且若是ofFloat，mProgress必须是float类型

和ViewPager搭配使用（今日头条效果）

效果:
这里写图片描述

xml

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.example.day0203">

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <com.example.day0203.ColorTrackView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/ctv_tab_1"
            app:text="首页"/>
           <com.example.day0203.ColorTrackView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/ctv_tab_2"
            app:text="内容"/>
              <com.example.day0203.ColorTrackView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/ctv_tab_3"
            app:text="设置"/>
    </LinearLayout>

    <android.support.v4.view.ViewPager 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/vp"
        ></android.support.v4.view.ViewPager>
</LinearLayout>

MainActivity

package com.example.day0203;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;

public class MainActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private List<ColorTrackView> mTabs = new ArrayList<ColorTrackView>();  
    private String[] mTitles = new String[] { "简介", "评价", "相关" };  
    private TabFragment[] mFragments = new TabFragment[mTitles.length];  
    private FragmentPagerAdapter mAdapter;  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initDatas();
        initEvents();

    }

    private void initEvents() {
    mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

        @Override
        public void onPageSelected(int arg0) {
            // TODO Auto-generated method stub

        }

        @Override  
        public void onPageScrolled(int position, float positionOffset,  
                int positionOffsetPixels)  
        {  
            if (positionOffset > 0)    
            {    
                ColorTrackView left = mTabs.get(position);    
                ColorTrackView right = mTabs.get(position + 1);    

                left.setDirection(1);  
                right.setDirection(0);  
                left.setMProgress( 1-positionOffset);    
                right.setMProgress(positionOffset);    
            }    
        }  


        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

        }
    });

    }

    private void initDatas() {
        for (int i = 0; i < mTitles.length; i++)  
        {  
            mFragments[i] = (TabFragment) TabFragment.newInstance(mTitles[i]);  
        }  
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return mFragments.length;
            }

            @Override
            public Fragment getItem(int arg0) {
                // TODO Auto-generated method stub
                return mFragments[arg0];
            }
        };

        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);

    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.vp);  

        mTabs.add((ColorTrackView) findViewById(R.id.ctv_tab_1));  
        mTabs.add((ColorTrackView) findViewById(R.id.ctv_tab_2));  
        mTabs.add((ColorTrackView) findViewById(R.id.ctv_tab_3));

    }

}

TabFragment

package com.example.day0203;

import java.util.Random;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TabFragment extends Fragment{

     public static final String TITLE = "title";  
     private String mTitle = "Defaut Value";  


     @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mTitle = getArguments().getString(TITLE);
        }
    }

    @Override
    @Nullable
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
         TextView tv = new TextView(getActivity());  
            tv.setTextSize(60);  
            Random r = new Random();  
            tv.setBackgroundColor(Color.argb(r.nextInt(120), r.nextInt(255),  
                    r.nextInt(255), r.nextInt(255)));  
            tv.setText(mTitle);  
            tv.setGravity(Gravity.CENTER);  
            return tv;  
    }

    public static TabFragment newInstance(String title)  
    {  
        TabFragment tabFragment = new TabFragment();  
        Bundle bundle = new Bundle();  
        bundle.putString(TITLE, title);  
        tabFragment.setArguments(bundle);  
        return tabFragment;  
    }  

}

转载于：http://blog.csdn.net/lmj623565791/article/details/44098729

u010542146
关注
专栏目录
Android自定义View详解（实现、工作流程、使用场景和优化）
大模型大数据攻城狮的专栏
10-08 861
在Android开发中，组合控件是一种常见且实用的自定义View实现方式。通过组合多个现有控件，开发者可以快速地构建出具有特定功能和外观的新控件，从而满足不同的UI需求。这种方法的优势在于其高效性和灵活性，能够充分利用Android提供的丰富控件资源，减少不必要的重复开发工作。在实际应用中，组合控件的实现通常涉及以下几个关键步骤。首先，开发者需要明确自定义View的具体需求和功能定位，这有助于确定所需组合的控件类型及其布局方式。
ColorTextView（随视频帧变化颜色的TextView）
findMore_fun的博客
08-01 844
实现动态提交视频帧并作为字体背景
ColorTrackView
Juey
03-11 1029
ColorTrackView
Android-ColorTrackView
weixin_34405925的博客
09-23 191
2019独角兽企业重金招聘Python工程师标准>>> ...
探索创新视界：ColorTrackView —— 一款动态颜色追踪视图库
最新发布
gitblog_00006的博客
04-18 435
探索创新视界：ColorTrackView —— 一款动态颜色追踪视图库 ColorTrackView字体或者图片可以逐渐染色和逐渐褪色的动画效果项目地址:https://gitcode.com/gh_mirrors/co/ColorTrackView 项目简介 是一个由开发者 hongyangAndroid 创建的开源 Android 库。这个项目提供了一个独特的视图组件，能够实时追踪并高亮显...
Android 自定义View-图片文字变色,实现酷炫LoadingView或者进度条
07-22
这个自定义的控件是一个盖世英雄， 它不仅仅是一个Loading控件，同时还支持进度条 （ProgressBar）功能 。 它会在你需要的时候出现， 它支持 left，top，right，bottom 四个方向加载（变色），最重要的是，它可以是 文字，也可以是 图片，能够满足开发者一切需求。 博客地址http://blog.csdn.net/u014702653/article/details/51999179
自定义viewpager指示变色文字
03-19
总的来说，实现“自定义viewpager指示变色文字”涉及到的知识点有：Android组件（ViewPager）、自定义View、颜色动画、监听事件处理（PageChangeListener）以及Android支持库的使用。通过这个实践，开发者不仅可以...
Android-Android自定义View-仿淘宝淘抢购进度条
08-12
在Android应用开发中，自定义View是提升用户体验和实现独特设计的重要手段。本教程将深入讲解如何基于Android平台实现一个仿淘宝淘抢购进度条的效果。这个进度条不仅具有动态展示进度的功能，还可能包含一些特定的...
Android实现歌词渐变色和进度的效果
01-20
Shader是Android图形库中用于定义颜色和纹理的关键组件，它可以让我们自定义视图的绘制方式，比如创建出各种复杂的颜色渐变效果。在本例中，我们主要关注的是LinearGradient，它是Shader的一个子类，专门用于实现...
android图片文字混排，文字不同变色
06-13
创建一个自定义的TextView，重写onDraw()方法，或者在布局文件中使用`<merge>`标签组合多个View，如TextView和ImageView，以实现更复杂的图文混排。在Java代码中，使用StringBuilder或SpannableStringBuilder构建要...
XCColorTrackTextView:Android自定义字体颜色渐变TextView
05-07
XCColorTrackTextView 自定义字体颜色渐变View，使用起来和普通TextView一样方便 效果图如下：
android 自定义延时逐字显示文本内容
01-11
一个自定view，可实现textview延时逐字显示内容 一个自定view，可实现textview延时逐字显示内容
利用Android中的TextView实现逐字显示动画
09-01
在安卓程序启动的时候，想逐字显示一段话，每个字都有一个从透明到不透明的渐变动画。那如何显示这个效果，下面一起来看看。
android 自定义view仿今日头条加载文字变色的效果
zhouguizhi
05-25 1483
不分析了,很简单,直接贴代码:package com.loading; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import a...
高仿今日头条字体渐变指示器，滑动+点击切换，如丝顺滑
洪伟的专栏
04-26 3249
今日头条的指示器很炫酷，随着你的滑动字体颜色可以逐渐的变化，实现方法主要是使用自定义控件结合ViewPager。
Android设置TextView的渐变颜色、方向和动画效果
William的博客
07-11 4009
GradientTextView Github点我 一个非常好用的库，使用kotlin实现，用于设置TexView的字体 渐变颜色、渐变方向 和 动画效果 添加依赖 implementation 'com.williamyang:gradienttext:1.0.1' 效果预览： 一、控件样式 <declare-styleable name="GradientTextView"> <attr name="gradient_startColor" format="referen
TextView指定位置颜色变化
瑞的博客
10-12 525
//texview显示文本 String str = “[用户评价]#自拍完美 #造型满分 #像素满分 >”; SpannableString spannableString = new SpannableString(str); // Spanned.SPAN_INCLUSIVE_EXCLUSIVE 从起始下标到终了下标，包括起始下标
Android自定义View：渐变色仪表盘实现详解
"这篇教程详细介绍了如何在Android中创建一个自定义的渐变色仪表盘View，涵盖了四个关键知识点：圆弧渐变色、圆弧上刻度的绘制、指针指示器以及数据文本的弧度显示。作者通过实例演示了如何使用Canvas和Paint对象来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值