欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android應(yīng)用中仿今日頭條App制作ViewPager指示器

 更新時間:2016年04月19日 16:19:51   作者:鴻洋_  
這篇文章主要介紹了Android應(yīng)用中仿今日頭條App制作ViewPager指示器的例子,一般就是導(dǎo)航條在翻頁時的動態(tài)字體變色效果,需要的朋友可以參考下

一、概述
頂部ViewPager指示器的字體變色,該效果圖是這樣的:

2016419161403484.jpg (540×960)

大概是今天頭條的app,神奇的地方就在于,切換ViewPager頁面的時候,頂部指示器改成了字體顏色的變化,個人覺得還是不錯的。
那么核心的地方就是做一個支持字體這樣逐漸染色就可以了,我大概想了32s,掃描了一些可能實現(xiàn)的方案,最終定位了一個靠譜的,下面我就帶大家開始實現(xiàn)的征程。
實現(xiàn)之前貼一下我們的效果圖:
1、簡單使用

2016419161454304.gif (425×620)

效果如上圖了,關(guān)于顏失色的改變我添加了兩個方向,一個是左方向,一個是有方向。
單純的使用,可能覺得沒什么意思,下面看結(jié)合ViewPager使用的一個例子。
2、結(jié)合ViewPager使用

可以看到我們切換頁面的時候,上面的指示器的效果,棒棒噠~~~
當(dāng)然了,學(xué)會了原理,你可以擴(kuò)展,可以做個性的進(jìn)度條,可以將字體變色改為背景色變色,可以把方向改為上下,太多了,自己去摳腳想把。

二、原理
看完效果圖,有木有什么思路~~~花幾分鐘想想,因為原理很簡單~~
我大致想了下,目測繪制半個字估計不行,那么就在繪制范圍上下功夫,你可以全部繪制,但是我控制顯示的范圍,所以上述效果:
其實是繪制了兩遍字體,但是呢,分別控制了繪制的顯示范圍,實現(xiàn)了逐漸變色的效果,那么對于范圍的控制,有什么方便的API么,顯然是有的
canvas有個clipRect的方法~~~ok,原理分析完畢~~

三、實現(xiàn)
說到實現(xiàn),那第一步肯定又是自定義屬性,我們這里的屬性,需要text,textSize,textOriginColor,textChangeColor,progress,大致看一下,應(yīng)該都能看出來作用吧,看不出來沒事,結(jié)合下面的代碼。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的構(gòu)造方法中進(jìn)行獲取這些個渣渣屬性:

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

     
可以看到我同時貼出了成員變量,大家簡單看下就行了,都比較簡單。
獲取了屬性,初始化完成一些成員變量以后,那么應(yīng)該走向我們的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(); 
 } 

關(guān)于測量,也是比較傳統(tǒng)的寫法,根據(jù)傳入的widthMeasureSpec、heightMeasureSpec,利用MeasureSpec分別獲取模式和值,如何是EXACTLY萬事大吉,如果是AT_MOST、UNSPECIFIED那么就進(jìn)行自己測量需要的空間,當(dāng)然了,最好注意如果是AT_MOST不應(yīng)該大于父類傳入的值。
這里提一下,如果偷懶的話,可以選擇繼承TextView,然后測量就不需要寫了,TextView默認(rèn)幫你實現(xiàn)了,還能利用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和方向去計算應(yīng)該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,然后兩個按鈕來控制進(jìn)度。
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(); 
 } 
 
} 

這里拿屬性動畫進(jìn)行的測試,沒有導(dǎo)入3.0以下兼容包,有需要自己導(dǎo)入。
效果圖就是上面張鴻洋那張。

2、結(jié)合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="相關(guān)" 
   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[] { "簡介", "評價", "相關(guān)" }; 
 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; 
 } 
 
} 

效果圖就是上面“結(jié)合ViewPager使用”的那張。

相關(guān)文章

  • Android getActivity()為空的問題解決辦法

    Android getActivity()為空的問題解決辦法

    這篇文章主要介紹了Android getActivity()為空的問題解決辦法的相關(guān)資料,導(dǎo)致apk空指針崩潰問題,很嚴(yán)重的問題,為了解決這問題,上網(wǎng)搜索了很多資料,需要的朋友可以參考下
    2017-07-07
  • Android實現(xiàn)音頻錄音與播放

    Android實現(xiàn)音頻錄音與播放

    這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)音頻錄音與播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • Android開發(fā)中Dialog半透明背景消失

    Android開發(fā)中Dialog半透明背景消失

    這篇文章主要介紹了Android開發(fā)中Dialog半透明背景消失的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-11-11
  • Android實現(xiàn)獲取短信驗證碼并自動填充

    Android實現(xiàn)獲取短信驗證碼并自動填充

    這篇文章主要為大家詳細(xì)介紹了Android如何實現(xiàn)獲取短信驗證碼并自動填充的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下
    2023-04-04
  • Android 退出應(yīng)用程序的實現(xiàn)方法

    Android 退出應(yīng)用程序的實現(xiàn)方法

    這篇文章主要介紹了Android 退出應(yīng)用程序的實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下
    2017-04-04
  • android屏幕圓角實現(xiàn)方法的示例代碼

    android屏幕圓角實現(xiàn)方法的示例代碼

    本篇文章主要介紹了android屏幕圓角實現(xiàn)方法的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • Android Toast自定義顯示時間

    Android Toast自定義顯示時間

    這篇文章主要為大家詳細(xì)介紹了Android Toast自定義顯示時間,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-08-08
  • android通過led實現(xiàn)手電筒功能

    android通過led實現(xiàn)手電筒功能

    這篇文章主要為大家詳細(xì)介紹了android通過led實現(xiàn)手電筒功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Android實現(xiàn)一個簡單的單詞本

    Android實現(xiàn)一個簡單的單詞本

    大家好,本篇文章主要講的是Android實現(xiàn)一個簡單的單詞本,感興趣的同學(xué)趕快來看一看吧,對你有幫助的話記得收藏一下
    2022-01-01
  • Android媒體通知欄多系統(tǒng)適配實例講解

    Android媒體通知欄多系統(tǒng)適配實例講解

    對于Android來說其中一項很方便的操作便是下拉菜單,下拉菜單欄可以快捷打開某項設(shè)置,這篇文章主要給大家介紹了關(guān)于Android通知欄增加快捷開關(guān)的功能實現(xiàn),需要的朋友可以參考下
    2023-04-04

最新評論