效果图
代码示例
MainActivity.java
package com.example.viewpagerindicator;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import com.example.viewpagerindicator.view.ViewPagerIndicator;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private ViewPagerIndicator vpi_indicator;
private List<String> mTitles = Arrays.asList("短信", "收藏", "推荐");
private List<VpSimpleFragment> mContent = new ArrayList<>();
private FragmentPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initData();
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 总的偏移量 = tabWidth(一个控件的宽度) * positionOffset + position * tabWidth
vpi_indicator.scroll(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initData() {
for (String title : mTitles) {
VpSimpleFragment fragment = VpSimpleFragment.newInstance(title);
mContent.add(fragment);
}
adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mContent.get(position);
}
@Override
public int getCount() {
return mContent.size();
}
};
}
private void initViews() {
viewPager = findViewById(R.id.viewPager);
vpi_indicator = findViewById(R.id.vpi_indicator);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#fff"
tools:context="com.example.viewpagerindicator.MainActivity">
<com.example.viewpagerindicator.view.ViewPagerIndicator
android:id="@+id/vpi_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#000"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="@string/message"
android:textColor="#CCFFFFFF"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_collect"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="@string/collect"
android:textColor="#CCFFFFFF"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_recommend"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="@string/recommend"
android:textColor="#CCFFFFFF"
android:textSize="16sp" />
</com.example.viewpagerindicator.view.ViewPagerIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
VpSimpleFragment.java
package com.example.viewpagerindicator;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class VpSimpleFragment extends Fragment {
private String mTitle;
public static final String BUNDLE_TITLE = "title";
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
Bundle bundle = getArguments();
if (bundle!=null){
mTitle = bundle.getString("BUNDLE_TITLE");
}
TextView tv_content = new TextView(getActivity());
tv_content.setGravity(Gravity.CENTER);
tv_content.setText(mTitle);
return tv_content;
}
public static VpSimpleFragment newInstance(String title) {
Bundle bundle = new Bundle();
bundle.putString("BUNDLE_TITLE", title);
VpSimpleFragment fragment = new VpSimpleFragment();
fragment.setArguments(bundle);
return fragment;
}
}
ViewPagerIndicator,java
package com.example.viewpagerindicator.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.LinearLayout;
public class ViewPagerIndicator extends LinearLayout {
private Paint mPaint;
private Path mPath;
// 三角形的宽
private int triangleWidth;
// 三角形的高
private int triangleHeight;
// 三角形底边长度与标题栏的高度的比例(作用是适应于不同的屏幕)
private static final float RADIO_TRIANGLE_WIDTH = 1 / 6F;
// 三角形初始化的偏移位置
private int initTranslationX;
// 三角形移动时的偏移位置
private int translationX;
public ViewPagerIndicator(Context context) {
// 把super改成this,默认调用下面的2个参数的构造方法
this(context, null);
}
public ViewPagerIndicator(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
// 初始化画笔
initPaint();
}
private void initPaint() {
mPaint = new Paint();
// 设置画笔抗锯齿
mPaint.setAntiAlias(true);
// 设置画笔的颜色
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.FILL);
// 设置三角形三个角连接处的弧度(不至于太尖)
mPaint.setPathEffect(new CornerPathEffect(3));
}
// 设置三角形的大小(控件的宽高发生变化时都会回调这个方法)
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 三角形底边的宽度(3是3个TextView控件)
triangleWidth = (int) (w / 3 * RADIO_TRIANGLE_WIDTH);
triangleHeight = triangleWidth / 2;
// 标题栏的总宽度/3(3个控件)/2 得到每个控件宽度的一半,再减去三角形底边宽度的一半
initTranslationX = w / 3 / 2 - triangleWidth / 2;
// 初始化三角形
initTriangle();
}
private void initTriangle() {
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(triangleWidth, 0);
mPath.lineTo(triangleWidth / 2, -triangleHeight);
mPath.close();
}
// 三角形的绘制
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
// 平移位置
canvas.translate(initTranslationX + translationX, getHeight() + 2);
canvas.drawPath(mPath, mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
/**
* 指示器跟随手指进行滚动
*/
public void scroll(int position, float offset) {
// 获取一个控件的宽度
int tabWidth = getWidth() / 3;
// 得到三角形偏移位置
translationX = (int) (tabWidth * (position + offset));
// 重绘三角形
invalidate();
}
}
3个以上tab上下联动的效果图
代码示例
Mainactivity.java
package com.example.viewpagerindicator;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import com.example.viewpagerindicator.view.ViewPagerIndicator;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private ViewPagerIndicator vpi_indicator;
private List<String> mTitles = Arrays.asList("短信", "收藏", "推荐","短信", "收藏", "推荐","短信", "收藏", "推荐");
private List<VpSimpleFragment> mContent = new ArrayList<>();
private FragmentPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initData();
vpi_indicator.setVisibleTabCounnt(4);
vpi_indicator.setTabItemTitles(mTitles);
viewPager.setAdapter(adapter);
vpi_indicator.setViewPager(viewPager,0);
}
private void initData() {
for (String title : mTitles) {
VpSimpleFragment fragment = VpSimpleFragment.newInstance(title);
mContent.add(fragment);
}
adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mContent.get(position);
}
@Override
public int getCount() {
return mContent.size();
}
};
}
private void initViews() {
viewPager = findViewById(R.id.viewPager);
vpi_indicator = findViewById(R.id.vpi_indicator);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:hyman="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical"
tools:context="com.example.viewpagerindicator.MainActivity">
<com.example.viewpagerindicator.view.ViewPagerIndicator
android:id="@+id/vpi_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#000"
android:orientation="horizontal"
hyman:visible_tab_count="4">
</com.example.viewpagerindicator.view.ViewPagerIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
arrt.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--自定义属性,让用户指定tab的数量-->
<attr name="visible_tab_count" format="integer" />
<declare-styleable name="ViewPagerIndicator">
<attr name="visible_tab_count"/>
</declare-styleable>
</resources>
VpSimpleFragment.java
package com.example.viewpagerindicator;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class VpSimpleFragment extends Fragment {
private String mTitle;
public static final String BUNDLE_TITLE = "title";
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
Bundle bundle = getArguments();
if (bundle!=null){
mTitle = bundle.getString("BUNDLE_TITLE");
}
TextView tv_content = new TextView(getActivity());
tv_content.setGravity(Gravity.CENTER);
tv_content.setText(mTitle);
return tv_content;
}
public static VpSimpleFragment newInstance(String title) {
Bundle bundle = new Bundle();
bundle.putString("BUNDLE_TITLE", title);
VpSimpleFragment fragment = new VpSimpleFragment();
fragment.setArguments(bundle);
return fragment;
}
}
ViewPagerIndicator.java
package com.example.viewpagerindicator.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.example.viewpagerindicator.R;
import java.util.List;
public class ViewPagerIndicator extends LinearLayout {
private Paint mPaint;
private Path mPath;
// 三角形的宽
private int triangleWidth;
// 三角形的高
private int triangleHeight;
// 三角形底边长度与标题栏的高度的比例(作用是适应于不同的屏幕)
private static final float RADIO_TRIANGLE_WIDTH = 1 / 6F;
// 三角形底边的最大宽度
private final int DEMENTION_TRIANGLE_WIDTH_MAX = (int) (getScreenWidth() / 3 * RADIO_TRIANGLE_WIDTH);
// 三角形初始化的偏移位置
private int initTranslationX;
// 三角形移动时的偏移位置
private int translationX;
private int tabVisibleCount;
private static final int COUNT_DEFALUT_TAB = 4;
private List<String> mTitles;
// 字体颜色的常量
private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;
private static final int COLOR_TEXT_HIGHLIGHT = 0xFFFFFFFF;
private ViewPager mViewPager;
public ViewPagerIndicator(Context context) {
// 把super改成this,默认调用下面的2个参数的构造方法
this(context, null);
}
public ViewPagerIndicator(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
// 初始化画笔
initPaint();
// 获取可见tab的数量
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
tabVisibleCount = typedArray.getInt(R.styleable.ViewPagerIndicator_visible_tab_count, COUNT_DEFALUT_TAB);
if (tabVisibleCount < 0) {
tabVisibleCount = COUNT_DEFALUT_TAB;
}
typedArray.recycle();
}
/**
* 当xml加载完成后回调该方法
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
// 获取子元素的个数
int mCount = getChildCount();
if (mCount == 0) return;
for (int i = 0; i < mCount; i++) {
View view = getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
layoutParams.weight = 0;
layoutParams.width = getScreenWidth() / tabVisibleCount;
view.setLayoutParams(layoutParams);
}
setItemClickEvent();
}
/**
* 获取屏幕的宽度
*/
private int getScreenWidth() {
WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(outMetrics);
return outMetrics.widthPixels;
}
private void initPaint() {
mPaint = new Paint();
// 设置画笔抗锯齿
mPaint.setAntiAlias(true);
// 设置画笔的颜色
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.FILL);
// 设置三角形三个角连接处的弧度(不至于太尖)
mPaint.setPathEffect(new CornerPathEffect(3));
}
// 设置三角形的大小(控件的宽高发生变化时都会回调这个方法)
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 三角形底边的宽度(3是3个TextView控件)
triangleWidth = (int) (w / tabVisibleCount * RADIO_TRIANGLE_WIDTH);
triangleHeight = triangleWidth / 2;
triangleWidth = Math.min(triangleWidth,DEMENTION_TRIANGLE_WIDTH_MAX);
// 标题栏的总宽度/3(3个控件)/2 得到每个控件宽度的一半,再减去三角形底边宽度的一半
initTranslationX = w / tabVisibleCount / 2 - triangleWidth / 2;
// 初始化三角形
initTriangle();
}
private void initTriangle() {
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(triangleWidth, 0);
mPath.lineTo(triangleWidth / 2, -triangleHeight);
mPath.close();
}
// 三角形的绘制
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
// 平移位置
canvas.translate(initTranslationX + translationX, getHeight() + 2);
canvas.drawPath(mPath, mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
/**
* 指示器跟随手指进行滚动
*/
public void scroll(int position, float offset) {
// 获取一个控件的宽度
int tabWidth = getWidth() / tabVisibleCount;
// 得到三角形偏移位置
translationX = (int) (tabWidth * (position + offset));
// 满足下面的条件容器移动,在tab处于移动至最后一个时
if (position >= (tabVisibleCount - 2) && offset > 0 && getChildCount() > tabVisibleCount) {
if (tabVisibleCount != 1) {
this.scrollTo((position - (tabVisibleCount - 2)) * tabWidth + (int) (tabWidth * offset), 0);
} else {
this.scrollTo(position * tabWidth + (int) (tabWidth * offset), 0);
}
}
// 重绘三角形
invalidate();
}
public void setTabItemTitles(List<String> titles) {
if (titles != null && titles.size() > 0) {
this.removeAllViews();
mTitles = titles;
for (String title : mTitles) {
addView(generateTextView(title));
}
setItemClickEvent();
}
}
/**
* 动态设置可见tab数量的方法
*/
public void setVisibleTabCounnt(int count) {
tabVisibleCount = count;
}
/**
* 根据title动态创建tab
*/
private View generateTextView(String title) {
TextView tv = new TextView(getContext());
LinearLayout.LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
layoutParams.width = getScreenWidth() / tabVisibleCount;
tv.setText(title);
tv.setGravity(Gravity.CENTER);
// 设置字体的大小(单位sp,值)
tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
tv.setTextColor(COLOR_TEXT_NORMAL);
tv.setLayoutParams(layoutParams);
return tv;
}
public interface PagerOnChangeListener {
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
public void onPageSelected(int position);
public void onPageScrollStateChanged(int state);
}
private PagerOnChangeListener mListener;
public void setOnPagerChangeListener(PagerOnChangeListener listener) {
this.mListener = listener;
}
/**
* 设置关联的ViewPager
*/
public void setViewPager(ViewPager viewPager, final int pos) {
mViewPager = viewPager;
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 总的偏移量 = tabWidth(一个控件的宽度) * positionOffset + position * tabWidth
scroll(position, positionOffset);
if (mListener != null) {
mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
}
@Override
public void onPageSelected(int position) {
if (mListener != null) {
mListener.onPageSelected(position);
}
highLightTextView(position);
}
@Override
public void onPageScrollStateChanged(int state) {
if (mListener != null) {
mListener.onPageScrollStateChanged(state);
}
}
});
mViewPager.setCurrentItem(pos);
highLightTextView(pos);
}
/**
* 重置tab的文本颜色
*/
private void resetTextViewColor() {
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
if (view instanceof TextView) {
((TextView) view).setTextColor(COLOR_TEXT_NORMAL);
}
}
}
/**
* 高亮选中tab的文本
*/
private void highLightTextView(int pos) {
resetTextViewColor();
View view = getChildAt(pos);
if (view instanceof TextView) {
((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHT);
}
}
/**
* 实现tab的点击事件
*/
private void setItemClickEvent() {
int mCount = getChildCount();
for (int i = 0; i < mCount; i++) {
final int j = i;
View view = getChildAt(i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(j);
}
});
}
}
}