zoukankan      html  css  js  c++  java
  • viewPager 的可滑动 Title

    有三种方式:

    1. 系统提供的title

    缺点:标题在viewpager的滑动过程中也会滑动

    实现:在ViewPager布局中添加 PagerTabStrip 或者是 PagerTitleStrip 即可(两者选一个)

    2. 自定义 Title 布局为:多个TextView + 一个 ImageView

    3. 自定义 Title 布局为:一个LinearLayout 包含多个TextView ,重写onDraw() 方法,画出滑动块

    (推荐使用)

        public ViewPagerTitleView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            this.mContext = context;
            mPaint = new Paint();
            mPaint.setColor(context.getResources().getColor(R.color.colorAccent));
            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    
            mLayout = new LinearLayout(context);
            mLayout.setOrientation(LinearLayout.HORIZONTAL);
            LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(0, 20, 0, 20);
            addView(mLayout, params);
    
            params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT, 1.0f);
    
            setWillNotDraw(false);
        }
    
        public void setData() {
            for (int i = 0; i < mPager.getAdapter().getCount(); i++) {
                TextView textView = new TextView(mContext);
                textView.setTextSize(18);
                textView.setText(mPager.getAdapter().getPageTitle(i));
                textView.setGravity(Gravity.CENTER);
                textView.setLayoutParams(params1);
                final int finalI = i;
                textView.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mPager.setCurrentItem(finalI);
                    }
                });
                mLayout.addView(textView);
            }
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            int width = mLayout.getWidth() / mPager.getAdapter().getCount();
            canvas.drawRect(mLayout.getLeft() + (mPosition + mDistense) * width, mLayout.getBottom(), mLayout.getLeft() + (mPosition + 1 + mDistense) * width, mLayout.getBottom() + dp(6), mPaint);
        }
    
        public int dp(float var0) {
            float density = 2.0f;
            return var0 == 0.0F ? 0 : (int) Math.ceil((double) (density * var0));
        }
    
        public void setViewPager(ViewPager pager) {
            this.mPager = pager;
            mPager.addView(new PagerTitleStrip(mContext));
            if (mPager.getAdapter() != null) {
                setData();
                mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    @Override
                    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                        mDistense = positionOffset;
                        mPosition=position;
                        invalidate();
                    }
    
                    @Override
                    public void onPageSelected(int position) {
                    }
    
                    @Override
                    public void onPageScrollStateChanged(int state) {
    
                    }
                });
            }
        }
    
  • 相关阅读:
    基于Vue.js的表格分页组件
    浅谈Vue.js
    利用js2image把代码压缩成圣诞树
    在AngularJS中的使用Highcharts图表控件
    使用Uploadify(UploadiFive)多文件上传控件遇到的坑
    iOS开源项目周报0323
    安卓开源项目周报0322
    前端开源项目周报0321
    iOS开源项目周报0316
    安卓开源项目周报0315
  • 原文地址:https://www.cnblogs.com/zhy7104/p/6039797.html
Copyright © 2011-2022 走看看