ViewPagerIndicator集成分页指示器。事实上就是标题栏和ViewPager的联动效果,大家先看一下效果图直观了解:(图侵删)

这篇文章将会教大家怎么简单高速地制作自己的ViewPagerIndicator,同一时候说明制作思路,让大家能够轻易的扩展和定制自己想要的效果。

因为文章的主要目的在于介绍总体思路,所以实现的界面效果可能不是非常好看,只是大家看过这篇文章以后,一定能够自己改动出好看的效果的。

话不多说。先来说明总体思路。

对照上图。对于整个控件而言,显然以下显示内容的,是一个ViewPager,通过ViewPager我们轻易的得到翻页的效果,那么难点在于上面的标题导航栏,总的来说我们要实现三点:

1,使用ViewPager翻页的时候,导航栏对应的标题会有变化(比如上图的蓝色的下划线,或者背景颜色的变化)。来提示用户,如今是哪个标题下的内容

2,点击导航栏标题,ViewPager会翻到相应页,另外当我们点击某个title时。我们希望整个视图能够移动到以这个title为中心。

3,当导航栏的标题过多,超出屏幕宽度。我们能够滑动导航栏找到后边的其它标题

要实现上面三个效果,我先来说第三个的实现

我使用HorizontalScrollView来实现,HorizontalScrollView能够水平拖动。如果HorizontalScrollView里面包括着一系列的TextView。这个样式不就是我想要的标题栏的效果吗?

因为HorizontalScrollView继承自FrageLayout,所以里面仅仅能包括一个子控件,通常是LinearLayout,然后再让LinearLayout去包括TextView就能够了

另外还要讲HorizontalScrollView的HorizontalScrollBarEnabled设置为false,用于隐藏它原本的水平方向的滚动栏

OK,看起来我们第三个问题攻克了

如今来思考第一个问题,要title尾随ViewPager变化,我们非常自然想到要去监听ViewPager的翻页事件。使用ViewPager.OnPageChangeListener,因为title的数目跟ViewPager中Fragement的数目一样多。翻到那个,我们将对于index的title(也就是Textview)的背景变色就能够了

因为ViewPager.OnPageChangeListener的onPageSelected(int position)中的參数position会为我们提供这个index

OK。第一个问题貌似也没有那么难。

如今来考虑第二个问题。这里涉及两个滑动。

一个是ViewPager的滑动,正如我们上面所说,TextView和ViewPager中Fragement一一相应

为了响应点击,显然我要每一个TextView设置一个OnClickListener

可是TextView怎么知道自己的index呢?TextView本身是没有这个属性的,我们能够继承TextView,然后加入一个index属性不就完了吗?

有了index,我们在onclick方法里面,调用ViewPager的setCurrentItem(item)方法。就能够让ViewPager滑动到正确的位置

上面所说动画效果是ViewPager自带的,可是第二个滑动。就是HorizontalScrollView本身的滑动,HorizontalScrollView我们能够手动滑动,可是怎么样才干让它自己主动滑到我们须要的位置呢?

HorizontalScrollView提供了一个smoothScrollTo(int x, int y)方法。使用这种方法,我们能够将HorizontalScrollView滑动到任何位置。

问题使我们怎么确定这个位置,因为每一个TextView里面的文字数目可能不同,意味着TextView的宽度各不同样,这样要怎么计算位置呢?

我们能够使用getLeft()方法获得目标TextView距离左边的长度,这样就不用管之前的TextView的宽度了,由于getLeft()相当于获得了它们的和,可是移动到getLeft()就超过了,我们希望它移动到中间位置。那么getLeft()还有减去(HorizontalScrollView.getWidth()-TextView.getWidth())/2

至于为什么这样算。大家不明确的话,能够看图:我不再做过多解释

计算出smoothScrollTo()的位置以后,调用这个函数就好了,这样就实现了标题栏和ViewPager的联动效果。

原理解讲到这里,以下我们来直接看代码。

先来看构造函数和相关属性

public class MyIndicator extends HorizontalScrollView implements ViewPager.OnPageChangeListener{
private ViewPager mViewPager;
private MyLinearLayout myLinearLayout;
ViewPager.OnPageChangeListener mListener; public MyIndicator(Context context) {
super(context);
init(context);
} public MyIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
} public MyIndicator(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
} private void init(Context mcontext){
setHorizontalScrollBarEnabled(false);//隐藏自带的滚动栏
//加入linearLayout
myLinearLayout = new MyLinearLayout(mcontext);
myLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
addView(myLinearLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));
}

