自定义view之实现文字不同颜色

自定义view之实现文字不同颜色

效果图


定义属性

 <declare-styleable name="ColorTrackTextView"><attr name="originColor" format="color"/><attr name="changeColor" format="color"/></declare-styleable>

自定义布局：主要方法是：canvas.clipRect

public class ColorTrackTextView extends TextView {private Paint mOriginPaint;private Paint mChangePaint;//一种文字两种颜色private float currentProgress =0;private Direction mDirection = Direction.LEFT_TO_RIGHT;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);}public void setOriginColor(int originColor) {mOriginPaint.setColor(originColor);}public void setChangeColor(int changeColor) {mChangePaint.setColor(changeColor);}public enum Direction {LEFT_TO_RIGHT,RIGHT_TO_LEFT;}private void initPaint(Context context, AttributeSet attrs) {TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackTextView);int originColor = ta.getColor(R.styleable.ColorTrackTextView_originColor, getTextColors().getDefaultColor());int changeColor = ta.getColor(R.styleable.ColorTrackTextView_changeColor, getTextColors().getDefaultColor());mOriginPaint = getPaintByColor(originColor);mChangePaint = getPaintByColor(changeColor);ta.recycle();}private Paint getPaintByColor(int color) {Paint paint = new Paint();paint.setColor(color);paint.setAntiAlias(true);//防抖动paint.setDither(true);//设置字体大小paint.setTextSize(getTextSize());return paint;}//一个文字两种颜色@Overrideprotected void onDraw(Canvas canvas) {// Draw(canvas);//绘制中间值int middle = (int) (currentProgress * 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);//左边蓝色}}public void setCurrentProgress(float currentProgress) {this.currentProgress = currentProgress;invalidate();}public void setDirection(Direction mDirection) {this.mDirection = mDirection;}/*** 绘制文字*/private void drawText(Canvas canvas, Paint paint, int startX, int endX) {canvas.save();//获取文字String text = getText().toString();//对文字进行裁剪Rect rect = new Rect(startX, 0, endX, getHeight());canvas.clipRect(rect);TextBounds(text, 0, text.length(), rect);//获取宽度int dx = getWidth() / 2 - rect.width() / 2;//获取基线Paint.FontMetrics fontMetrics = FontMetrics();int dy = (int) ((fontMetrics.bottom - p) / 2 - fontMetrics.bottom);int baseLine = dy + getHeight() / 2;canvas.drawText(text, dx, baseLine, paint);store();}
}

主布局:使用的LinearLayout+viewpager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayout
        android:id="@+id/indicator_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingBottom="10dp"android:paddingTop="10dp" /><android.support.v4.view.ViewPager
        android:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" />
</LinearLayout>

Fragment布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextView
        android:id="@+id/text_view1"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="你好" />
</LinearLayout>

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@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_item,container,false);TextView tv = (TextView) view.findViewById(_view1);Bundle bundle = getArguments();tv.String("title"));return view;}
}

主Activity实现文字颜色的变化

private String[] items = {"直播", "推荐", "视频", "图片", "段子", "精华"};private LinearLayout mIndicatorContainer;private List<ColorTrackTextView> mIndicators;private ViewPager mViewPager;private String TAG = "ViewPagerActivity";@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {Create(savedInstanceState);setContentView(R.layout.activity_view_pager);mIndicators = new ArrayList<>();mIndicatorContainer = (LinearLayout) findViewById(R.id.indicator_view);mViewPager = (ViewPager) findViewById(R.id.view_pager);initIndicator();initViewPager();}/*** 初始化ViewPager*/private void initViewPager() {mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic Fragment getItem(int position) {ItemFragment itemFragment = wInstance(items[position]);return itemFragment;}@Overridepublic int getCount() {return items.length;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {super.destroyItem(container, position, object);}});mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {// 获取左边ColorTrackTextView left = (position);// 设置朝向left.setDirection(ColorTrackTextView.Direction.RIGHT_TO_LEFT);// 设置进度  positionOffset 是从 0 一直变化到 1 不信可以看打印left.setCurrentProgress(1 - positionOffset);// 获取右边ColorTrackTextView right = (position + 1);right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);right.setCurrentProgress(positionOffset);}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {}});}/*** 初始化可变色的指示器*/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.setOriginColor(Color.BLUE);colorTrackTextView.setChangeColor(Color.RED);colorTrackTextView.setText(items[i]);colorTrackTextView.setLayoutParams(params);// 把新的加入LinearLayout容器mIndicatorContainer.addView(colorTrackTextView);// 加入集合mIndicators.add(colorTrackTextView);}}