Android （基础自定义组件）viewpagertap滑动器

作者: 左浩洋 | 来源:发表于2016-11-28 00:48 被阅读0次

1.根据慕课网的视频写的一个比较基础的view,对于刚接触自定义view的同僚来说是一个比较好的选择，实现起来比较简单

视频地址：http://www.imooc.com/learn/615

效果图.gif

2.ViewPagerTab组件实现代码

2.1 声明变量

private Paint mPaint; //画笔
private Path mPath;// 三角形的三条边
private int mTriangleWidth; //三角形宽度
private int mTriangleHeight; //三角形高度
private static final float RADIO_TRIANGLE_WIDTH= 1/6f; //三角形比例位置
private int mInitTranslationX;// 出事化位置
private int mTranslationX= 0;//根据手指移动是位置

private int mTabVisibleCount;//可见tab数量
private final int COUNT_TAB_VISIBLE= 4; //默认tab可见数量

private List<String> mTabList = new ArrayList<>();//title集合
private ViewPager mViewPager;
private final int TEXT_COLOR_NORMAL= 0x77ffffff;
private final int TEXT_COLOR_HIGHLIGHT= 0xffffffff;

2.1.1主要定义画笔、三角形使用path来实现。接着定义三角形的大小（宽高）以及初始化位置。
2.1.2设置mInitTranslationX参数，表示三角形初始化的位置，相当于marginLeft，计算方式是：
mInitTranslationX = 一个tab的宽度 - 三角形宽度的/2
2.1.3设置mTranslationX参数，表示每一移动一个tab时，三角形需要平移的宽度，如图：

1240.png

2.1.4 mTabVisibleCount,自定义属性，布局中要显示几个tab,如上图4个tab

2.1.4.1自定义属性

<attr name="visible_tab_count" format="integer" />
<declare-styleable name="ViewPagerTab">
    <attr name="visible_tab_count"/>
</declare-styleable>

2.2 重写构造实例画笔，获取显示tap数量

   public ViewPagerTab(Context context, AttributeSet attrs) {
    super(context, attrs);
    //获取自定义属性
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerTab);
    mTabVisibleCount= array.getInt(R.styleable.ViewPagerTab_visible_tab_count, COUNT_TAB_VISIBLE);
    if(mTabVisibleCount == 0){
        mTabVisibleCount = COUNT_TAB_VISIBLE;
    }
    array.recycle();
    //初始化画笔
    mPaint = new Paint();
    mPaint.setAntiAlias(true);//设置坑锯齿
    mPaint.setColor(0xffffffff);//画笔的颜色
    mPaint.setStyle(Paint.Style.FILL);//设置三角形样式， 充满三角形
    mPaint.setPathEffect(new CornerPathEffect(3));//设置三角形，角度的弧度,, 参数越大，弧度越高
}

2.2.1构造中主要获取自定义属性值，默认为4；以及设置画笔

2.3设置三角形宽高以及初始化位置

 /*
*  设置三角形
* */
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mTriangleWidth = ((int) (w/ mTabVisibleCount * RADIO_TRIANGLE_WIDTH));//三角形的宽度
    mTriangleHeight = mTriangleWidth / 2;//三角形为等腰三角形， 所以高度为底部宽度的1/2
    mInitTranslationX= w/mTabVisibleCount/2 -  mTriangleWidth /2;//初始化三角形X轴的位置
    //初始化三角形
    initTriangle();
}
/*
  * 初始化三角形
* */
private void initTriangle() {
    mPath= new Path();
    mPath.moveTo(0, 0);
    mPath.lineTo(mTriangleWidth, 0);
    mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);
    mPath.close();
}

2.3.1三角形的宽度 = 一个tab宽度的1/6；如果觉得宽度的大小不合适，可以改变1/6这个常量的比例

Paste_Image.png

2.3.2三角形的高度 = 高度/2如图：

Paste_Image.png
2.3.3绘画三角形

Paste_Image.png

2.4设置三角形位置

/*
* 绘画布局， 使用画笔,, 执行invalidate（）方法，，会重新执行此方法
* */
@Override
protected void dispatchDraw(Canvas canvas) {
    canvas.save();
    canvas.translate(mInitTranslationX + mTranslationX, getHeight());//当前在那个位置
    canvas.drawPath(mPath, mPaint);//传入三角形和画笔
    canvas.restore();
    super.dispatchDraw(canvas);
}

2.4.1重写父类dispatchDraw方法，此方法在invalidate（）时，会重新执行
2.4.2通过 canvas.translate（）设置三角形所在位置；X轴（上去看2.1.3），Y轴为但前组件的高度（最底部）。以及调用drawPath（）方法使用画笔。

2.5通过viewpager的position以及positionOffset来计算三角形要移动的位置

  /*
*  移动三角形
* */
public void setScroll(int position, float positionOffset) {
    //(getWidth()/mTabVisibleCount  可以理解为每个tab的宽度
    //position + positionOffset  position:要滑动到第几个tab   postionOffset: 上一个tab到下一个tab的中间位置
    //mTranslationX  向X轴滑动多少宽度
    mTranslationX= (int) ((getWidth()/mTabVisibleCount) * (position + positionOffset));//三角形平移， 与下面可执行代码无关
    //position >= (mTabVisibleCount - 2)   当前选中的position大于或等于可显示tab的倒数第二个tab position
    //positionOffset > 0    表示当前属于滑动状态
    //getChildCount() > mTabVisibleCount   总数必须大于可显示的tab数量
    //position < (getChildCount() - (mTabVisibleCount==1? 1:2))  大致意思是 滑动最后一条，三角形滑到最后，此条件在滑到最后一个tab时，为false
    if(position >= (mTabVisibleCount - 2) && positionOffset > 0 &&//组件平移， 与上面可执行代码无关
            getChildCount() > mTabVisibleCount && position < (getChildCount() - (mTabVisibleCount==1? 1:2))){
        if(mTabVisibleCount == 1){
            //可显示数量为1时， 每次向前滑到一个tab的宽度，索引为固定的
            this.scrollTo((int) ((getWidth() / mTabVisibleCount) * (position + positionOffset)), 0);
        }else{
            //不等于1时， 索引为倒数第二个tab
            this.scrollTo((int) ((getWidth() / mTabVisibleCount) * (position - (mTabVisibleCount - 2) + positionOffset)), 0);
        }

    }
    //重新执行dispatchDraw（） 方法，  实现图案移动
    invalidate();//重绘布局
}

2.5.1如标题主要是通过viewpager的position和positionOffset来计算mTranslationX的值；再通过scrollTo方法来平移但前组件，最后通过invalidate()方法重绘布局
2.5.2剩下的就是一些算法和逻辑判断

2.6 获取一个viewPager,重写一个接口对外提供viewPager的监听事件

  public interface OnPageChangeListener{
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

    public void onPageSelected(int position);

    public void onPageScrollStateChanged(int state);
}

/*
* 设置viewpager
* */
public void setViewPager(ViewPager viewPager){
    if(viewPager==null) return;
    mViewPager= viewPager;
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            setScroll(position, positionOffset);
            if (mOnPageChangeListener != null) {
                mOnPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }
        }

        @Override
        public void onPageSelected(int position) {
            if (mOnPageChangeListener != null) {
                mOnPageChangeListener.onPageSelected(position);
            }
            setTextHighLight(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            if (mOnPageChangeListener != null) {
                mOnPageChangeListener.onPageScrollStateChanged(state);
            }
        }
    });
    mViewPager.setCurrentItem(0);
    setTextHighLight(0);
}
/*
* 设置当前tab为高亮颜色
* */
private void setTextHighLight(int position){
    for (int i = 0; i< getChildCount(); i++) {
        if (getChildAt(i) instanceof TextView) {
            ((TextView)getChildAt(i)).setTextColor(TEXT_COLOR_NORMAL);
            if(position == i){
                ((TextView)getChildAt(i)).setTextColor(TEXT_COLOR_HIGHLIGHT);
            }
        }
    }
}

2.6.1获取viewpager,监听viewpager的滑动事件，自定义setScroll方法（2.5的方法）将但前position和滑动偏移量传进去
2.6.2在此次以及监听的viewpager的滑动事件，如果外界也需要监听当前viewpager的话，会起冲突；此时就需要设置回调，对外提供接口
2.6.3setTextHighLight()方法设置选中的tab为高亮颜色

