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();
}
在布局文件中使用
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
根据你需要的导航栏的标题数量来设置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);
}
}
布局文件：
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>
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 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 list;
public MyFragmentPagerAdapter(FragmentManager fm,List mContents) {
super(fm);
this.list = mContents;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
完成了，欢迎大神指正，虚心受教
demo下载地址：炫酷导航栏指示器
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 