Android应用中仿今日头条App制作ViewPager指示器
这篇文章主要介绍了Android应用中仿今日头条App制作ViewPager指示器的例子,一般就是导航条在翻页时的动态字体变色效果,需要的朋友可以参考下
一、概述顶部ViewPager指示器的字体变色，该效果图是这样的：
大概是今天头条的app，神奇的地方就在于，切换ViewPager页面的时候，顶部指示器改成了字体颜色的变化，个人觉得还是不错的。那么核心的地方就是做一个支持字体这样逐渐染色就可以了，我大概想了32s，扫描了一些可能实现的方案，最终定位了一个靠谱的，下面我就带大家开始实现的征程。实现之前贴一下我们的效果图：1、简单使用
效果如上图了，关于颜失色的改变我添加了两个方向，一个是左方向，一个是有方向。单纯的使用，可能觉得没什么意思，下面看结合ViewPager使用的一个例子。2、结合ViewPager使用
可以看到我们切换页面的时候，上面的指示器的效果，棒棒哒~~~
当然了，学会了原理，你可以扩展，可以做个性的进度条，可以将字体变色改为背景色变色，可以把方向改为上下，太多了，自己去抠脚想把。
二、原理
看完效果图，有木有什么思路~~~花几分钟想想，因为原理很简单~~
我大致想了下，目测绘制半个字估计不行，那么就在绘制范围上下功夫，你可以全部绘制，但是我控制显示的范围，所以上述效果：
其实是绘制了两遍字体，但是呢，分别控制了绘制的显示范围，实现了逐渐变色的效果，那么对于范围的控制，有什么方便的API么，显然是有的
canvas有个clipRect的方法~~~ok，原理分析完毕~~
三、实现
说到实现，那第一步肯定又是自定义属性，我们这里的属性，需要text,textSize,textOriginColor,textChangeColor,progress，大致看一下，应该都能看出来作用吧，看不出来没事，结合下面的代码。tip:我们的View叫做ColorTrackView，感谢小七的命名。
1、自定义属性和获取
attr.xml
然后在我们的ColorTrackView的构造方法中进行获取这些个渣渣属性：
publicclassColorTrackViewextendsView
{
privateintmTextStartX;
publicenumDirection
{
LEFT,RIGHT;
}
privateintmDirection=DIRECTION_LEFT;
privatestaticfinalintDIRECTION_LEFT=0;
privatestaticfinalintDIRECTION_RIGHT=1;
publicvoidsetDirection(intdirection)
{
mDirection=direction;
}
privateStringmText="张鸿洋";
privatePaintmPaint;
privateintmTextSize=sp2px(30);
privateintmTextOriginColor=0xff000000;
privateintmTextChangeColor=0xffff0000;
privateRectmTextBound=newRect();
privateintmTextWidth;
privateintmRealWidth;
privatefloatmProgress;
publicColorTrackView(Contextcontext)
{
super(context,null);
}
publicColorTrackView(Contextcontext,AttributeSetattrs)
{
super(context,attrs);
mPaint=newPaint(Paint.ANTI_ALIAS_FLAG);
TypedArrayta=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,0);
mDirection=ta.getInt(R.styleable.ColorTrackView_direction,mDirection);
ta.recycle();
mPaint.setTextSize(mTextSize);
measureText();
}
privatevoidmeasureText()
{
mTextWidth=(int)mPaint.measureText(mText);
mPaint.getTextBounds(mText,0,mText.length(),mTextBound);
}
可以看到我同时贴出了成员变量，大家简单看下就行了，都比较简单。
获取了属性，初始化完成一些成员变量以后，那么应该走向我们的measure之旅了~~
2、onMeasure
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec)
{
intwidth=measureWidth(widthMeasureSpec);
intheight=measureHeight(heightMeasureSpec);
setMeasuredDimension(width,height);
mRealWidth=getMeasuredWidth()-getPaddingLeft()-getPaddingRight();
mTextStartX=mRealWidth/2-mTextWidth/2;
}
privateintmeasureHeight(intmeasureSpec)
{
intmode=MeasureSpec.getMode(measureSpec);
intval=MeasureSpec.getSize(measureSpec);
intresult=0;
switch(mode)
{
caseMeasureSpec.EXACTLY:
result=val;
break;
caseMeasureSpec.AT_MOST:
caseMeasureSpec.UNSPECIFIED:
result=mTextBound.height();
break;
}
result=mode==MeasureSpec.AT_MOST?Math.min(result,val):result;
returnresult+getPaddingTop()+getPaddingBottom();
}
privateintmeasureWidth(intmeasureSpec)
{
intmode=MeasureSpec.getMode(measureSpec);
intval=MeasureSpec.getSize(measureSpec);
intresult=0;
switch(mode)
{
caseMeasureSpec.EXACTLY:
result=val;
break;
caseMeasureSpec.AT_MOST:
caseMeasureSpec.UNSPECIFIED:
//result=mTextBound.width();
result=mTextWidth;
break;
}
result=mode==MeasureSpec.AT_MOST?Math.min(result,val):result;
returnresult+getPaddingLeft()+getPaddingRight();
}
关于测量，也是比较传统的写法，根据传入的widthMeasureSpec、heightMeasureSpec，利用MeasureSpec分别获取模式和值，如何是EXACTLY万事大吉，如果是AT_MOST、UNSPECIFIED那么就进行自己测量需要的空间，当然了，最好注意如果是AT_MOST不应该大于父类传入的值。
这里提一下，如果偷懒的话，可以选择继承TextView，然后测量就不需要写了，TextView默认帮你实现了，还能利用TextView的一些属性，不过咱们这个例子比较简单，我最终还是选择了继承View，继承View有种everythingundercontrol的感觉。
测量完成以后，不用说都是绘制了。
3、onDraw
@Override
protectedvoidonDraw(Canvascanvas)
{
super.onDraw(canvas);
intr=(int)(mProgressmTextWidth+mTextStartX);
if(mDirection==DIRECTION_LEFT)
{
drawChangeLeft(canvas,r);
drawOriginLeft(canvas,r);
}else
{
drawOriginRight(canvas,r);
drawChangeRight(canvas,r);
}
}
privatevoiddrawChangeRight(Canvascanvas,intr)
{
drawText(canvas,mTextChangeColor,(int)(mTextStartX+(1-mProgress)mTextWidth),mTextStartX+mTextWidth);
}
privatevoiddrawOriginRight(Canvascanvas,intr)
{
drawText(canvas,mTextOriginColor,mTextStartX,(int)(mTextStartX+(1-mProgress)mTextWidth));
}
privatevoiddrawChangeLeft(Canvascanvas,intr)
{
drawText(canvas,mTextChangeColor,mTextStartX,(int)(mTextStartX+mProgressmTextWidth));
}
privatevoiddrawOriginLeft(Canvascanvas,intr)
{
drawText(canvas,mTextOriginColor,(int)(mTextStartX+mProgressmTextWidth),mTextStartX+mTextWidth);
}
privatevoiddrawText(Canvascanvas,intcolor,intstartX,intendX)
{
mPaint.setColor(color);
canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipRect(startX,0,endX,getMeasuredHeight(www.sm136.com));
canvas.drawText(mText,mTextStartX,getMeasuredHeight()/2
+mTextBound.height()/2,mPaint);
canvas.restore();
}
绘制的核心就在于利用mProgress和方向去计算应该clip的范围，具体的参考代码，没什么难点。有了范围以后，无非就是drawText~~~这里只讲主要代码。
主要的方法介绍完毕，我们就该测试了。
四、测试
1、简单测试
布局文件
xmlns:tools="schemas.android/tools"
xmlns:zhy="schemas.android/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
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"/>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal">
android:id="@+id/id_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startLeftChange"
android:text="StartLeft"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/id_left"
android:onClick="startRightChange"
android:text="StartRight"/>
注意我们的自定义属性的命名空间，该布局就一个ColorTrackView，然后两个按钮来控制进度。
SimpleUseActivity:
packagecom.zhy.viewpagerIndicator;
importandroid.animation.ObjectAnimator;
importandroid.annotation.SuppressLint;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importcom.zhy.view.ColorTrackView;
publicclassSimpleUseActivityextendsActivity
{
ColorTrackViewmView;
@Override
protectedvoidonCreate(BundlesavedInstanceState)
{
super.www.hunanwang.netonCreate(savedInstanceState);
setContentView(R.layout.activity_simple_main);
mView=(ColorTrackView)findViewById(R.id.id_changeTextColorView);
}
@SuppressLint("NewApi")
publicvoidstartLeftChange(Viewview)
{
mView.setDirection(0);
ObjectAnimator.ofFloat(mView,"progress",0,1).setDuration(2000)
.start();
}
@SuppressLint("NewApi")
publicvoidstartRightChange(Viewview)
{
mView.setDirection(1);
ObjectAnimator.ofFloat(mView,"progress",0,1).setDuration(2000)
.start();
}
}
这里拿属性动画进行的测试，没有导入3.0以下兼容包，有需要自己导入。
效果图就是上面张鸿洋那张。
2、结合ViewPager
布局文件：
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">
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
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"/>
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"/>
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"/>
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
3个ColorTrackView代表Tab,下面是ViewPager
ViewPagerUseActivity:
packagecom.zhy.viewpagerIndicator;
importjava.util.ArrayList;
importjava.util.List;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.support.v4.app.FragmentActivity;
importandroid.support.v4.app.FragmentPagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.www.visa158.comOnPageChangeListener;
importandroid.util.Log;
importcom.zhy.view.ColorTrackView;
publicclassViewPagerUseActivityextendsFragmentActivity
{
privateString[]mTitles=newString[]{"简介","评价","相关"};
privateViewPagermViewPager;
privateFragmentPagerAdaptermAdapter;
privateTabFragment[]mFragments=newTabFragment[mTitles.length];
privateListmTabs=newArrayList();
@Override
protectedvoidonCreate(BundlesavedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_vp_main);
initViews();
initDatas();
initEvents();
}
privatevoidinitEvents()
{
mViewPager.setOnPageChangeListener(newOnPageChangeListener()
{
@Override
publicvoidonPageSelected(intposition)
{
}
@Override
publicvoidonPageScrolled(intposition,floatpositionOffset,
intpositionOffsetPixels)
{
if(positionOffset>0)
{
ColorTrackViewleft=mTabs.get(position);
ColorTrackViewright=mTabs.get(position+1);
left.setDirection(1);
right.setDirection(0);
Log.e("TAG",positionOffset+"");
left.setProgress(1-positionOffset);
right.setProgress(positionOffset);
}
}
@Override
publicvoidonPageScrollStateChanged(intstate)
{
}
});
}
privatevoidinitDatas()
{
for(inti=0;i
{
mFragments[i]=(TabFragment)TabFragment.newInstance(mTitles[i]);
}
mAdapter=newFragmentPagerAdapter(getSupportFragmentManager())
{
@Override
publicintgetCount()
{
returnmTitles.length;
}
@Override
publicFragmentgetItem(intposition)
{
returnmFragments[position];
}
};
mViewPager.setAdapter(mAdapter);
mViewPager.setCurrentItem(0);
}
privatevoidinitViews()
{
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));
}
}
TabFragment
packagecom.zhy.viewpagerIndicator;
importjava.util.Random;
importandroid.graphics.Color;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.view.Gravity;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.TextView;
publicclassTabFragmentextendsFragment
{
publicstaticfinalStringTITLE="title";
privateStringmTitle="DefautValue";
@Override
publicvoidonCreate(BundlesavedInstanceState)
{
super.onCreate(savedInstanceState);
if(getArguments()!=null)
{
mTitle=getArguments().getString(TITLE);
}
}
@Override
publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
BundlesavedInstanceState)
{
TextViewtv=newTextView(getActivity());
tv.setTextSize(60);
Randomr=newRandom();
tv.setBackgroundColor(Color.argb(r.nextInt(120),r.nextInt(255),
r.nextInt(255),r.nextInt(255)));
tv.setText(mTitle);
tv.setGravity(Gravity.CENTER);
returntv;
}
publicstaticTabFragmentnewInstance(Stringtitle)
{
TabFragmenttabFragment=newTabFragment();
Bundlebundle=newBundle();
bundle.putString(TITLE,title);
tabFragment.setArguments(bundle);
returntabFragment;
}
}
|
|
