欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-18 14:43:22
viewpagerindicator导航栏指示器运行效果: 实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正 github地址:https://...

viewpagerindicator导航栏指示器运行效果:

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

实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正
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下载地址:炫酷导航栏指示器

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

上一篇:

下一篇: