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

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 position 
 */ 
 public void scroll(int position, float offset) { 
 int tabWidth = getWidth() / 3; 
 mTranslationX = (int)(tabWidth * offset + position * 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 position, float positionOffset, int positionOffsetPixels) { 
 //让indicator和ViewPager联动 
 mIndicator.scroll(position, positionOffset); 
 } 
 
 @Override 
 public void onPageSelected(int position) { 
 switch (position) { 
 case 0: 
 setTextAttribute(colorA,colorB,colorB,sizeA,sizeB,sizeB); 
 break; 
 case 1: 
 setTextAttribute(colorB,colorA,colorB,sizeB,sizeA,sizeB); 
 break; 
 case 2: 
 setTextAttribute(colorB,colorB,colorA,sizeB,sizeB,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,colorB,colorB,sizeA,sizeB,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 position, float positionOffset, int positionOffsetPixels) { 
 //让indicator和ViewPager联动 
 mIndicator.scroll(position, positionOffset); 
 } 
 
 @Override 
 public void onPageSelected(int position) { 
 switch (position) { 
 case 0: 
 setTextAttribute(colorA,colorB,colorB,sizeA,sizeB,sizeB); 
 break; 
 case 1: 
 setTextAttribute(colorB,colorA,colorB,sizeB,sizeA,sizeB); 
 break; 
 case 2: 
 setTextAttribute(colorB,colorB,colorA,sizeB,sizeB,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); 
 
 } 
} 

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 position) { 
 return list.get(position); 
 } 
 
 @Override 
 public int getCount() { 
 return list.size(); 
 } 
} 

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

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

# Android  # ViewPagerIndicator  # 导航栏  # Android BottomNavigationView与Fragment重建与重叠问题解  # Android关于BottomNavigationView使用指南  # Android BottomNavigationView底部导航效果  # Android中TabLayout+ViewPager 简单实现app底部Tab导航栏  # Android 利用ViewPager+GridView实现首页导航栏布局分页效果  # Android BottomNavigationView结合ViewPager实现底部导航  # 角形  # 重写  # 偏移量  # 大神  # 自定义  # 方法来  # 我是  # 正中间  # 看了  # 又是  # 下载地址  # 其中一个  # 那条  # 设置为  # 贴出  # 回调  # 有影响  # 前先  # 大家多多  # 为三 

相关文章： 手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  建站10G流量真的够用吗？如何应对访问高峰？  北京建设网站制作公司,北京古代建筑博物馆预约官网？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  如何通过cPanel快速搭建网站？  python的本地网站制作,如何创建本地站点？  如何有效防御Web建站篡改攻击？  百度网页制作网站有哪些,谁能告诉我百度网站是怎么联系？  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  如何快速生成橙子建站落地页链接？  如何快速搭建高效服务器建站系统？  建站主机系统SEO优化与智能配置核心关键词操作指南  建站VPS能否同时实现高效与安全翻墙？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  如何在新浪SAE免费搭建个人博客？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  jQuery 常见小例汇总  如何在阿里云域名上完成建站全流程？  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  如何在万网开始建站？分步指南解析  佛山企业网站制作公司有哪些,沟通100网上服务官网？  小程序网站制作需要准备什么资料,如何制作小程序？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  如何快速搭建高效香港服务器网站？  如何在万网自助建站中设置域名及备案？  攀枝花网站建设,攀枝花营业执照网上怎么年审？  创业网站制作流程,创业网站可靠吗？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  建站之星会员如何解锁更多建站功能？  云南网站制作公司有哪些,云南最好的招聘网站是哪个？  如何撰写建站申请书？关键要点有哪些？  如何快速重置建站主机并恢复默认配置？  建站之星如何快速更换网站模板？  如何通过WDCP绑定主域名及创建子域名站点？  非常酷的网站设计制作软件,酷培ai教育官方网站？  已有域名和空间如何快速搭建网站？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  建站之星代理费用多少？最新价格详情介绍  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  浅析上传头像示例及其注意事项  如何高效完成独享虚拟主机建站？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  SQL查询语句优化的实用方法总结  制作网站外包平台,自动化接单网站有哪些？  Android滚轮选择时间控件使用详解  建站之星如何快速解决建站难题？