Android自定义控件玩转字体变色,打造炫酷ViewPager指示器
来源:互联网 发布:程序员文史综合题目 编辑:程序博客网 时间:2024/05/16 04:57
1、概述
本篇博客的产生呢,是因为,群里的哥们暖暖给我发了个效果图,然后问我该如何实现顶部ViewPager指示器的字体变色,该效果图是这样的:
大概是今天头条的app,神奇的地方就在于,切换ViewPager页面的时候,顶部指示器改成了字体颜色的变化,个人觉得还是不错的。
那么核心的地方就是做一个支持字体这样逐渐染色就可以了,我大概想了32s,扫描了一些可能实现的方案,最终定位了一个靠谱的,下面我就带大家开始实现的征程。
实现之前贴一下我们的效果图:
2、效果图
1、简单使用
效果如上图了,关于颜失色的改变我添加了两个方向,一个是左方向,一个是有方向。
单纯的使用,可能觉得没什么意思,下面看结合ViewPager使用的一个例子。
2、结合ViewPager使用
可以看到我们切换页面的时候,上面的指示器的效果,棒棒哒~~~
当然了,学会了原理,你可以扩展,可以做个性的进度条,可以将字体变色改为背景色变色,可以把方向改为上下,太多了,自己去抠脚想把。
3、原理
看完效果图,有木有什么思路~~~花几分钟想想,因为原理很简单~~
我大致想了下,目测绘制半个字估计不行,那么就在绘制范围上下功夫,你可以全部绘制,但是我控制显示的范围,所以上述效果:
其实是绘制了两遍字体,但是呢,分别控制了绘制的显示范围,实现了逐渐变色的效果,那么对于范围的控制,有什么方便的API么,显然是有的
canvas有个clipRect的方法~~~ok,原理分析完毕~~
4、实现
说到实现,那第一步肯定又是自定义属性,我们这里的属性,需要text,textSize,textOriginColor,textChangeColor,progress,大致看一下,应该都能看出来作用吧,看不出来没事,结合下面的代码。tip:我们的View叫做ColorTrackView,感谢小七的命名。
1、自定义属性和获取
attr.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <attr name="text" format="string" />
- <attr name="text_size" format="dimension" />
- <attr name="text_origin_color" format="color|reference" />
- <attr name="text_change_color" format="color|reference" />
- <attr name="progress" format="float" />
- <attr name="direction">
- <enum name="left" value="0" />
- <enum name="right" value="1" />
- </attr>
- <declare-styleable name="ColorTrackView">
- <attr name="text" />
- <attr name="text_size" />
- <attr name="text_origin_color" />
- <attr name="text_change_color" />
- <attr name="progress" />
- <attr name="direction" />
- </declare-styleable>
- </resources>
然后在我们的ColorTrackView的构造方法中进行获取这些个渣渣属性:
可以看到我同时贴出了成员变量,大家简单看下就行了,都比较简单。
获取了属性,初始化完成一些成员变量以后,那么应该走向我们的measure之旅了~~
2、onMeasure
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
- {
- int width = measureWidth(widthMeasureSpec);
- int height = measureHeight(heightMeasureSpec);
- setMeasuredDimension(width, height);
- mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
- mTextStartX = mRealWidth / 2 - mTextWidth / 2;
- }
- private int measureHeight(int measureSpec)
- {
- int mode = MeasureSpec.getMode(measureSpec);
- int val = MeasureSpec.getSize(measureSpec);
- int result = 0;
- switch (mode)
- {
- case MeasureSpec.EXACTLY:
- result = val;
- break;
- case MeasureSpec.AT_MOST:
- case MeasureSpec.UNSPECIFIED:
- result = mTextBound.height();
- break;
- }
- result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
- return result + getPaddingTop() + getPaddingBottom();
- }
- private int measureWidth(int measureSpec)
- {
- int mode = MeasureSpec.getMode(measureSpec);
- int val = MeasureSpec.getSize(measureSpec);
- int result = 0;
- switch (mode)
- {
- case MeasureSpec.EXACTLY:
- result = val;
- break;
- case MeasureSpec.AT_MOST:
- case MeasureSpec.UNSPECIFIED:
- // result = mTextBound.width();
- result = mTextWidth;
- break;
- }
- result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
- return result + getPaddingLeft() + getPaddingRight();
- }
这里提一下,如果偷懒的话,可以选择继承TextView,然后测量就不需要写了,TextView默认帮你实现了,还能利用TextView的一些属性,不过咱们这个例子比较简单,我最终还是选择了继承View,继承View有种everything under control 的感觉。
测量完成以后,不用说都是绘制了。
3、onDraw
- @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();
- }
该View的完整代码:ColorTrackView
主要的方法介绍完毕,我们就该测试了。
5、测试
1、简单测试
布局文件
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- xmlns:zhy="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
- <com.zhy.view.ColorTrackView
- android:id="@+id/id_changeTextColorView"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_centerInParent="true"
- android:background="#44ff0000"
- android:padding="10dp"
- zhy:progress="0"
- zhy:text="张鸿洋"
- zhy:text_change_color="#ffff0000"
- zhy:text_origin_color="#ff000000"
- zhy:text_size="60sp" />
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentBottom="true"
- android:gravity="center"
- android:orientation="horizontal" >
- <Button
- android:id="@+id/id_left"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:onClick="startLeftChange"
- android:text="StartLeft" />
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_toRightOf="@id/id_left"
- android:onClick="startRightChange"
- android:text="StartRight" />
- </LinearLayout>
- </RelativeLayout>
SimpleUseActivity:
- package com.zhy.viewpagerIndicator;
- import android.animation.ObjectAnimator;
- import android.annotation.SuppressLint;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.View;
- import com.zhy.view.ColorTrackView;
- public class SimpleUseActivity extends Activity
- {
- ColorTrackView mView;
- @Override
- protected void onCreate(Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_simple_main);
- mView = (ColorTrackView) findViewById(R.id.id_changeTextColorView);
- }
- @SuppressLint("NewApi")
- public void startLeftChange(View view)
- {
- mView.setDirection(0);
- ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000)
- .start();
- }
- @SuppressLint("NewApi")
- public void startRightChange(View view)
- {
- mView.setDirection(1);
- ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000)
- .start();
- }
- }
效果图,见上效果图1。
2、结合ViewPager
布局文件:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:zhy="http://schemas.android.com/apk/res-auto"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="50dp"
- android:orientation="horizontal" >
- <com.zhy.view.ColorTrackView
- android:id="@+id/id_tab_01"
- android:layout_width="0dp"
- android:layout_height="match_parent"
- android:layout_weight="1"
- zhy:progress="1"
- zhy:text="简介"
- zhy:text_change_color="#ffff0000"
- zhy:text_origin_color="#ff000000"
- zhy:text_size="18sp" />
- <com.zhy.view.ColorTrackView
- android:id="@+id/id_tab_02"
- android:layout_width="0dp"
- android:layout_height="match_parent"
- android:layout_weight="1"
- zhy:text="评价"
- zhy:text_change_color="#ffff0000"
- zhy:text_origin_color="#ff000000"
- zhy:text_size="18sp" />
- <com.zhy.view.ColorTrackView
- android:id="@+id/id_tab_03"
- android:layout_width="0dp"
- android:layout_height="match_parent"
- android:layout_weight="1"
- zhy:text="相关"
- zhy:text_change_color="#ffff0000"
- zhy:text_origin_color="#ff000000"
- zhy:text_size="18sp" />
- </LinearLayout>
- <android.support.v4.view.ViewPager
- android:id="@+id/id_viewpager"
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" >
- </android.support.v4.view.ViewPager>
- </LinearLayout>
ViewPagerUseActivity:
- package com.zhy.viewpagerIndicator;
- import java.util.ArrayList;
- import java.util.List;
- 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;
- import com.zhy.view.ColorTrackView;
- public class ViewPagerUseActivity extends FragmentActivity
- {
- private String[] mTitles = new String[] { "简介", "评价", "相关" };
- private ViewPager mViewPager;
- private FragmentPagerAdapter mAdapter;
- private TabFragment[] mFragments = new TabFragment[mTitles.length];
- private List<ColorTrackView> mTabs = new ArrayList<ColorTrackView>();
- @Override
- protected void onCreate(Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_vp_main);
- initViews();
- initDatas();
- initEvents();
- }
- private void initEvents()
- {
- mViewPager.setOnPageChangeListener(new OnPageChangeListener()
- {
- @Override
- public void onPageSelected(int position)
- {
- }
- @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);
- Log.e("TAG", positionOffset+"");
- left.setProgress( 1-positionOffset);
- right.setProgress(positionOffset);
- }
- }
- @Override
- public void onPageScrollStateChanged(int state)
- {
- }
- });
- }
- 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()
- {
- return mTitles.length;
- }
- @Override
- public Fragment getItem(int position)
- {
- return mFragments[position];
- }
- };
- mViewPager.setAdapter(mAdapter);
- mViewPager.setCurrentItem(0);
- }
- private void initViews()
- {
- mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
- mTabs.add((ColorTrackView) findViewById(R.id.id_tab_01));
- mTabs.add((ColorTrackView) findViewById(R.id.id_tab_02));
- mTabs.add((ColorTrackView) findViewById(R.id.id_tab_03));
- }
- }
- package com.zhy.viewpagerIndicator;
- import java.util.Random;
- import android.graphics.Color;
- import android.os.Bundle;
- 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(Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- if (getArguments() != null)
- {
- mTitle = getArguments().getString(TITLE);
- }
- }
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- 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;
- }
- }
效果图见上效果图2。
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/44098729,本文出自:【张鸿洋的博客】
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器 .
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android自定义控件玩转字体变色,打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
- 打造炫酷通用的ViewPager指示器 - 玩转字体变色
- Android自定义view-玩转字体变色
- Android_字体变色,viewpager指示器
- Android自定义字体变色控件
- 九度OJ-1185
- QWidget,QMainWindow和QDialog的区别
- 三条线 (Standard IO)
- Linux高速抓包内容分析(1)
- Android多点触摸交互处理
- Android自定义控件玩转字体变色,打造炫酷ViewPager指示器
- 嵌入式生涯
- 几大科技公司在VR方面的布局是怎么样的?
- Foj 1635 Commandos【最短路Floyd】
- c中的变量常亮运算符
- hdu 5361 2015多校联赛第六场 In Touch
- SDWebImage的简单使用
- 1. Two Sum(重要!)
- apiDoc的使用