最近很蛋疼，项目要模仿网易新闻的样式去做。上次把仿网易新闻客户端的下拉刷新写出来了，这次是ViewPager的滑动，同时ViewPager的上面标题下划线跟随者移动，本来通过ViewPager的OnPagerChangeListener的监听事件就可以完成，但是做出来之后，因为需要一直的刷新，所以很卡，一气之下，呵呵，自己完全的画了。整个点击事件，滑动事件都自己处理了。
效果图如下：
 
 
下标的长宽是随之改变的。
使用方式：
我的布局文件：
<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"
    >
 
 
    <com.flyme.columnhorizontalscrollview.ColumnHorizontalScrollView 
        android:layout_width="match_parent"
        android:paddingLeft="20dip"
        android:paddingRight="20dip"
        android:layout_height="100dip"
        android:id="@+id/title"
        />
    
    <android.support.v4.view.ViewPager
        android:background="@android:color/holo_orange_light"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager"
        />
    

</LinearLayout>

很简单，把自定义的布局放在ViewPager的上面，很随意了，你想放哪就放哪。
 
在Activity中的使用方式为：
 
ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
        ColumnHorizontalScrollView title = (ColumnHorizontalScrollView) findViewById(R.id.title);
        mViewPager.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return 10;
            }
            
            @Override
            public Fragment getItem(int arg0) {
                return new MyFragment(arg0);
            }
        });
        title.setTitle("上市的公司","历史","游戏啊","房产证","精选的搞笑片段","段子","电脑硬件","热点","轻松一刻","时尚");  //这个是设置标题的  
 
        title.setspace(40);

title.setViewPager(mViewPager);  //这个是将ViewPager对象给自定义的View

 
我就把自定义的类代码贴出来吧：比较懒了，时间比较紧，代码封装的不好，也没怎么封装，见谅。
public class ColumnHorizontalScrollView extends View implements OnPageChangeListener {
 
    private Context context;
    private int width ;
    private int padingLeft;
    private int padingRight ; 
    private float lineStartX = 0  ;
    private float lineEndX = 0  ;
    private Paint textPaint;
    private int textWidth ;
    private int lastPosition = 0 ;
    private float lineScale = 0 ; 
    
    private ViewPager mViewPager ;
    
    
    /**
     * 这些事默认设置的
     */
    private static final int DEFULT_TEXT_COLOR = Color.BLACK;
    private static final int DEFULT_TEXT_SIZE = 40;
    private  static final int DEFULT_LINE_COLOR = Color.RED;
    private static final int DEFULT_LINE_STRO = 5;
    
    
    private String [] str ; // 存储 题要显示的字符
    private float [] strX ; // 存储 每个字符  开始的X位置
    private float [] strWidth ;  // 存储每个字符的长度
    private int startX; // 与手势相关    记录按下的X的坐标
    
    private int recordDownX = 0 ;
    
    private OnClickOneListener mOnClickOneListener ;
    private OverScroller mScroller; 
 
    public ColumnHorizontalScrollView(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }
    
