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

ViewPagerIndicator导航栏指示器运行效果：

自定义一个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();

}

在布局文件中使用

xmlns:duanlian="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

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">

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" />

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" />

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" />

android:id="@+id/id_viewpager"

android:layout_width="fill_parent"

android:layout_height="0dp"

android:layout_weight="1" />

根据你需要的导航栏的标题数量来设置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);

}

}

布局文件：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@mipmap/jiangyiyan"

android:scaleType="fitXY" />

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" />

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

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