-
/** *容器移动的条件，讲到的三个条件，还需要考虑一下最后一个位置，所以根据所讲的内容，自己改进了一下，自认为更符合。 */ if (position >= mTabVisibleCount - 2 && offset > 0 && getChildCount() > mTabVisibleCount) { //容器移动的距离 if(mTabVisibleCount==1&&position<getChildCount()-1){//只有一个可见的tab this.scrollTo((int) (position * tabWidth + tabWidth * offset), 0); }else if(mTabVisibleCount==2&&position<getChildCount()-2){//只有两个可见tab this.scrollTo((int) (position * tabWidth + tabWidth * offset), 0); }else if (position < getChildCount() - 2) { this.scrollTo((int) ((position - (mTabVisibleCount - 2)) * tabWidth + tabWidth * offset), 0); } }查看全部
-
移动指示器——三角形指示器随tab移动 1.思路 （1）要想移动整个三角形指示器，就要在ViewPagerIndicator中移动画布的位置，需要动态获取mTranslationX的值 protected void dispatchDraw(Canvas canvas) { …… canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 2); canvas.drawPath(mPath, mPaint); // mPath就是三角形三条边，利用画笔mPaint画出来 canvas.restore(); super.dispatchDraw(canvas); } （2）获取mTranslationX的值 在ViewPager中添加onPageChangedLister监听，动态获取position和positionOffset的值，通过这两个变量计算得到mTranslationX 2.为ViewPager添加OnPageChangeListener监听，每次三角形的偏移量计算如下 public void onPageScrolled(int position, float positionOffset, int ) { // positionOffset = 0~1; // 从第一个滑到第二个时：滑动轨迹应该是tabWidth*positionOffset // 从第二个滑到第三个时：滑动轨迹为1*tabWidth+tabWidth*positionOffset，以此类推 mIndicator.scroll(position, positionOffset); } 3.由上面的思路可知，三角形的偏移量其实就是画布的偏移量mTranslationX public void scroll(int position, float offset) { int tabWidth = getWidth() / 3; mTranslationX = (int) (tabWidth * offset + tabWidth * position); invalidate(); }查看全部
-
说实在的，我不清楚这里为什么要-2，假设显示4屏，共有6屏，再第三屏就移动也挺奇怪的。分享一下我自己写的方便理解的移动方法： // 容器移动，当tab处于可见最后一个position时 //Log.e("TAG", "tabWidth=" + tabWidth + ", visibleCount=" + mTableVisibleCount + ", position=" + position); if (getChildCount() > mTableVisibleCount && positionOffset > 0 && position >= mTableVisibleCount - 1) { Log.e("TAG", "scroll by x=" + (tabWidth * positionOffset)); this.scrollTo((int) ((position + 1 - mTableVisibleCount) * tabWidth + tabWidth * positionOffset) ,0); }查看全部
-
我猜测这里不使用scrollBy是有原因的。因为scroll方法会被多次调用，导致每次的偏移量累加，会出问题。查看全部
-
这里两点需要说明： 1. 获取屏幕宽度的方法不需要那么麻烦，具体代码如下： DisplayMetrics metrics = getResources().getDisplayMetrics(); int mScreenWidth = metrics.widthPixels; 2. 一定不要忘记，需要把LayoutParams的weight置为0，只设置宽度是没用的。查看全部
-
带截图的笔记保存查看全部
-
计算三角形偏移量：利用公式--当前移动距离=总移动距离*梯度值，然后还得加上当前是第几个tag*单个tag的宽 因此等于tabWidth*offset+position*tabWidth;简化等于tabWidth*(offset+position);查看全部
-
Fragment newInstance的作用：fragmnet经常会被销毁重新实例化，Android framework只会调用fragment无参的构造函数。在系统自动实例化fragment的过程中，你没有办法干预。一些需要外部传入的参数来决定的初始化就没有办法完成。使用静态工厂方法，将外部传入的参数可以通过Fragment.setArgument保存在它自己身上，这样我们可以在Fragment.onCreate(...)调用的时候将这些参数取出来；重新构建Fragment时，原先的Fragment的字段值将会全部丢失，但是通过Fragment.setArguments(Bundle bundle)方法设置的bundle会保留下来。所以尽量使用Fragment.setArguments(Bundle bundle)方式来传递参数。查看全部
-
设置ViewPager 1.这一小节主要是学习代码的习惯 2.现在在MainActivity中给ViewPagerIndicator设置viewpager，监听OnPageChangeListener() (1)ViewPagerIndicator中 public void setViewPager(ViewPager viewPager) { mViewPager = viewPager; mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 重写onPageScrolled() onPageSelected() onPageScrollStateChanged() };) ); （2）MainActivity中 mIndicator.setViewPager(mViewPager); 3. 注意 这样做是不是在外面获取不到OnPageChangeListener监听了？ 好办啊！只要在ViewPagerIndicator中设置写一个回调接口给外面用，在自己监听OnPageChangeListener时回调的执行函数加入接口的回调就行了，例如ViewPagerIndicator中监听发生时 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { scroll(position, positionOffset); if (mListener != null) { mListener.onPageScrolled(position, positionOffset, positionOffsetPixels); } }查看全部
-
布局： 顶部使用水平方向的LinearLayout 正文部分使用ViewPager+Fragment查看全部
-
联动（上） 1.思路 如果tab数量为9，且可见的tab数量为4，滑动时做到联动 （1）可见tab数量是可赋值的，从attr.xml中设置 （2）tab总数量为9，weight＝1，所以tab对应的子view是平分的。这里就需要重新给子view设置宽度 （3）其他三角形的位置也需要重新设置 2.自定义属性 (1) attr.xml <attr name="visible_tab_count" format="integer" ></attr> <declare-styleable name="ViewPagerIndicator"> <attr name="visible_tab_count" /> </declare-styleable> (2)在ViewPagerIndicator的构造方法中获取可见tab的数量 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator); mTabVisibleCount = a.getInt(R.styleable., default); 3.重新设置子view的宽度 onFinishInflate()是在inflate xml布局成view的最后——所有的子view添加之后调用 之前每个子view的weight＝1,所有view平分。这个方法中可以获得child view的个数，根据mTabVisibleCount来设置每个tab的宽度 注意：代码不贴了，见图。 private int getScreenWidth() { WindowManager wm = getContext().getSystemService(WINDOW_SERVICE); DisplayMetrics metrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(metrics); return metrics.widthPixels; } 4.(1)所有的tab宽度，以及根据tab宽度来确定的三角形宽度都需要重新设置 （2）在mainactivity中把tab数量改成9个，因此fragment的数量也相应改变查看全部
-
绘制三角形指示器 2.（4）在绘制三角形之前要初始化画笔Paint 构造函数中 public ViewPagerIndicator(Context context, AttributeSet attrs) { super(context, attrs); // 初始化画笔 mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(Color.parseColor("#ffffff")); mPaint.setStyle(Paint.Style.FILL); mPaint.setPathEffect(new CornerPathEffect(3)); // 设置三角形三个角为圆角效果 } （5）在dispatchDraw()中绘制三角形 protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); canvas.save(); canvas.translate(mInitTranslationX + mTranslationX, getHeight() - 2); canvas.drawPath(mPath, mPaint); // mPath就是三角形三条边，利用画笔mPaint画出来 canvas.restore(); }查看全部
-
绘制三角形指示器 1.思路 （1）三角形的宽度和高度 当控件的宽高发生变化时，会回调ViewGroup的onSizeChanged()方法，所以会在这里决定三角形的宽高 （2）绘制三角形的操作要在dispatchDraw()方法中实现 2.遵循以上的思路 （1）绘制三角形所需要的变量 private Paint mPaint; // 画笔 private Path mPath; // 三角形由三条线组成的闭合区域 private int mTriangleWidth; // 三角形宽度 private int mTriangleHeight; // 三角形高度 private static final float RADIO_TRIANGLE_WIDTH = 1/6; // 三角形宽度占每个tab宽度的1/6 private int mInitTranslationX; // 三角形初始位置在tab中间 private int mTranslationX; // 三角形移动宽度 （2）onSizeChanged()要初始化三角形的宽高，并画出三角形区域 protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mTriangleWidth = (int) (w / 3 * RADIO_TRIANGLE_WIDTH); mTriangleHeight = mTriangleWidth / 2; // 等腰三角形，高度是底边的一半 mInitTranslationX = w / 2 - mTriangleWidth /2; initTriangle(); } （3）三角形区域使用Path来画initTriangle() mPath = new Path(); mPath.moveTo(0, 0); mPath.lineTo(mTriangleWidth, 0); mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight); //Y轴向下为正，向上为负 mPath.close();查看全部
-
布局以及Fragment 1.布局如下： 最外层是竖直方向的LinearLayout，然后是两大部分：ViewPager和ViewPagerIndicator 下一部分是占据大空间的ViewPager，上一部分是由四个TextView组成的水平方向的ViewPagerIndicator 2.Fragment 参考视频可以知道ViewPager部分是由三个Fragment组成的，每个Fragment是字体居中的布局 （1）将Fragment抽象出来是一个SimpleFragment 构造函数只需要传入一个参数——顶部的标题 public static SimpleFragment newInstance(String title){ Bundle bundle = new Bundle(); bundle.putString(BUNDLE_KEY, title); SimpleFragment fragment = new SimpleFragment(); fragment.setArguments(bundle); return fragment; } （2）SimpleFragment的onCreateView()呈现（见图） 通过前面构造函数中设置给fragment的bundle，取出title字串来设置显示内容 3.MainActivity中初始化数据 private void initDatas() { for (String title: mTitles){ SimpleFragment simpleFragment = SimpleFragment.newInstance(title); mFragments.add(simpleFragment); } mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { public Fragment getItem(int position) { return mFragments.get(position); } public int getCount() { return mFragments.size(); } }; }查看全部
-
fragment滑动以及显示效果查看全部
举报
0/150
提交
取消