    public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    public ColumnHorizontalScrollView(Context context) {
        super(context);
        init(context);
    }
    
    
    /**
     * 初始化的时候需要new出来的一些类，和必要的设置
     * @param context
     */
    private void init(Context context){
        this.context = context ;
        mScroller = new OverScroller(context,new LinearInterpolator());
        textPaint = new Paint();
        linePaint = new Paint();
        
        textPaint.setColor(DEFULT_TEXT_COLOR);
        textPaint.setTextSize(DEFULT_TEXT_SIZE);
        textPaint.setTypeface(Typeface.SANS_SERIF);
        
        linePaint.setColor(DEFULT_LINE_COLOR);
        linePaint.setStrokeWidth(DEFULT_LINE_STRO);
    }
    
    
    
    
    /**
     * 画图
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (str == null) {
            return ;
        }
        measureSize();
        drawText(canvas); //画字
        measureLineSize();//测量下划线的位置
        drawLine(canvas);//画下划线
    }
    
    
    
    /**
     * 这个是用来通过Scroller来控制缓冲变化的   后来不需要了
     */
    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
        }
        super.computeScroll();
        postInvalidate();
    }
    
    
    /**
     * 画字的具体代码
     * @param canvas
     */
    private  void drawText(Canvas canvas){
        int totel = 0 ;
        for (int i = 0; i < str.length; i++) {
            if (i == 0 ) {
                totel += padingLeft;
            }
            strX[i] = totel ;
            canvas.drawText(str[i], strX[i], textHeight, textPaint);
            float oneTextWidth = textPaint.measureText(str[i]);
            totel =(int) (totel +  oneTextWidth +space);
            strWidth[i] = oneTextWidth ;
        }
        textWidth = totel - space  +padingLeft ;
    }
    
    
    private void drawLine(Canvas canvas){
        canvas.drawLine(lineStartX, lineHeight ,lineEndX , lineHeight, linePaint);
    }
    
    
    
    private void measureSize(){
        width = getWidth();
        height = getHeight();
        padingLeft = getPaddingLeft();
        padingRight = getPaddingRight();
        textHeight = (int) (height / 2 - (textPaint.descent() + textPaint.ascent())/2); 
        lineHeight = (int) (textHeight - (textPaint.descent() + textPaint.ascent()));
    }
    
    
    
    private void measureLineSize(){
        lineStartX = strX[lastPosition] - space / 2 + (strWidth[lastPosition] + space )* lineScale;
        if ((lastPosition + 1) == mViewPager.getAdapter().getCount()) {
            lineEndX = strX[lastPosition] + strWidth[lastPosition] + space / 2 ;          
        }else {
            lineEndX = strX[lastPosition] + strWidth[lastPosition] + space / 2 + ( strWidth[lastPosition + 1] + space ) * lineScale;          
        }
    }
    
    
    
    public void setTitle(String ...str){
        this.str = str ;
        strX = new float[str.length];
        strWidth = new float[str.length];
    }
    
    
    private int space = 0 ;
    private Paint linePaint;
    private int lineHeight;
    private int height;
    private int textHeight;
    
    public void setspace(int space){
        this.space = space ;
    }
    
    public void setTextColorResourceId(int colorid){
        int color = context.getResources().getColor(colorid);
        textPaint.setColor(color);
    }
    
    public void setTextColor(int color){
        textPaint.setColor(color);
    }
    
    
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startX = recordDownX = (int) event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            int moveX = (int) event.getX();
            int scrollX = getScrollX();
            if (Math.abs(moveX - recordDownX ) > 32 ) {
                smootMove(scrollX , startX - moveX);
            }
            startX = (int) event.getX();
            break;
        case MotionEvent.ACTION_UP:
            int upX = (int) event.getX();
            if (Math.abs(upX - recordDownX ) < 32 ) {
                int position = decidePosition(upX);
                setPosition(position);
                if (mOnClickOneListener != null) {
                    mOnClickOneListener.onClick(position) ;
                }
            }
            break;
        }
        return true;
    }
    
    
    private int  decidePosition(int upX){
        for (int i = 0; i < strX.length; i++) {
            if ((upX + getScrollX()) < (strX[i] + strWidth[i]) + space / 2) {
                return i ;
            }
        }
        return 0 ;
    }
    
    
    public void setPosition(int position){
//        lastPosition = position ;
//        int scrollX = getScrollX();
//        int location = (int) (strX[lastPosition] - space - 20);
//        int dy = (int)(location  - getScrollX());
//        if ((location + width) > (textWidth + padingRight ) ) {
//            mScroller.startScroll(scrollX, 0,textWidth + padingRight - width - getScrollX()  , 0, 200);
//        }else {
//            mScroller.startScroll(scrollX, 0, dy , 0, 200);
//        }
//        if ((scrollX + dy ) > (textWidth+padingRight - width)) {
//            mScroller.startScroll(scrollX, 0, textWidth+padingRight - width - scrollX , 0, 200);
//        }else {
//            mScroller.startScroll(scrollX, 0, dy , 0, 200);
//        }
        mViewPager.setCurrentItem(position);
    }
    
    
    private void smootMove(int scrollX , int dy){
        if ((scrollX <= 0 && dy > 0 && textWidth > width)  || (scrollX > 0)) {
            if ((scrollX + dy) < 0 ) {
                scrollTo(0 , 0);
            }else {
                if ((scrollX + dy + getWidth()) > (textWidth+padingRight )) {
                    scrollTo(textWidth +padingRight - getWidth() , 0);
                }else {
                    scrollTo(scrollX + dy , 0);
                }
            }
        }
    }
    
    public void setViewPager(ViewPager mViewPager){
        this.mViewPager = mViewPager;
        if (this.mViewPager != null) {
            this.mViewPager.setOnPageChangeListener(this);
        }
    }
    
    /**
     * dip转为 px
     */
    public int dip2px(float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }
 
    @Override
    public void onPageScrollStateChanged(int arg0) {
        
    }
 
    @Override
    public void onPageScrolled(int lastPosition, float scale, int location) {
        this.lastPosition = lastPosition ;
        lineScale = scale ;
        invalidate();
        smootMove((int)(strX[lastPosition] - space - 20 ) ,(int)((strWidth[lastPosition] + space )*  lineScale));
    }
 
    @Override
    public void onPageSelected(int arg0) {
    }
    
    
    public void setOnClickOneListener (OnClickOneListener mOnClickOneListener){
        this.mOnClickOneListener = mOnClickOneListener ;
    }
    
    
    /**
     * 内部接口    是点击事件的接口
     * @author lenovo
     *
     */
    interface OnClickOneListener{
        public void onClick(int position);
    }
    

}

 
over。
关于bug：
这个做的还不是很完善，还有一些东西没有做适配。如果有人用，在使用过程中出现问题，你可以自己做一下简单的适配。
 
 
源码下载地址： 