从上面的代码我们能够看到。我继承HorizontalScrollView来自己定义了一个控件,这个控件就是我们上面说的导航栏。而且隐藏了它的滚动栏

另外我们实现了ViewPager.OnPageChangeListener接口,由于我们要监听ViewPager的滑页行为。从而去改变导航栏的状态

所以我们也能够看到,MyIndicator持有ViewPager的引用

可是有人会问,既然我们为ViewPager设置了监听器为MyIndicator。假设我们还想要监听ViewPager怎么办呢?

所以我们为MyIndicator提供了一个方法

public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener){
mListener = listener;
}

这样就能够为ViewPager设置监听器了,而这个listener的调用,须要我们在MyIndicator实现的ViewPager.OnPageChangeListener接口的方法的最后主动调用

也就是这样写:

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if(mListener!=null) mListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
} @Override
public void onPageSelected(int position) {
setCurrentItem(position);
if(mListener!=null) mListener.onPageSelected(position);
} @Override
public void onPageScrollStateChanged(int state) {
if(mListener!=null) mListener.onPageScrollStateChanged(state);
}

看完了初始化的工作,我们能够看看怎么使用这个MyIndicator

首先在xml布局文件中面,非常easy。直接使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"> <com.example.kaiyicky.myapplication.MyIndicator
android:id="@+id/indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/> </LinearLayout>

然后在Activity里面这样

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); ViewPager pager = (ViewPager)findViewById(R.id.pager); MyIndicator indicator = (MyIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
}

通过一个setViewPager()方法使MyIndicator持有ViewPager的引用就能够了

OK,接下来继续看MyIndicator怎么写。看setViewPager()方法

public void setViewPager(ViewPager viewPager){
setViewPager(viewPager,0);
} public void setViewPager(ViewPager viewPager,int initPos){
if (mViewPager == viewPager) {
return;
}
if (mViewPager != null) {
mViewPager.setOnPageChangeListener(null);
}
final PagerAdapter adapter = viewPager.getAdapter();
if (adapter == null) {
throw new IllegalStateException("ViewPager does not have adapter instance.");
}
mViewPager = viewPager;
viewPager.setOnPageChangeListener(this);
notifyDataSetChanged();
setCurrentItem(initPos);
}

在上面的代码中我们能够看到。我们检查了ViewPager的Adapter是否为空。假设是要抛出异常

说明我们必须在调用setViewPager()之前为ViewPager设置Adapter

为什么呢?由于导航栏的标题数目跟ViewPager的页面数目是一样的,而FragmentPagerAdapter里面的getCount()方法返回了这个数目,假设没有设置Adapter

MyIndicator就不知道怎么绘制导航栏了。由于连标题数目都不清楚

对于Adapter。我们能够写一个简单的,比如

class GoogleMusicAdapter extends FragmentPagerAdapter {
public GoogleMusicAdapter(FragmentManager fm) {
super(fm);
} @Override
public Fragment getItem(int position) {
return TestFragment.newInstance(CONTENT[position % CONTENT.length]);
} @Override
public CharSequence getPageTitle(int position) {
return CONTENT[position % CONTENT.length].toUpperCase();
} @Override
public int getCount() {
return CONTENT.length;
}
}

当中TestFragment是这种

public final class TestFragment extends Fragment {
private static final String KEY_CONTENT = "TestFragment:Content"; public static TestFragment newInstance(String content) {
TestFragment fragment = new TestFragment(); StringBuilder builder = new StringBuilder();
for (int i = 0; i < 20; i++) {
builder.append(content).append(" ");
}
builder.deleteCharAt(builder.length() - 1);
fragment.mContent = builder.toString(); return fragment;
} private String mContent = "? ? ? "; @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
mContent = savedInstanceState.getString(KEY_CONTENT);
}
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
TextView text = new TextView(getActivity());
text.setGravity(Gravity.CENTER);
text.setText(mContent);
text.setTextSize(20 * getResources().getDisplayMetrics().density);
text.setPadding(20, 20, 20, 20); LinearLayout layout = new LinearLayout(getActivity());
layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
layout.setGravity(Gravity.CENTER);
layout.addView(text); return layout;
} @Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putString(KEY_CONTENT, mContent);
}
}

事实上就是一个 创建Fragment的工具类

最后在Activity改动一下

 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); FragmentPagerAdapter adapter = new GoogleMusicAdapter(getSupportFragmentManager()); ViewPager pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(adapter); MyIndicator indicator = (MyIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
}

