自定义View学习之玩转字体变色

如何实现

1.分析想要得到什么效果

首先我们需要需要实现字体颜色的变化，然后再考虑把它用到相应的控件中去。字体颜色的变化要怎么做呢，如果只是简单的把HelloWorld变成红色是很简单的，开始用黑色画笔画，后面用红色画笔画就好了。那么如果是只画一半，比如我原来的字为黑色，我现在想让Hello变成红色，World仍然为黑色，该怎么做呢？这就要用到裁剪了，通过裁剪Hello区域，在第二次画的时候只画这个区域就好了。这个时候我们就能想到如果我们要裁剪的区域首先是H然后是He以此类推，是不是不断变换裁剪区域就好了。
其次我们还要考虑滑动的方向，是自左向右还是自右向左，方向的变化也决定了子的颜色首先是哪边开始改变。
最后就是把自定义的View用到相应的位置。

2.确定自定义属性，编写attrs.xml

首先我们分析下需要哪些自定义属性：
由于我们是继承TextView，像字体大小这种属性都是本身就有的，我们只要改变画笔的颜色就好了。

开始的颜色
改变后的颜色

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="ColorTrackTextView"><attr name="originColor" format="color"/><attr name="changeColor" format="color"/></declare-styleable>
</resources>

3.定义布局

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical">//显示栏<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingTop="10dp"android:paddingBottom="10dp"android:id="@+id/indicator_view"/><androidx.viewpager.widget.ViewPagerandroid:layout_width="match_parent"android:layout_height="0dp"android:id="@+id/view_pager"android:layout_weight="1"/>
</LinearLayout>

4.在自定义View中获取自定义属性

      TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.ColorTrackTextView);int originColor=array.getColor(R.styleable.ColorTrackTextView_originColor,getTextColors().getDefaultColor());int changeColor=array.getColor(R.styleable.ColorTrackTextView_changeColor,getTextColors().getDefaultColor());mOriginPaint=getPaintByColor(originColor);mChangePaint=getPaintByColor(changeColor);array.recycle();

5.onDraw()方法

这里不要重写onMeasure()方法了，因为我们是继承TextView的。

@Overrideprotected void onDraw(Canvas canvas) {//super.onDraw(canvas); 不能用这个啦，不然调用这个就掉入TextView也就是它父亲的手里了//根据进度获得要改变的区域int middle=(int)(mCurrentProgress*getWidth());if(mDirection==Direction.LEFT_TO_RIGHT){//左边是红色右边是黑色drawText(canvas,mChangePaint,0,middle);drawText(canvas,mOriginPaint,middle,getWidth());}else{//右边是红色左边是黑色drawText(canvas,mChangePaint,getWidth()-middle,getWidth());drawText(canvas,mOriginPaint,0,getWidth()-middle);}}//为了降低代码冗余度，封装成方法private void drawText(Canvas canvas, Paint paint, int start, int end) {canvas.save();//canvas.clipRect();  裁剪区域Rect rect=new Rect(start,0,end,getHeight());canvas.clipRect(rect);//始终要自己找到文本框的位置，要自己来画String text=getText().toString();Rect bounds=new Rect();paint.getTextBounds(text,0,text.length(),bounds);//获取字体的位置int x=getWidth()/2-bounds.width()/2;//找基线Paint.FontMetricsInt fontMetrics=paint.getFontMetricsInt();int dy=(fontMetrics.bottom-fontMetrics.top)/2-fontMetrics.bottom;int baseLine=dy+getHeight()/2;canvas.drawText(text,x,baseLine,paint);canvas.restore();}

6.设置进度、颜色、方向

由于这都是开发者的个人爱好，肯定是用这个的人来定义这些，所以我们把它封装成相应方法，使用者通过调用相应的方法来完成自己的喜好选择。

     //设置进度public  void setCurrentProgress(float currentProgress){this.mCurrentProgress=currentProgress;invalidate();}//设置方向public  void setDirection(Direction direction){this.mDirection=direction;}//设置改变的字体颜色public  void setChangeColor(int changeColor){this.mChangePaint.setColor(changeColor);}

如何使用

MainActivity,java：

package com.example.view_study2;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.ViewGroup;
import android.widget.LinearLayout;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {private  String[] items={"直播","推荐","视频","图片","段子","精华"};private LinearLayout mIndicatorContainer;private List<ColorTrackTextView> mIndicators;private ViewPager mViewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mIndicators = new ArrayList<>();mIndicatorContainer = (LinearLayout) findViewById(R.id.indicator_view);mViewPager = (ViewPager) findViewById(R.id.view_pager);initIndicator();initViewPager();}/*** 初始化可变色的指示器*/private void initIndicator() {for(int i=0;i<items.length;i++){//动态添加颜色跟踪的TextViewLinearLayout.LayoutParams params=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);params.weight=1;ColorTrackTextView colorTrackTextView=new ColorTrackTextView(this);// 设置颜色colorTrackTextView.setTextSize(20);colorTrackTextView.setChangeColor(Color.RED);colorTrackTextView.setText(items[i]);colorTrackTextView.setLayoutParams(params);// 把新的加入LinearLayout容器mIndicatorContainer.addView(colorTrackTextView);//加入集合mIndicators.add(colorTrackTextView);}}/*** 初始化viewPager*/private void initViewPager() {mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic Fragment getItem(int position) {return ItemFragment.newInstance(items[position]);}@Overridepublic int getCount() {return items.length;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {}});mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//让mIndicators使用ColorTrackViewLog.v("position->"+position,"positionOffset->"+positionOffset);ColorTrackTextView left=mIndicators.get(position);left.setDirection(ColorTrackTextView.Direction.RIGHT_TO_LEFT);left.setCurrentProgress(1-positionOffset);try{ColorTrackTextView right=mIndicators.get(position+1);right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);right.setCurrentProgress(positionOffset);}catch (Exception e){}}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {}});}
}

Item_Fragment.java:

package com.example.view_study2;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;public class ItemFragment extends Fragment {public static ItemFragment newInstance(String item) {Bundle bundle = new Bundle();ItemFragment fragment = new ItemFragment();bundle.putString("title",item);fragment.setArguments(bundle);return fragment;}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view=inflater.inflate(R.layout.fragment_item,null);TextView tv=(TextView)view.findViewById(R.id.text);Bundle bundle=getArguments();tv.setText(bundle.getString("title"));return view;}
}

每日一道面试题

1.为什么UI更新要放在主线程中而不是子线程？
更新UI 一般会调用setText() setImageView() 调回调到这里面来 ViewRootImpl checkThread()方法
checkThread() 用来检测线程

if (mThread != Thread.currentThread()) {        throw new CalledFromWrongThreadException(              "Only the original thread that created a view hierarchy can touch its views.");}

而这里mThread可以理解为主线程，Thread.currentThread()为当前线程，很明显如果在子线程中他们就不会相等就会抛出异常。