Android应用中仿今日头条App制作ViewPager指示器_Android

一、概述
顶部ViewPager指示器的字体变色，该效果图是这样的：

大概是今天头条的app，神奇的地方就在于，切换ViewPager页面的时候，顶部指示器改成了字体颜色的变化，个人觉得还是不错的。
那么核心的地方就是做一个支持字体这样逐渐染色就可以了，我大概想了32s，扫描了一些可能实现的方案，最终定位了一个靠谱的，下面我就带大家开始实现的征程。
实现之前贴一下我们的效果图：
1、简单使用

效果如上图了，关于颜失色的改变我添加了两个方向，一个是左方向，一个是有方向。
单纯的使用，可能觉得没什么意思，下面看结合ViewPager使用的一个例子。
2、结合ViewPager使用

可以看到我们切换页面的时候，上面的指示器的效果，棒棒哒~~~
当然了，学会了原理，你可以扩展，可以做个性的进度条，可以将字体变色改为背景色变色，可以把方向改为上下，太多了，自己去抠脚想把。

二、原理
看完效果图，有木有什么思路~~~花几分钟想想，因为原理很简单~~
我大致想了下，目测绘制半个字估计不行，那么就在绘制范围上下功夫，你可以全部绘制，但是我控制显示的范围，所以上述效果：
其实是绘制了两遍字体，但是呢，分别控制了绘制的显示范围，实现了逐渐变色的效果，那么对于范围的控制，有什么方便的API么，显然是有的
canvas有个clipRect的方法~~~ok，原理分析完毕~~

三、实现
说到实现，那第一步肯定又是自定义属性，我们这里的属性，需要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的构造方法中进行获取这些个渣渣属性：

public class ColorTrackView extends View
{ 

 private int mTextStartX; 

 public enum Direction
 {
  LEFT , RIGHT ;
 } 

 private int mDirection = DIRECTION_LEFT; 

 private static final int DIRECTION_LEFT = 0 ;
 private static final int DIRECTION_RIGHT= 1 ; 

 public void setDirection(int direction)
 {
  mDirection = direction;
 } 

 private String mText = "张鸿洋";
 private Paint mPaint;
 private int mTextSize = sp2px(30); 

 private int mTextOriginColor = 0xff000000;
 private int mTextChangeColor = 0xffff0000; 

 private Rect mTextBound = new Rect();
 private int mTextWidth; 

 private int mRealWidth; 

 private float mProgress; 

 public ColorTrackView(Context context)
 {
  super(context, null);
 } 

 public ColorTrackView(Context context, AttributeSet attrs)
 {
  super(context, attrs); 

  mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 

  TypedArray ta = 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(); 

 } 

private void measureText()
 {
  mTextWidth = (int) mPaint.measureText(mText);
  mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
 }

     
可以看到我同时贴出了成员变量，大家简单看下就行了，都比较简单。
获取了属性，初始化完成一些成员变量以后，那么应该走向我们的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();
 }

关于测量，也是比较传统的写法，根据传入的widthMeasureSpec、heightMeasureSpec，利用MeasureSpec分别获取模式和值，如何是EXACTLY万事大吉，如果是AT_MOST、UNSPECIFIED那么就进行自己测量需要的空间，当然了，最好注意如果是AT_MOST不应该大于父类传入的值。
这里提一下，如果偷懒的话，可以选择继承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();
 }

绘制的核心就在于利用mProgress和方向去计算应该clip的范围，具体的参考代码，没什么难点。有了范围以后，无非就是drawText~~~这里只讲主要代码。

主要的方法介绍完毕，我们就该测试了。

四、测试

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>

注意我们的自定义属性的命名空间，该布局就一个ColorTrackView，然后两个按钮来控制进度。
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();
 } 

}

这里拿属性动画进行的测试，没有导入3.0以下兼容包，有需要自己导入。
效果图就是上面张鸿洋那张。

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>

3个ColorTrackView代表Tab,下面是ViewPager
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));
 } 

}

TabFragment

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;
 } 

}

效果图就是上面“结合ViewPager使用”的那张。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索android
， 安卓
， 导航
， viewpager
指示器
今日头条viewpager、viewpager指示器、viewpager 圆点指示器、viewpager 线型指示器、viewpager指示器移动，以便于您获取更多的相关知识。

时间： 2024-12-30 14:24:07

Android应用中仿今日头条App制作ViewPager指示器_Android的相关文章

Android仿今日头条APP实现下拉导航选择菜单效果_Android

本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程,供大家参考,具体内容如下 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView

Android仿今日头条滑动页面导航效果_Android

最近项目中用到了滑动页面,也就是和目前市场上很火的"今日头条"页面滑动类似,在网上找了一下,大部分都是用ViewPager来实现的,刚开始我用的是ViewPager+ViewGroup,上面的标题按钮用的是HorizontalScrollView,写完之后感觉效果比较生硬,果断换掉,发现了一个效果比较好的第三方,也就是今天的主题:PagerSlidingTabStrip.好了,下面来具体介绍一下PagerSlidingTabStrip,进行一下源码解析. 一.看一下demo的样子吧 二

Android 仿今日头条简单的刷新效果实例代码_Android

点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

Android 仿今日头条简单的刷新效果实例代码

点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

Android 仿今日头条评论时键盘自动弹出的效果(推荐)

Android 仿今日头条评论时键盘自动弹出的效果:当点击评论时,弹出对话框,同时弹出软键盘,当点击返回键时,将对话框关闭,不只是关闭软键盘. 效果图: 对这个对话框设置一个style效果: <style name="inputDialog" parent="@android:style/Theme.Holo.Light.Dialog"> <item name="android:windowBackground">@col

高仿今日头条（转载）

高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一)    上次,已经完成了头部新闻分类栏目的拖动效果. 这篇文章是继续去完善APP 今日头条  这个新闻阅读器的其他功能. 这次所实现的功能清单: 1.通过SlidingMenu实现左右侧拉菜单效果 2.通过重写CompoundButton实现--昼夜模式切换按钮效果. 3.通过PopupWindow控件实现了列表中更多菜单弹框操作效果. 4.通过universal-image-loader库实现了图片的加载和

今日头条APP，北京字节跳动科技已经完成了红杉领投的1亿美元的C轮融资

你看到这篇文章的时候,今日头条APP,也就是北京字节跳动科技有限公司(以下称"字节跳动"),已经完成了红杉领投的1亿美元的C轮融资, 微博 同时参与跟投.张一鸣的"字节跳动"估值高达5亿美元. APP越来越值钱?2014年初,安卓应用搜索(现扩展为"移动内容搜索")APP豌豆荚B轮融资1.2亿美元.再往前, 百度 以近19亿美元收购91无线.还有,接近神话的, Facebook 宣布190亿美元收购Whatsapp. 用户数量决定估值的耀眼度.来

iOS仿今日头条滑动导航

之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的偏移量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanGesture

今日头条App怎么退出登录状态

今日头条怎么退出 1.进入今日头条APP,在下方菜单栏看到"我的"选项后,点击进入"我的"界面. 3.在"我的界面",今日头条提供了非常多的登录方式,手机号.微信.QQ.微博等都可以登录.在这里,笔者仅以QQ登录方式进行演示. 4.QQ登陆今日头条APP后,可以看到在"我的"界面并没有退出登录的选项,而在右上角的"设置"选项界面里也是没有退出登录选项的.这时,可以点击"我的"见面最上方的