Android自定义ViewPagerIndicator实现炫酷导航栏指示器（ViewPager+Fragment）
程序员文章站
2023-12-15 17:52:28
viewpagerindicator导航栏指示器运行效果：
实现这个效果，我是看了很多大神写的博客和视频后自己敲的，欢迎指正
github地址：https://...
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下载地址：炫酷导航栏指示器
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。