Android自定义ViewPagerIndicator实现炫酷导航栏指示器（ViewPager+Fragment）

概述ViewPagerIndicator导航栏指示器运行效果：实现这个效果，我是看了很多大神写的博客和视频后自己敲的，欢迎指正

VIEwPagerIndicator导航栏指示器运行效果：

实现这个效果，我是看了很多大神写的博客和视频后自己敲的，欢迎指正
github地址：https://github.com/dl10210950/TabViewPagerIndicator

自定义一个VIEwPagerIndicator

自定义一个Indicator继承linearLayout，在构造方法里面设置画笔的一些属性

public VIEwPagerIndicator(Context context,AttributeSet attrs) {  super(context,attrs);  mPaint = new Paint();//实例化画笔  mPaint.setAntiAlias(true);//设置抗锯齿  mPaint.setcolor(color.parsecolor("#c9b2ab"));//设置画笔的颜色,也就是三角形的颜色  mPaint.setStyle(Paint.Style.FILL);//设置style  mPaint.setPathEffect(new CornerPathEffect(3));//设置三角形圆角   } 

重写onSizeChanged方法来设置指示器三角形的

/**  * 当控件的宽高发生变化时都会回调这个方法  * @param w 控件的长度  * @param h 高度  * @param olDW 以前的长度  * @param oldh 以前的高度  */  @OverrIDe  protected voID onSizeChanged(int w,int h,int olDW,int oldh) {  super.onSizeChanged(w,h,olDW,oldh);   /*  控件的长度（3个tab的总长度）/3就得到每个tab的长度  而三角形的宽度又是每个tab的长度的六分之一  */  mTriangleWIDth = (int) (w / 3 * RAdio_TRIANGLE_WIDTH);  /*  三角形初始的偏移量，也就是三角形初始的位置  w / 3 / 2：每个tab长度的一半就是tab的正中间  再减去三角形宽度的一半，这个偏移量刚好三角形就显示在tab的正中间  */  mInitTranslationX = w / 3 / 2 - mTriangleWIDth / 2;  initTriangle();    }   /**  * 初始化三角形  */  private voID initTriangle() {  mTriangleHeight = mTriangleWIDth / 2;//三角形的高度设置为宽度的一半  //实例化三角形  mPath = new Path();  mPath.moveto(0,0);//三角形的起点  mPath.lineto(mTriangleWIDth,0);//首先绘制一条宽度为三角形宽度的一条直线  //然后绘制三角形右边的那条线x坐标为宽度的一半，y坐标为宽度的一半  mPath.lineto(mTriangleWIDth / 2,-mTriangleHeight);  mPath.close();//完成闭合，绘制了一个完整的三角形  } 

重写dispatchDraw来绘制指示器：

/**  * 绘制  * @param canvas  */  @OverrIDe  protected voID dispatchDraw(Canvas canvas) {  /*  canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。  save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等 *** 作  */  canvas.save();  canvas.translate(mInitTranslationX + mTranslationX,getHeight()+2);//绘制之前先平移到指定的位置  canvas.drawPath(mPath,mPaint);//平移到指定的位置后开始绘制，  /*  restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的 *** 作对后续的绘制有影响。  */  canvas.restore();  super.dispatchDraw(canvas);  } 

重写scroll方法来设置滑动时指示器的偏移量：

/**  * 指示器根据手指滚动而滚动  * @param @R_419_4612@  */  public voID scroll(int @R_419_4612@,float offset) {  int tabWIDth = getWIDth() / 3;  mTranslationX = (int)(tabWIDth * offset + @R_419_4612@ * tabWIDth);//三角形的偏移量  invalIDate();  } 

在布局文件中使用

<?xml version="1.0" enCoding="utf-8"?> <linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  xmlns:duanlian="http://schemas.androID.com/apk/res-auto"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:orIEntation="vertical">   <com.duanlian.tabvIEwpagerindicator.vIEw.VIEwPagerIndicator  androID:ID="@+ID/ID_indicator"  androID:layout_wIDth="match_parent"  androID:layout_height="45dp"  androID:background="#000000"  androID:orIEntation="horizontal"  duanlian:visible_tab_count="4">   <TextVIEw  androID:ID="@+ID/main_yiyan"  androID:layout_wIDth="0dp"  androID:layout_height="match_parent"  androID:layout_weight="1"  androID:gravity="center"  androID:onClick="meiZi"  androID:text="江一燕"  androID:textcolor="#ffffff"  androID:textSize="16sp" />   <TextVIEw  androID:ID="@+ID/main_liya"  androID:layout_wIDth="0dp"  androID:layout_height="match_parent"  androID:layout_weight="1"  androID:gravity="center"  androID:onClick="meiZi"  androID:text="佟丽娅"  androID:textcolor="#ffffff"  androID:textSize="16sp" />   <TextVIEw  androID:ID="@+ID/yuanyuan"  androID:layout_wIDth="0dp"  androID:layout_height="match_parent"  androID:layout_weight="1"  androID:gravity="center"  androID:onClick="meiZi"  androID:text="高圆圆"  androID:textcolor="#ffffff"  androID:textSize="16sp" />  </com.duanlian.tabvIEwpagerindicator.vIEw.VIEwPagerIndicator>   <androID.support.v4.vIEw.VIEwPager  androID:ID="@+ID/ID_vIEwpager"  androID:layout_wIDth="fill_parent"  androID:layout_height="0dp"  androID:layout_weight="1" /> </linearLayout> 

根据你需要的导航栏的标题数量来设置VIEwPagerIndicator中间的TextVIEw的数量

创建Fragment

根据你的需要创建Fragment的数量，我这里创建了3个Framgent，布局文件就一个TextVIEw和一个ImageVIEw。
我贴出其中一个Frament的代码，其他两个基本都是一样的：

package com.duanlian.tabvIEwpagerindicator.fragment;  import androID.os.Bundle; import androID.support.annotation.Nullable; import androID.support.v4.app.Fragment; import androID.vIEw.LayoutInflater; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup;  import com.duanlian.tabvIEwpagerindicator.R;  public class FragmentA extends Fragment {  @OverrIDe  public voID onCreate( Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  }   @Nullable  @OverrIDe  public VIEw onCreateVIEw(LayoutInflater inflater,VIEwGroup container,Bundle savedInstanceState) {  VIEw vIEw = inflater.inflate(R.layout.a_fragment,null);  return vIEw;  }    @OverrIDe  public voID onActivityCreated( Bundle savedInstanceState) {  super.onActivityCreated(savedInstanceState);  } } 

布局文件：

<?xml version="1.0" enCoding="utf-8"?> <FrameLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:orIEntation="vertical">   <ImageVIEw  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:background="@mipmap/jiangyiyan"  androID:scaleType="fitXY" />   <TextVIEw  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:layout_gravity="bottom"  androID:gravity="center_horizontal"  androID:text="FregmentA"  androID:textcolor="#e44316"  androID:textSize="36dp" /> </FrameLayout> 

Activity中的逻辑

滑动VIEwPager让导航栏的标题改变得实现：

//定义两个颜色和大小  private int colorA = color.parsecolor("#ff00ff");//选中的颜色  private int colorB = color.WHITE;//默认的颜色  private float sizeA = 19f;//选中大小  private float sizeB = 16f;//默认大小 

/**  * 设置监听的方法  */  private voID setListener() {  //VIEwPager的监听事件  mVIEwPager.addOnPagechangelistener(new VIEwPager.OnPagechangelistener() {  @OverrIDe  public voID onPageScrolled(int @R_419_4612@,float @R_419_4612@Offset,int @R_419_4612@OffsetPixels) {  //让indicator和VIEwPager联动  mIndicator.scroll(@R_419_4612@,@R_419_4612@Offset);  }   @OverrIDe  public voID onPageSelected(int @R_419_4612@) {  switch (@R_419_4612@) {   case 0:   setTextAttribute(colorA,colorB,sizeA,sizeB,sizeB);   break;   case 1:   setTextAttribute(colorB,colorA,sizeB);   break;   case 2:   setTextAttribute(colorB,sizeA);   break;  }  }  @OverrIDe  public voID onPageScrollStateChanged(int state) {  }  });   }  /**  * 自己定义一个给textVIEw设置属性的方法  */  private voID setTextAttribute(int color1,int color2,int color3,float size1,float size2,float size3){  yiYan.setTextcolor(color1);  liYa.setTextcolor(color2);  yuanYuan.setTextcolor(color3);  yiYan.setTextSize(size1);  liYa.setTextSize(size2);  yuanYuan.setTextSize(size3);   } 

点击导航栏的标题让VIEwPager联动的实现：

/**  * 导航栏点击事件  * @param vIEw  */  public voID meiZi(VIEw vIEw){  switch (vIEw.getID()) {  case R.ID.main_yiyan:  mVIEwPager.setCurrentItem(0);  break;  case R.ID.main_liya:  mVIEwPager.setCurrentItem(1);  break;  case R.ID.yuanyuan:  mVIEwPager.setCurrentItem(2);  break;  }   } 

整个Activity的代码如下：

package com.duanlian.tabvIEwpagerindicator;  import androID.graphics.color; import androID.os.Bundle; import androID.support.v4.app.Fragment; import androID.support.v4.app.FragmentActivity; import androID.support.v4.vIEw.VIEwPager; import androID.vIEw.VIEw; import androID.vIEw.Window; import androID.Widget.TextVIEw;  import com.duanlian.tabvIEwpagerindicator.adapter.MyFragmentPagerAdapter; import com.duanlian.tabvIEwpagerindicator.fragment.FragmentA; import com.duanlian.tabvIEwpagerindicator.fragment.FragmentB; import com.duanlian.tabvIEwpagerindicator.fragment.FragmentC; import com.duanlian.tabvIEwpagerindicator.vIEw.VIEwPagerIndicator;  import java.util.ArrayList; import java.util.List;  public class MainActivity extends FragmentActivity {  private VIEwPager mVIEwPager;  private VIEwPagerIndicator mIndicator;//导航栏指示器  private List<Fragment> mContents;//装载fragment的集合  private MyFragmentPagerAdapter mAdapter;  private TextVIEw yiYan;  private TextVIEw liYa;  private TextVIEw yuanYuan;  //定义两个颜色和大小  private int colorA = color.parsecolor("#ff00ff");//选中的颜色  private int colorB = color.WHITE;//默认的颜色  private float sizeA = 19f;//选中大小  private float sizeB = 16f;//默认大小    @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  requestwindowFeature(Window.FEATURE_NO_Title);  setContentVIEw(R.layout.activity_main);  initVIEws();  setListener();  }   /**  * 初始化vIEw  */  private voID initVIEws() {  mIndicator = (VIEwPagerIndicator) findVIEwByID(R.ID.ID_indicator);  mVIEwPager = (VIEwPager) findVIEwByID(R.ID.ID_vIEwpager);  //3个标题  yiYan = (TextVIEw) findVIEwByID(R.ID.main_yiyan);  liYa = (TextVIEw) findVIEwByID(R.ID.main_liya);  yuanYuan = (TextVIEw) findVIEwByID(R.ID.yuanyuan);  FragmentA fragmentA = new FragmentA();  FragmentB fragmentB = new FragmentB();  FragmentC fragmentC = new FragmentC();  mContents = new ArrayList<>();  mContents.add(fragmentA);  mContents.add(fragmentB);  mContents.add(fragmentC);  mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),mContents);  mVIEwPager.setAdapter(mAdapter);  //设置默认页面和颜色  mVIEwPager.setCurrentItem(0);  setTextAttribute(colorA,sizeB);  }  /**  * 导航栏点击事件  * @param vIEw  */  public voID meiZi(VIEw vIEw){  switch (vIEw.getID()) {  case R.ID.main_yiyan:  mVIEwPager.setCurrentItem(0);  break;  case R.ID.main_liya:  mVIEwPager.setCurrentItem(1);  break;  case R.ID.yuanyuan:  mVIEwPager.setCurrentItem(2);  break;  }   }   /**  * 设置监听的方法  */  private voID setListener() {  //VIEwPager的监听事件  mVIEwPager.addOnPagechangelistener(new VIEwPager.OnPagechangelistener() {  @OverrIDe  public voID onPageScrolled(int @R_419_4612@,float size3){  yiYan.setTextcolor(color1);  liYa.setTextcolor(color2);  yuanYuan.setTextcolor(color3);  yiYan.setTextSize(size1);  liYa.setTextSize(size2);  yuanYuan.setTextSize(size3);   } } 

Adapter的编写

package com.duanlian.tabvIEwpagerindicator.adapter;  import androID.support.v4.app.Fragment; import androID.support.v4.app.FragmentManager; import androID.support.v4.app.FragmentPagerAdapter;  import java.util.List;  public class MyFragmentPagerAdapter extends FragmentPagerAdapter {  private List<Fragment> List;  public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> mContents) {  super(fm);  this.List = mContents;  }   @OverrIDe  public Fragment getItem(int @R_419_4612@) {  return List.get(@R_419_4612@);  }   @OverrIDe  public int getCount() {  return List.size();  } } 

完成了，欢迎大神指正，虚心受教
demo下载地址：炫酷导航栏指示器

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android自定义ViewPagerIndicator实现炫酷导航栏指示器（ViewPager+Fragment）全部内容，希望文章能够帮你解决Android自定义ViewPagerIndicator实现炫酷导航栏指示器（ViewPager+Fragment）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。