回过头来看setViewPager()方法。然后就是调用了两个函数,首先是notifyDataSetChanged()

private void notifyDataSetChanged(){
myLinearLayout.removeAllViews();
PagerAdapter mAdapter = mViewPager.getAdapter();
int count = mAdapter.getCount();
for(int i=0;i<count;i++){
addTab(i,mAdapter.getPageTitle(i));
}
requestLayout();
} private void addTab(int index,CharSequence text) {
TabView tabView = new TabView(getContext());
tabView.index = index;
tabView.setFocusable(true);
tabView.setOnClickListener(mTabClickListener);
tabView.setText(text);
tabView.setTextSize(30);
tabView.setPadding(20,0,20,0);
myLinearLayout.addView(tabView);
}

这个函数事实上就是起到加入标题的作用

我们通过Adapter获得了数目,然后逐个调用addTab()将标题栏加入进LinearLayout

有人会问myLinearLayout是什么,眼下在MyIndicator里面事实上就是一个LinearLayout,我独立出来是为了大家以后方便扩展。代码例如以下

public class MyLinearLayout extends LinearLayout {
public MyLinearLayout(Context context) {
super(context);
setWillNotDraw(false);
}
}

然后来看addTab()做了什么,顾名思义,就是加入tab,前面原理分析的时候,我们已经说过tab事实上是TextView。可是要标记index。所以我们要继承TextView自己定义一个控件

private class TabView extends TextView {
public int index;
public TabView(Context context,int index){
this(context);
this.index = index;
}
public TabView(Context context) {
super(context);
}
}

能够看到,事实上仅仅是为textView添加了Index属性

到此为止,还不涉及动画效果,可是大家在模拟器上看,就能够看到标题栏的出现。并且标题的数目。会跟你ViewPager中Fragment数目一样

以下来谈论动画效果的实现

上面我们记得,setViewPager()方法里面,另一个setCurrentItem()方法。另外onPageSelected()里面也有调用这种方法

事实上这种方法就是来实现换页的动态效果的。onPageSelected()里面调用,能够在viewPager滑动的时候换页

public void setCurrentItem(int item) {
if (mViewPager == null) {
throw new IllegalStateException("ViewPager has not been bound.");
}
int mSelectedTabIndex = item;
mViewPager.setCurrentItem(item); final int tabCount = myLinearLayout.getChildCount();
for (int i = 0; i < tabCount; i++) {//遍历标题,改变选中的背景
final View child = myLinearLayout.getChildAt(i);
final boolean isSelected = (i == item);
child.setSelected(isSelected);
if (isSelected) {
child.setBackgroundColor(Color.RED);
animateToTab(item);//动画效果
}else{
child.setBackgroundColor(Color.TRANSPARENT);
}
}
}

事实上这种方法也非常easy。首先实现ViewPager的滑动。仅仅有调用ViewPager的setCurrentItem()方法就好了

接下来遍历每一个标题。使选中的标题背景色变成红色,其它背景色变成蓝色

但是这样还不够。我们还有标题栏自己主动滑动,使标题处于正中间

于是我们又了aniateToTab()方法

例如以下

private Runnable mTabSelector;
private void animateToTab(final int position) {
final View tabView = myLinearLayout.getChildAt(position);/获取目标标题栏对象
if (mTabSelector != null) {
removeCallbacks(mTabSelector);
}
mTabSelector = new Runnable() {
public void run() {
final int scrollPos = tabView.getLeft() - (getWidth() - tabView.getWidth()) / 2;//计算要滑动到的位置
smoothScrollTo(scrollPos, 0);
mTabSelector = null;
}
};
post(mTabSelector);//在主线程运行动画
}

和一開始就说明得原理一样,我们计算出来要smoothScrollTo的终于位置,然后调用这种方法就好了

仅仅有写在runnable里面,是为了保证在主线程调用

OK,到此为止,我们就实现了滑动ViewPager,标题栏也会滑动的效果了,不信大家如今能够測试一下自己的代码

接下来就是点击标题。也会自己主动滑动,为了让TextView能点击,我为每一个TextView都设置了OnClickListener

 private final OnClickListener mTabClickListener = new OnClickListener() {
public void onClick(View view) {
TabView tabView = (TabView)view;
final int oldSelected = mViewPager.getCurrentItem();
final int newSelected = tabView.index;
setCurrentItem(newSelected);
}
};

