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下载地址：炫酷导航栏指示器

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

时间： 2024-12-31 19:58:10

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

Android自定义渐变式炫酷ListView下拉刷新动画

本文实例为大家分享了自定义渐变式炫酷动画的ListView下拉刷新,供大家参考,具体内容如下 主要要点 listview刷新过程中主要有三个步骤当前:状态为下拉刷新,当前状态为下拉刷新,当前状态为放开刷新,当前状态为正在刷新:主要思路为三个步骤分别对应三个自定义的view:即ibuRefreshFirstStepView,ibuRefreshSecondStepView,ibuRefreshThirdStepView. 效果图 ibuRefreshFirstStepView代码,例如: priv

Android 沉浸式状态栏与隐藏导航栏实例详解

1 前言 一般我们在Android的APP开发中,APP的界面如下: 可以看到,有状态栏.ActionBar(ToolBar).导航栏等,一般来说,APP实现沉浸式有三种需求:沉浸式状态栏,隐藏导航栏,APP全屏 沉浸式状态栏是指状态栏与ActionBar颜色相匹配, 隐藏导航栏不用多说,就是将导航栏隐藏,去掉下面的黑条. APP全屏是指将状态栏与导航栏都隐藏,例如很多游戏界面,都是APP全屏. 所以,在做这一步时,关键要问清楚产品狗的需求,免得白费功夫. 下面,分别来介绍这三种方式的实现. 2

一步步教大家编写酷炫的导航栏js+css实现_jquery

一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>

Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42160391  1.概述 哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过TabPageIndicator,并且很多知名APP都使用过这个开源的指示器.大家有没有想过如何自己去实现这样的一个指示器,并且代码会有多复杂呢~~~今天,我就带领大家来从无到有的实现这样一个指示器,当然了,不准备一模一样,搞得没

去除Android 6.0 界面下的导航栏:NavigationBar

找到: frameworks\base\packages\SystemUI\src\com\android\systemui\statusbar\phone\PhoneStatusBar.java这个文件 找到start方法: 将start方法下这个方法注释重新编译安卓系统即可. addNavigationBar();

Android属性动画实现炫酷的登录界面

我们聊聊我们常写的登录界面,这个界面我相信很多人都写过,而且也没什么难度,但是如果要实现比较不一般的效果,那就要花点心思了,先看看项目的效果吧: 我一直都不知道怎么在编辑框连设置图片大小,所以这个图不怎么样适配编辑框了,大家先凑合着看看. 我先讲讲思路,当我们输入完账号跟密码之后,点击登录,那这个输入框就慢慢的消失,在消失后,紧接着就出现这个进度的界面. 思路有了,那我们就开始编码了: 新建一个项目,然后系统生成了一个MainActivity.java文件和activity_main.xml文件

Android设置透明状态栏和透明导航栏

Android透明状态栏只有在4.4之后有. 在代码中加入下面几行代码即可实现 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

Android自定义View制作动态炫酷按钮实例解析_Android

普通按钮也就那么几种样式,看着都审美疲劳,先放效果图:   你会不会以为这个按钮是集结了很多动画的产物,我告诉你,并没有.所有的实现都是基于自定义View,采用最底层的onDraw一点一点的画出来的.没有采用一丁点的动画.虽然演示时间很短,但是要完成这么多变化,还是挺吃力. 首先讲解用法:  public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceStat

Android底部导航栏实现（二）之RadioGroup

这里简单记录一下Android底部导航栏通过RadioGroup+Fragment的实现. 布局: <?xml version="1.0" encoding="utf-8"?>  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                  android:layout_width="match_p