ScrollView+指示器
最近干了一段时间的活，产品要求完成混动指示器的功能，也就是说上面有tab标题，当滑动到不同的位置之后，标题切换，且点击标题也可以使得scrollview,滑动到对应的位置，我看了看网上的例子觉得挺少程度，这里就分享一些经验给大家，第一自定义一个类似标题栏的指示器
public class CustomerIndicatior extends LinearLayout { /** * 绘制矩形的画笔 */ private Paint mPaint; /** * path构成一个矩形 */ private Path mPath; /** * 矩形的宽度 */ private int mRectangleWidth; /** * 初始时，矩形指示器的偏移量 */ private int mInitTranslationX; /** * 手指滑动时的偏移量 */ private float mTranslationX; /** * 默认的Tab数量 */ private static final int COUNT_DEFAULT_TAB = 4; /** * tab数量 */ private int mTabVisibleCount = COUNT_DEFAULT_TAB; /** * 与之绑定的ViewPager */ public ViewPager mViewPager; /** * 对外的ViewPager的回调接口 */ private ViewPagerIndicator.PageChangeListener onPageChangeListener; /** * 文本默认颜色 */ private int textColor; /** * 指示器颜色和文字高亮时的颜色 */ private int underlineColor; /** * 控件最底下的那一条线 */ private boolean DrawBottomLine ; /** * 指示器的高度 */ private float underlineHeight; /** * 画最底下的线的画笔 */ private Paint mDrawLinePaint; private ScroViewChangeListener scroViewChangeListener; public CustomerIndicatior(Context context) { this(context, null); } public CustomerIndicatior(Context context, AttributeSet attrs) { super(context, attrs); // 获得自定义属性 TypedArray a = context.obtainStyledAttributes(attrs, com.enjoylink.view.lib.R.styleable.ViewPagerIndicator); mTabVisibleCount = a.getInt(com.enjoylink.view.lib.R.styleable.ViewPagerIndicator_visibilitycount,COUNT_DEFAULT_TAB); textColor = a.getColor(com.enjoylink.view.lib.R.styleable.ViewPagerIndicator_textcolor, Color.parseColor("#ffffff")); underlineColor = a.getColor(com.enjoylink.view.lib.R.styleable.ViewPagerIndicator_underlinecolor, Color.parseColor("#1995F7")); underlineHeight = a.getDimension(com.enjoylink.view.lib.R.styleable.ViewPagerIndicator_underlineheigth, 16); DrawBottomLine = a.getBoolean(com.enjoylink.view.lib.R.styleable.ViewPagerIndicator_draw_bottom_line, false) ; if (mTabVisibleCount < 0) mTabVisibleCount = COUNT_DEFAULT_TAB; a.recycle(); // 初始化画笔 mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(underlineColor); mPaint.setStyle(Paint.Style.FILL); //画group的画笔 mDrawLinePaint = new Paint(); mDrawLinePaint.setAntiAlias(true); mDrawLinePaint.setColor(Color.parseColor("#dad9dc")); mDrawLinePaint.setStyle(Paint.Style.FILL); } /** * 画Group */ @Override protected void onDraw(Canvas canvas) { if(DrawBottomLine){ canvas.save() ; canvas.drawRect(0, getHeight()-underlineHeight/2, getWidth(), getHeight(), mDrawLinePaint); canvas.restore(); } super.onDraw(canvas); } /** * 绘制指示器 */ @Override protected void dispatchDraw(Canvas canvas) { canvas.save(); // 画笔平移到正确的位置 canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 1); canvas.drawPath(mPath, mPaint); canvas.restore(); super.dispatchDraw(canvas); } /** * 初始化矩形的宽度 */ @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // 初始化矩形 initRectangle(); // 初始时的偏移量 mInitTranslationX = getWidth() / mTabVisibleCount / 2 - mRectangleWidth/ 2; } /** * 设置可见的tab的数量 * * @param count */ public void setVisibleTabCount(int count) { this.mTabVisibleCount = count; } /** * 设置tab的标题内容 可选，可以自己在布局文件中写死 * * @param datas */ public void setTabItemTitles(List<String> datas) { // 如果传入的list有值，则移除布局文件中设置的view if (datas != null && datas.size() > 0) { this.removeAllViews(); for (String title : datas) { // 添加view addView(generateTextView(title)); } // 设置item的click事件 setItemClickEvent(); } } public void setTabItemTitles(String[] datas) { if (datas != null && datas.length > 0) { this.removeAllViews(); for (int i=0;i<datas.length;i++) { addView(generateTextView(datas[i])); } setItemClickEvent(); } } public void setSeletView(int pos ,float positionOffset) { scroll(pos, positionOffset); resetTextViewColor(); highLightTextView(pos); } /** * 高亮文本 * * @param position */ protected void highLightTextView(int position) { View view = getChildAt(position); if (view instanceof TextView) { ((TextView) view).setTextColor(underlineColor); } } /** * 重置文本颜色 */ private void resetTextViewColor() { for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); if (view instanceof TextView) { ((TextView) view).setTextColor(textColor); } } } /** * 设置点击事件 */ public void setItemClickEvent() { int cCount = getChildCount(); for (int i = 0; i < cCount; i++) { final int j = i; View view = getChildAt(i); view.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { scroViewChangeListener.onSlectScrolled(j); } }); } } /** * 根据标题生成我们的TextView * * @param text * @return */ private TextView generateTextView(String text) { TextView tv = new TextView(getContext()); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); lp.width = getScreenWidth() / mTabVisibleCount; tv.setGravity(Gravity.CENTER); tv.setTextColor(textColor); tv.setText(text); tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 15); if(mRectangleWidth == 0){ TextPaint paint = tv.getPaint() ; mRectangleWidth = (int) paint.measureText(text) ; } tv.setLayoutParams(lp); return tv; } /** * 初始化矩形指示器 */ private void initRectangle() { mPath = new Path(); mPath.moveTo(0, 0); mPath.lineTo(mRectangleWidth, 0); mPath.lineTo(mRectangleWidth, -underlineHeight); mPath.lineTo(0, -underlineHeight); mPath.close(); } /** * 设置布局中view的一些必要属性；如果设置了setTabTitles，布局中view则无效 */ @Override protected void onFinishInflate() { super.onFinishInflate(); int cCount = getChildCount(); if (cCount == 0) return; for (int i = 0; i < cCount; i++) { View view = getChildAt(i); LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams(); lp.weight = 0; lp.width = getScreenWidth() / mTabVisibleCount; view.setLayoutParams(lp); } // 设置点击事件 setItemClickEvent(); } /** * 获得屏幕的宽度 * * @return */ public int getScreenWidth() { WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); return outMetrics.widthPixels; } /** * 指示器跟随手指滚动，以及容器滚动 * * @param position * @param offset */ public void scroll(int position, float offset) { /** * 0-1:position=0 ;1-0:postion=0; */ // 不断改变偏移量，invalidate mTranslationX = getWidth() / mTabVisibleCount * (position + offset); int tabWidth = getScreenWidth() / mTabVisibleCount; // 容器滚动，当移动到倒数最后一个的时候，开始滚动 if (offset > 0 && position >= (mTabVisibleCount - 2)&& getChildCount() > mTabVisibleCount) { if (mTabVisibleCount != 1) { this.scrollTo((position - (mTabVisibleCount - 2)) * tabWidth+ (int) (tabWidth * offset), 0); } else // 为count为1时 的特殊处理 { this.scrollTo(position * tabWidth + (int) (tabWidth * offset),0); } } invalidate(); } public interface ScroViewChangeListener { public void onSlectScrolled(int position); } public void setOnScroViewChangeListener(ScroViewChangeListener scroViewChangeListener) { this.scroViewChangeListener = scroViewChangeListener; } }
第二步需要一个自定义的ScrollView，这里主要是监听ScrollView的滑动距离
public class MyScrollView extends ScrollView { private static final long DELAY = 100; private int currentScroll; private Runnable scrollCheckTask; /** * @param context */ public MyScrollView(Context context) { super(context); init(); } /** * @param context * @param attrs */ public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); init(); } /** * @param context * @param attrs * @param defStyle */ public MyScrollView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { scrollCheckTask = new Runnable() { @Override public void run() { int newScroll = getScrollY(); if (currentScroll == newScroll) { if (onScrollListener != null) { onScrollListener.onScrollStopped(); } } else { if (onScrollListener != null) { onScrollListener.onScrolling(); } currentScroll = getScrollY(); postDelayed(scrollCheckTask, DELAY); } } }; setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP) { currentScroll = getScrollY(); postDelayed(scrollCheckTask, DELAY); } return false; } }); } public interface OnScrollListener { public void onScrollChanged(int x, int y, int oldX, int oldY); public void onScrollStopped(); public void onScrolling(); } private OnScrollListener onScrollListener; /** * @param onScrollListener */ public void setOnScrollListener(OnScrollListener onScrollListener) { this.onScrollListener = onScrollListener; } @Override protected void onScrollChanged(int x, int y, int oldX, int oldY) { super.onScrollChanged(x, y, oldX, oldY); if (onScrollListener != null) { onScrollListener.onScrollChanged(x, y, oldX, oldY); } } /** * @param child * @return */ public boolean isChildVisible(View child) { if (child == null) { return false; } Rect scrollBounds = new Rect(); getHitRect(scrollBounds); return child.getLocalVisibleRect(scrollBounds); } /** * @return */ public boolean isAtTop() { return getScrollY() <= 0; } /** * @return */ public boolean isAtBottom() { return getChildAt(getChildCount() - 1).getBottom() + getPaddingBottom() == getHeight() + getScrollY(); } }
第三步在Activity中的使用，以下是调用指示器的接口回调处理，指示器ci_indicatior的点击事件，滑动至相应的地点，
和sv_message_show, ScrollView的监听滑动所做的事情， 这里需要主要的是定位地点的高度准确才能做出判断，
看以下示意图
ci_indicatior.setOnScroViewChangeListener(new CustomerIndicatior.ScroViewChangeListener() { //监听指示器的点击 @Override public void onSlectScrolled(int position) { if(position==0){ sv_message_show.scrollTo(0,0); }else if (position==1){ sv_message_show.scrollTo(0,tv_text_line_tow.getTop()); }else if (position==2){ sv_message_show.scrollTo(0,tv_text_line_there.getTop()); } } }); sv_message_show.setOnScrollListener(new MyScrollView.OnScrollListener() {//监听scroView的滚动 @Override public void onScrollChanged(int x, int t, int oldX, int oldY) { if (t < tv_text_line_tow.getTop()) { ci_indicatior.setSeletView(0, 0); } else if (t < tv_text_line_there.getTop() && t >= tv_text_line_tow.getTop()) { ci_indicatior.setSeletView(1, 0); } else if (t >= tv_text_line_there.getTop()) { ci_indicatior.setSeletView(2, 0); } } @Override public void onScrollStopped() { if (sv_message_show.isAtTop()) { ci_indicatior.setSeletView(0, 0); } else if (sv_message_show.isAtBottom()) { ci_indicatior.setSeletView(2, 0); } } @Override public void onScrolling() { android.util.Log.d("@", "scrolling..."); } });
最后希望对大家有帮助，第一次分享自己的一些心得，写的不好的地方望见谅