监听器里面更简单。就是获得目标标题栏的index。然后调用setCurrentItem()就能够了

这样就实现了点击滑动的效果,点击标题栏,Viewpager也会跟着翻页哦


整个控件就说完了。假设大家事先明确了我的思路,看起代码来应该非常流畅

最后贴出MyIndicator的完整代码。大家能够任意改造,实现自己须要的效果啊!

public class MyIndicator extends HorizontalScrollView implements ViewPager.OnPageChangeListener{
private ViewPager mViewPager;
private MyLinearLayout myLinearLayout;
ViewPager.OnPageChangeListener mListener; private final OnClickListener mTabClickListener = new OnClickListener() {
public void onClick(View view) {
TabView tabView = (TabView)view;
final int oldSelected = mViewPager.getCurrentItem();
final int newSelected = tabView.index;
setCurrentItem(newSelected);
}
}; public MyIndicator(Context context) {
super(context);
init(context);
} public MyIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
} public MyIndicator(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
} private void init(Context mcontext){
setHorizontalScrollBarEnabled(false);//隐藏自带的滚动栏
//加入linearLayout
myLinearLayout = new MyLinearLayout(mcontext);
myLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
addView(myLinearLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));
} public void setViewPager(ViewPager viewPager){
setViewPager(viewPager,0);
} public void setViewPager(ViewPager viewPager,int initPos){
if (mViewPager == viewPager) {
return;
}
if (mViewPager != null) {
mViewPager.setOnPageChangeListener(null);
}
final PagerAdapter adapter = viewPager.getAdapter();
if (adapter == null) {
throw new IllegalStateException("ViewPager does not have adapter instance.");
}
mViewPager = viewPager;
viewPager.setOnPageChangeListener(this);
notifyDataSetChanged();
setCurrentItem(initPos);
} private void notifyDataSetChanged(){
myLinearLayout.removeAllViews();
PagerAdapter mAdapter = mViewPager.getAdapter();
int count = mAdapter.getCount();
for(int i=0;i<count;i++){
addTab(i,mAdapter.getPageTitle(i));
}
requestLayout();
} private void addTab(int index,CharSequence text) {
TabView tabView = new TabView(getContext());
tabView.index = index;
tabView.setFocusable(true);
tabView.setOnClickListener(mTabClickListener);
tabView.setText(text);
tabView.setTextSize(30);
tabView.setPadding(20,0,20,0);
myLinearLayout.addView(tabView);
} public void setCurrentItem(int item) {
if (mViewPager == null) {
throw new IllegalStateException("ViewPager has not been bound.");
}
int mSelectedTabIndex = item;
mViewPager.setCurrentItem(item); final int tabCount = myLinearLayout.getChildCount();
for (int i = 0; i < tabCount; i++) {//遍历标题,改变选中的背景
final View child = myLinearLayout.getChildAt(i);
final boolean isSelected = (i == item);
child.setSelected(isSelected);
if (isSelected) {
child.setBackgroundColor(Color.RED);
animateToTab(item);//动画效果
}else{
child.setBackgroundColor(Color.TRANSPARENT);
}
}
} private Runnable mTabSelector;
private void animateToTab(final int position) {
final View tabView = myLinearLayout.getChildAt(position);
if (mTabSelector != null) {
removeCallbacks(mTabSelector);
}
mTabSelector = new Runnable() {
public void run() {
final int scrollPos = tabView.getLeft() - (getWidth() - tabView.getWidth()) / 2;
smoothScrollTo(scrollPos, 0);
mTabSelector = null;
}
};
post(mTabSelector);
} public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener){
mListener = listener;
} @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if(mListener!=null) mListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
} @Override
public void onPageSelected(int position) {
setCurrentItem(position);
if(mListener!=null) mListener.onPageSelected(position);
} @Override
public void onPageScrollStateChanged(int state) {
if(mListener!=null) mListener.onPageScrollStateChanged(state);
} private class TabView extends TextView {
public int index;
public TabView(Context context,int index){
this(context);
this.index = index;
}
public TabView(Context context) {
super(context);
}
}
}