http://pan.baidu.com/s/1sj0lIxR

 
我的github地址：https://github.com/flyme2012
我的博客地址：http://www.cnblogs.com/flyme2012/

Android之自定义（上方标题随ViewPager手势慢慢滑动）的更多相关文章

  1. Android之自己定义（上方标题随ViewPager手势慢慢滑动）

    近期非常蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻client的下拉刷新写出来了.这次是ViewPager的滑动,同一时候ViewPager的上面标题下划线尾随者移动.本来通过ViewPag ...

  2. Android Studio 去除上方标题

    选中代码再Ctrl+shift+'/' 可加/***/注释 https://blog.csdn.net/wuqingsen1/article/details/78554117 styles.xml & ...

  3. 【Android Developers Training】 70. 使用ViewPager实现屏幕滑动

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航

    一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见Actio ...

  5. 自定义actionbar标题

    这是我自己封装的一个activity,主要作为所有Activity的基类,可以一键关掉所有的activity, 并共享一个自定义actionbar.直接切入主题吧. 第一步就是创建自定义标题的布局文件 ...

  6. 114、Android禁止ViewPager的左右滑动

    有时候在开发中会遇到一些“诡异”的要求,比如在ViewPager中嵌入ListView,或者再嵌入一个ViewPager,那么在滑动的时候就会造成被嵌入的XXView不能滑动了,那么现在就把最外层的V ...

  7. 自定义ViewPager控制是否滑动

    package com.lvshandian.menshen.view;/** * Created by zhang on 2016/11/8. * 创建自定义滑动,禁止滑动的ViewPager */ ...

  8. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  9. Android RatingBar 自定义样式

    Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:sty ...

随机推荐

  1. c++中map的基本函数

    c++中map的一些方法 begin() 返回指向map头部的迭代器     clear() 删除所有元素     count() 返回指定元素出现的次数     empty() 如果map为空则返回 ...

  2. HDU1501 简单DP

    dp[i][j]:用A的前i的字符和B的前j个字符能否组成i+j长度的合法C串 O(n^2)的方法有点糟糕 /*H E A D*/ char str1[maxn],str2[maxn],str3[ma ...

  3. Spring 操作 jdbc 链接数据库

    1. 新建资源文件 db.properities jdbc.user=root jdbc.password=root jdbc.driverClass=com.mysql.jdbc.Driver jd ...

  4. ecshop 模板机制

    ECShop模板是基于smarty 文件名cls_template.php lib_main.php中的assign_template()会设置我们的网店的公共信息及网站设置:assign_dynam ...

  5. 建立ionic3的环境

    看了好些例子,关于如何搭建ionic3的环境的,结果因为代理服务器的原因,弄好久才成功.前面的步骤网上随意可以找到的了,关键是ionic设置代理的地方,如果你的公司也需要代理才能到外网的话.... 1 ...

  6. 【记录】adb连不上手机

    1.\用户\.android文件夹下新建adb_usb.ini,内容为手机的VID值,如0x9BB5 2.重启adb adb kill-server adb start-server adb devi ...

  7. 51Nod - 1179

    给出N个正整数,找出N个数两两之间最大公约数的最大值.例如:N = 4,4个数为:9 15 25 16,两两之间最大公约数的最大值是15同25的最大公约数5.   Input第1行:一个数N,表示输入 ...

  8. PIE SDK符号选择器

    1. 功能简介 符号选择器可以根据不同的需求进行改变图层的符号形状以及颜色,下面基于PIE SDK介绍如何使用符号选择器. 2. 功能实现说明 2.1.  实现思路及原理说明 第一步 加载图层 第二步 ...

  9. java中获得对象的方法

  10. NodeJS 实现阿里云推送。

    虽然阿里云推送也有 NodeJS SDK ,只要在项目中引用 aliyun-sdk 就可以使用了.里面的推送功能了. 我在这里就不写怎么使用aliyun-sdk.给出来的DEMO是回调形式的.用起来有 ...