手机
当前位置:查字典教程网 >编程开发 >安卓软件开发 >Android自定义ViewPager指示器
Android自定义ViewPager指示器
摘要:本文实例为大家分享了AndroidViewPager指示器的制作方法,供大家参考,具体内容如下1.概述ViewPageIndicator这个...

本文实例为大家分享了Android ViewPager指示器的制作方法,供大家参考,具体内容如下

1.概述

ViewPageIndicator这个开源框架大家都接触过,个人感觉还不错就是用起来比较麻烦,需要这里配置那里配置效果定制起来也不方便。我第一次使用的时候就一直出不来效果,后来找了很久发现是activity的主题没有配置好。今天我们自己来造个轮子实现一把,其中用到了Adapter模式,如果不清楚这个模式的请看我的Android源码设计模式分析:http://www.jb51.net/article/96291.htm,下面看一下效果:

Android自定义ViewPager指示器1

2.实现

1).实现基本效果自定义HorizontalScrollView extends HorizontalScrollView,设置ViewPager根据个数不断遍历添加子View。

public class ViewPagerIndicator extends HorizontalScrollView{ public ViewPagerIndicator(Context context) { this(context, null); } public ViewPagerIndicator(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ViewPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.mContext = context; } @Override public void setViewPager(ViewPager viewPager) { if (viewPager == null) { throw new NullPointerException("viewPager is null..."); } this.mViewPager = viewPager; int count = mViewPager.getAdapter().getCount(); mContanierGroup.removeAllViews(); // 循环添加tabView(TextView) for (int i = 0; i < count; i++) { final TextView itemTv = new TextView(mContext); itemTv.setText(this.mViewPager.getAdapter().getPageTitle(i)); setItemClickEvent(itemTv, i); mContanierGroup.addTabView(itemTv); setItemClickEvent(itemTv, i); mContanierGroup.addTabView(itemTv); } setItemParams(); mAdapter.highLightTabView(mContanierGroup.getTabView(mCureentItem)); this.mViewPager.setOnPageChangeListener(this); } private void setItemParams() { if (mVisibleTabCount != 0) { final int childCount = mViewPager.getAdapter().getCount(); mRunnable = new Runnable() { @Override public void run() { int tabWidth = getWidth() / mVisibleTabCount; // 循环遍历设置Tab宽度 for (int index = 0; index < childCount; index++) { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContanierGroup .getTabView(index).getLayoutParams(); params.width = tabWidth; } // 设置宽度,高度,和角标指示器 mContanierGroup.setTabWidth(tabWidth); mContanierGroup.getContainer().getLayoutParams().height = getHeight(); mContanierGroup.setIndicatorView(mAdapter.getIndexView()); mRunnable = null; } }; post(mRunnable); } } }

2).设置ViewPager的滚动监听,使ViewPager和TabView一起联动

@Override public void onPageScrollStateChanged(int position) { if (position == 0) { // 设置为不是点击 mIsClick = false; } if (mPageChangeListener != null) mPageChangeListener.onPageScrollStateChanged(position); } @Override public void onPageScrolled(int position, float offset, int arg2) { scroll(position, offset); if (mPageChangeListener != null) mPageChangeListener.onPageScrolled(position, offset, arg2); } @Override public void onPageSelected(int position) { mCureentItem = position; if (mPageChangeListener != null) mPageChangeListener.onPageSelected(position); } /** * 指示器跟随手指进行滚动 */ public void scroll(int position, float offset) { int tabWidth = mContanierGroup.getTabView(0).getWidth(); // 让选中Tab的一直在最中间 int total = (int) ((position + offset) * tabWidth); int green = (getWidth() - tabWidth) / 2; // 滚动的距离 int scroll = total - green; if (!mIsClick) { this.scrollTo(scroll, 0); mContanierGroup.scrollIndicator(position, offset); } }

3).最后我们采用适配器Adapter模式,完成高亮和下标指示器。

public abstract class IndicatorAdapter<T extends View> { /** * 获取Tab View */ public abstract T getTabView(int position); /** * 获取角标View */ public View getIndexView() { return null; } /** * 高亮当前Tab */ public void highLightTabView(T tabView) { } /** * 恢复当前Tab */ public void restoreTabView(T tabView) { } }

4).最后我们来看在activity中怎么使用,在IndicatorAdapter有四个方法,我们只需要实现一个方法,其余三个方法如果不使用可以不复写。以Adapter的形式暴露出来,那么用户可以自己去实现而不必受局限。

mIndicator.setAdapter(mViewpager, new IndicatorAdapter<TextView>() { @Override public TextView getTabView(int position) { TextView tabView = new TextView(getBaseContext()); tabView.setTextColor(Color.WHITE); tabView.setText(mTitles.get(position)); tabView.setPadding(20, 20, 20, 20); tabView.setGravity(Gravity.CENTER); return tabView; } @Override public View getIndexView() { ImageView view = new ImageView(getBaseContext()); view.setImageResource(R.drawable.corners_login_nomral); view.setPadding(25, 0, 25, 0); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( LayoutParams.WRAP_CONTENT, 6); view.setLayoutParams(params); return view; } @Override public void highLightTabView(TextView tabView) { final TextView itemView = (TextView) tabView; itemView.setTextColor(Color.RED); } @Override public void restoreTabView(TextView tabView) { final TextView itemView = (TextView) tabView; itemView.setTextColor(Color.WHITE); } });

不需配置的ViewPagerIndicator 的源码下载:http://xiazai.jb51.net/201611/yuanma/AndroidViewPager(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持查字典教程网。

【Android自定义ViewPager指示器】相关文章:

Android 实用工具之emulator介绍

android控件之WebView控件缩小

android viewpaper实例探讨

Android自定义Adapter的ListView的思路及代码

自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果

Android的ListView――适配器模式

android 自定义控件 自定义属性详细介绍

android 自定义ScrollView实现背景图片伸缩的实现代码及思路

Android实现自定义带文字和图片Button的方法

Android中的Button自定义点击效果实例代码

精品推荐
分类导航