教你轻松自己定义ViewPagerIndicator的更多相关文章

  1. 一步步教你轻松学奇异值分解SVD降维算法

    一步步教你轻松学奇异值分解SVD降维算法 (白宁超 2018年10月24日09:04:56 ) 摘要:奇异值分解(singular value decomposition)是线性代数中一种重要的矩阵分 ...

  2. 一步步教你轻松学支持向量机SVM算法之案例篇2

    一步步教你轻松学支持向量机SVM算法之案例篇2 (白宁超 2018年10月22日10:09:07) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...

  3. 一步步教你轻松学关联规则Apriori算法

    一步步教你轻松学关联规则Apriori算法 (白宁超 2018年10月22日09:51:05) 摘要:先验算法(Apriori Algorithm)是关联规则学习的经典算法之一,常常应用在商业等诸多领 ...

  4. 一步步教你轻松学支持向量机SVM算法之理论篇1

    一步步教你轻松学支持向量机SVM算法之理论篇1 (白宁超 2018年10月22日10:03:35) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...

  5. 一步步教你轻松学主成分分析PCA降维算法

    一步步教你轻松学主成分分析PCA降维算法 (白宁超 2018年10月22日10:14:18) 摘要:主成分分析(英语:Principal components analysis,PCA)是一种分析.简 ...

  6. 一步步教你轻松学K-means聚类算法

    一步步教你轻松学K-means聚类算法(白宁超  2018年9月13日09:10:33) 导读:k-均值算法(英文:k-means clustering),属于比较常用的算法之一,文本首先介绍聚类的理 ...

  7. 一步步教你轻松学朴素贝叶斯模型算法Sklearn深度篇3

    一步步教你轻松学朴素贝叶斯深度篇3(白宁超   2018年9月4日14:18:14) 导读:朴素贝叶斯模型是机器学习常用的模型算法之一,其在文本分类方面简单易行,且取得不错的分类效果.所以很受欢迎,对 ...

  8. 一步步教你轻松学KNN模型算法

    一步步教你轻松学KNN模型算法( 白宁超 2018年7月24日08:52:16 ) 导读:机器学习算法中KNN属于比较简单的典型算法,既可以做聚类又可以做分类使用.本文通过一个模拟的实际案例进行讲解. ...

  9. 教你轻松快速学会用Calibre TXT转MOBI

    教你轻松快速学会TXT转为有目录的MOBI###授人以渔,lllll5500制作### 需使用软件按先后顺序如下:一.排版助手 官网http://www.gidot.net/typesetter/二. ...

随机推荐

  1. 数据库 之 E-R实体关系模型

    E-R图也称实体-联系图(Entity Relationship Diagram),提供了表示实体类型.属性和联系的方法,用来描述现实世界的概念模型. 1.表示方法 E-R是描述现实世界概念结构模型的 ...

  2. Java开发中所遇问题积累

    1.判断两个字符串是否相等时,如下,使用" == "无效: String name = "Jack"; if(name.equals("Jack&qu ...

  3. java web下串口通讯

       最近在做java串口通讯,主要是用个人电脑通过串口从RS485读取数据,并通过crc循环冗余校验,把接收正确的数据解析,插入数据库mysql,并用SSH技术把数据库数据以表格以及图表形式显示   ...

  4. 【Qt】splitter

    一段简单的切割窗体的程序: <span style="font-size:18px;">#include "mainwindow.h" #inclu ...

  5. 算法笔记_190:历届试题 幸运数(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 幸运数是波兰数学家乌拉姆命名的.它采用与生成素数类似的“筛法”生成 . 首先从1开始写出自然数1,2,3,4,5,6,.... 1 就是第 ...

  6. mysqld: unrecognized service

    为了快速搭建了测试环境yum安装了MySQL. 执行 [root@localhost bin]#mysql ERROR 2002 (HY000): Can't connect to local MyS ...

  7. OpenERP 在context中写自己的部门ID

    使用OpenERP自定义模块开发的时候,你会发现,有一个uid(当前登录用户id)特别好用,不管是在xml的domain 条件表达式中,还是在类中,都能很方便的使用uid.有一段时间就一直在琢磨,这个 ...

  8. MariaDB删除重复记录性能测试

    删除重复记录,只保留id最大的一条记录的性能测试 环境 测试表的id为是唯一的,或是自增的主键. mysql不能直接写循环,只能写在存储过程里. 存储过程usp_batch_insert的参数num_ ...

  9. java String字符串

      五.java数据类型之String(字符串) CreateTime--2017年7月21日16:17:45 Author:Marydon (一)数据格式 (二)初始化 // 方式一 String ...

  10. 成为JavaGC专家(3)—如何监控Java垃圾回收机制(转载)

    原文:http://www.importnew.com/3146.html 为什么需要优化GC 或者说的更确切一些,对于基于Java的服务,是否有必要优化GC?应该说,对于所有的基于Java的服务,并 ...