自定义view - 玩转字体变色
2019-02-12 本文已影响0人
世道无情
1. 思路分析
自定义View步骤：
1>：values__attrs.xml，定义自定义属性；
2>：在第三个构造方法中获取自定义属性；
3>：onMeasure【不是必须的】；
4>：onDraw：绘制代码全都在onDraw中写的；
技术分析：
不能继承TextView，因为系统的TextView只能有一种颜色，需要ColorTraceTextView，继承TextView，而不是继承View，原因是：
1>：继承TextView不用自己手动实现onMeasure、onDraw，系统已经实现了；
2>：textColor、textSize方法TextView已经实现了，不用自己实现；
思路分析：
一个文字两种颜色，用两个画笔来画：
1>：左边用红色画笔，右边用黑色画笔；
2>：能从左到右【左黑右红】，也能从右到左【左红右黑】；
3>：最后整合到ViewPager中；
2. 效果如下
图片.png
从左边向右边滑动：黑变红；
从右边向左边滑动：红变黑；
3. 代码如下
1>：attrs
<?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>
2>：ColorTrackTextView
/**
* ================================================
* Email: 2185134304@qq.com
* Created by Novate 2018/12/29 10:31
* Version 1.0
* Params:
* Description: 玩转字体变色
* ================================================
*/
public class ColorTrackTextView extends TextView {
// 绘制不变色的画笔
private Paint mOriginPaint ;
// 绘制变色的画笔
private Paint mChangePaint ;
// 当前进度 文字左边一半是黑色，右边一半是红色
private float mCurrentProgress = 0.0f;
// 不同的朝向
private Direction mDirection = LEFT_TO_RIGHT;
public enum Direction{
LEFT_TO_RIGHT , RIGHT_TO_LEFT
}
public ColorTrackTextView(Context context) {
this(context,null);
}
public ColorTrackTextView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public ColorTrackTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint(context,attrs) ;
}
/**
* 初始化画笔
*/
private void initPaint(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackTextView);
// 此处颜色传递默认值，防止你在布局文件中没有指定颜色
int originColor = typedArray.getColor(R.styleable.ColorTrackTextView_originColor,getTextColors().getDefaultColor());
int changeColor = typedArray.getColor(R.styleable.ColorTrackTextView_changeColor,getTextColors().getDefaultColor());
// 不变色的画笔
mOriginPaint = getPaintByColor(originColor);
// 变色的画笔
mChangePaint = getPaintByColor(changeColor);
}
/**
* 根据颜色获取画笔
*/
private Paint getPaintByColor(int color) {
Paint paint = new Paint() ;
// 给画笔设置颜色
paint.setColor(color);
// 设置抗锯齿
paint.setAntiAlias(true);
// 仿抖动
paint.setDither(true);
// 设置文字大小
paint.setTextSize(getTextSize());
return paint;
}
/**
* 一个文字两种颜色
* 利用 clipRect 的API，裁剪，左边用一个画笔去画，右边用另一个画笔去画，不断地改变中间值
*/
@Override
protected void onDraw(Canvas canvas) {
// 这里必须注释，这个是TextView自身的绘制，因为需要自己去画文字，所以需要注释
// super.onDraw(canvas);
// 获取中间位置
int middle = (int) (mCurrentProgress*getWidth());
if (mDirection == Direction.LEFT_TO_RIGHT){
// 左-右：左边是红色 右边是黑色
// 绘制变色文字 0-middle
drawText(canvas,mChangePaint,0,middle);
// 绘制不变色 middle-getWidth
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();
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 fontMetricsInt = paint.getFontMetricsInt();
int dy = (fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;
int baseLine = getHeight()/2+dy;
canvas.drawText(text,x,baseLine,paint);
// 释放画布
canvas.restore();
}
/**
* 设置朝向
*/
public void setDirection(Direction direction){
this.mDirection = direction;
}
/**
* 设置当前进度
*/
public void setCurrentProgress(float currentProgress){
this.mCurrentProgress = currentProgress;
// 获取到当前进度后，进行重绘
invalidate();
}
/**
* 设置改变的颜色
*/
public void setChangeColor(int color){
this.mChangePaint.setColor(color);
}
/**
* 设置不改变的颜色
*/
public void setOriginColor(int color){
this.mOriginPaint.setColor(color);
}
}
3>：ViewPagerActivity
public class ViewPagerActivity extends AppCompatActivity {
private String[] items = {"直播", "推荐", "视频", "图片", "段子", "精华"};
private LinearLayout mIndicatorContainer;// 变成通用的
private List<ColorTrackTextView> mIndicators;
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_viewpager);
mIndicators = new ArrayList<>() ;
mIndicatorContainer = (LinearLayout) findViewById(R.id.indicator_view);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
//初始化指示器
initIndicator() ;
//初始化ViewPager
initViewPager() ;
}
/**
* 初始化ViewPager
*/
private void initViewPager() {
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return ItemFragment.newInstance(items[position]);
}
@Override
public int getCount() {
return items.length;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
}
});
//ViewPager添加滑动监听器
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//position:代表当前页码位置
//第0个item的position为0 ，第1个item的position为1，第2个item的position为2 等等
//positionOffset:代表滚动的 0-1的百分比
//0.0-0.009259259-0.031481482-0.05462963-0.08055556-等等 -0.0
Log.e("TAG" , "position -> "+position+" positionOffset ->"+positionOffset) ;
//1.左边 位置 position
ColorTrackTextView left = mIndicators.get(position);
left.setDirection(ColorTrackTextView.Direction.RIGHT_TO_LEFT);
left.setCurrentProgress(1-positionOffset);
try {
//2.右边 为防止最后一个精华item角标越界，所以添加try catch
ColorTrackTextView right = mIndicators.get(position + 1);
right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);
right.setCurrentProgress(positionOffset);
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 初始化可变色的指示器
*/
private void initIndicator() {
for (int i = 0; i < items.length; i++) {
// 动态添加颜色跟踪的TextView
LinearLayout.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);
}
}
}
4>：activity_viewpager
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:id="@+id/indicator_view"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/view_pager"
android:layout_weight="1"
/>
</LinearLayout>
5>：ItemFragment
public class ItemFragment extends Fragment {
public static ItemFragment newInstance(String item) {
ItemFragment itemFragment = new ItemFragment();
Bundle bundle = new Bundle();
bundle.putString("title", item);
itemFragment.setArguments(bundle);
return itemFragment;
}
@Nullable
@Override
public View onCreateView(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;
}
}
6>：fragment_item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:text="你好Novate"
android:gravity="center"
android:layout_height="match_parent" />
</LinearLayout>
