-
动态添加tab 1.思路 在MainActivity中通过titles来动态生成ViewPagerIndicator中的tab，同时可以动态设置可见tab的数量 这样做可以避免写很长的xml布局代码，同时避免tab title和ViewPager中fragment可能不匹配的问题 2.实现 （1）把布局中的textview都删掉，动态生成 （2）设置list来动态添加tab的代码 public void setTabItemTiles(List<String> tiles) { if (tiles != null && tiles.size() > 0) { this.removeAllViews(); for (String tile: tiles) { addView(generateView(tile)); } } } private View generateView(String tile) { TextView view = new TextView(getContext()); LayoutParams lp = new LinearLayout.LayoutParams(...); lp.width = getScreenWidth()/mTabVisibleCount; view.setText(tile); view.setGravity(Gravity.CENTER); view.setTextColor(0xCCFFFFFF); view.setLayoutParams(lp); return view; } （3）MainActivity中传入mTitles mIndicator.setTabItemTiles(mTitles); 3.注意 （1）如果想要在MainActivity为indicator设置可见tab数量，必须要在动态设置tab之前 （2）onFinishInflate()这个方法没用了 它是在inflating xml的最后调用，这个时候子view是空的 （3）自定义的可见tab数量也没用 因为xml定义的tab数量也是在inflating xml时调用，之后被改变了查看全部
-
布局： 顶部使用水平方向的LinearLayout 正文部分使用ViewPager+Fragment查看全部
-
自定义ViewPager指示器 本课可以学到： 1、自定义ViewPagerIndictor 2、合理计算滑动位置 3、Fragment+ViewPager经典使用方法查看全部
-
联动（下） 1.思路 需要让这个ViewPagerIndicator的view在滑动到不可见tab时往左移动。 整个ViewPager向左滑动时，本身的onPageScrolled()被调用，获得position和offset，进而去执行mIndicator.scroll()，实现三角指针的向右移动。所以要在indicator.scroll()方法加入整个Indicator的view向左移动的操作 2.（1）当指针移动到可见tab的倒数第2个——position>＝可见数量-2时，就需要移动indicator的view了 （2）移动多少距离呢？因为要减掉前面的tab，所以是position-(可见数量-2) （3）移动到所有子view的倒数第2个，也就是position＝子view数量-2时，indicator的view不用动了，要移动三角指针 （4）public void scroll(int position, float offset) { int tabWidth = getWidth() / mTabVisibleCount; mTranslationX = (int) (tabWidth * offset + tabWidth * position); if ((position >= (mTabVisibleCount - 2)) && position < getChildCount() - 2 && offset > 0 && getChildCount() > mTabVisibleCount) { if (mTabVisibleCount == 1){ this.scrollTo((int) (tabWidth * offset + tabWidth * position), 0); } else { this.scrollTo((position - (mTabVisibleCount - 2)) * tabWidth + (int) (tabWidth * offset), 0); } } invalidate(); } （5）三角指针的mTranslationX一直在变大，为什么它没动？其实它动了，你懂的查看全部
-
联动（上） 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的数量也相应改变查看全部
-
移动指示器——三角形指示器随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）在绘制三角形之前要初始化画笔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滑动以及显示效果查看全部
-
我们知道Activity重新创建时，会重新构建它所管理的Fragment，原先的Fragment的字段值将会全部丢失，但是通过Fragment.setArguments(Bundle bundle)方法设置的bundle会保留下来。所以尽量使用Fragment.setArguments(Bundle bundle)方式来传递参数查看全部
-
1.Tab导航与ViewPager+Fragment查看全部
-
用Path类构建三角形 Paint 去画 onSizeChanged()取实际大小查看全部
-
刺激查看全部
-
viewpager查看全部
举报
0/150
提交
取消