2.7 获取一个tab集合设置tab,为所有的tab设置点击事件

   /*
* 设置tab
* */
public void setTabList(List<String> titles){
    if(titles != null || titles.size() != 0){
        this.removeAllViews();
        mTabList = titles;
        for (String title : mTabList){
            addView(generateTextView(title));
        }
        setTextItemOnclickEvent();
    }
}
/*
* 根据tab设置TextView
* */
private View generateTextView(String title) {
    TextView textView = new TextView(getContext());
    LayoutParams ll = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    ll.width= getScreenWidth() / mTabVisibleCount;
    textView.setText(title);
    textView.setTextColor(TEXT_COLOR_NORMAL);
    textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, 40);
    textView.setGravity(Gravity.CENTER);
    textView.setLayoutParams(ll);
    return textView;
}
/*
* 设置textView点击事件
* */
private void setTextItemOnclickEvent(){
    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) {
                mViewPager.setCurrentItem(j);
            }
        });
    }
}

2.7.1获取list集合，将每一个item设置成一个textview,再通过setTextItemOnclickEvent()方法设置点击事件

3.调用

<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">

<com.pingan.admin.tapviewpage.view.ViewPagerTab
    android:id="@+id/m_tab"
    android:layout_width="match_parent"
    app:visible_tab_count="5"
    android:layout_height="50dp"
    android:background="#666666" />

<android.support.v4.view.ViewPager
    android:id="@+id/m_viewpage"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

</android.support.v4.view.ViewPager>
</LinearLayout>

3.1app:visible_tab_count自定义属性；如果不设置默认为自定义组件的COUNT_TAB_VISIBLE变量值

4.代码使用方式

private ViewPagerTab mTab;
private ViewPager mViewPage;
private List<String> mTitleList = Arrays.asList("短信1","收藏2","推荐3","短信4","收藏5","推荐6","短信7","收藏8","推荐9");
private List<PagerFragment> mFragmentList = new ArrayList<>();
private FragmentPagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    initView();
    initData();
    mTab.setTabList(mTitleList);
    mViewPage.setAdapter(mAdapter);
    mTab.setViewPager(mViewPage);
}

private void initView() {
    mTab = (ViewPagerTab) findViewById(R.id.m_tab);
    mViewPage = (ViewPager) findViewById(R.id.m_viewpage);
}

private void initData() {
    for (String title : mTitleList){
        PagerFragment pf = PagerFragment.getInstance(title);
        mFragmentList.add(pf);
    }
    mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }
    };
}

源码地址：

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

Apk:

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

Android （基础自定义组件）viewpagertap滑动器

1.根据慕课网的视频写的一个比较基础的view,对于刚接触自定义view的同僚来说是一个比较好的选择，实现起来比较简单

2.ViewPagerTab组件实现代码

2.1 声明变量

2.1.4.1自定义属性

2.2 重写构造实例画笔，获取显示tap数量

2.3设置三角形宽高以及初始化位置

2.4设置三角形位置

2.5通过viewpager的position以及positionOffset来计算三角形要移动的位置

2.6 获取一个viewPager,重写一个接口对外提供viewPager的监听事件

2.7 获取一个tab集合设置tab,为所有的tab设置点击事件

3.调用

4.代码使用方式

源码地址：

Apk:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android技术知识

Android开发

Android知识

Android （基础自定义组件）viewpagertap滑动器

1.根据慕课网的视频写的一个比较基础的view,对于刚接触自定义view的同僚来说是一个比较好的选择，实现起来比较简单

2.ViewPagerTab组件实现代码

2.1 声明变量

2.1.4.1自定义属性

2.2 重写构造实例画笔， 获取显示tap数量

2.3设置三角形宽高以及初始化位置

2.4设置三角形位置

2.5通过viewpager的position以及positionOffset来计算三角形要移动的位置

2.6 获取一个viewPager,重写一个接口对外提供viewPager的监听事件

2.7 获取一个tab集合设置tab,为所有的tab设置点击事件

3.调用

4.代码使用方式

源码地址：

Apk:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android技术知识

Android开发

Android知识

2.2 重写构造实例画笔，获取显示tap数量