tabhost+滚动条的效果实现

最新推荐文章于 2022-02-13 23:28:09 发布

AI吃梨

最新推荐文章于 2022-02-13 23:28:09 发布

阅读量582

点赞数

欢迎转发、分享，更欢喜得到鼓励。

本文链接：https://blog.youkuaiyun.com/Love_horse/article/details/50669158

版权

方案1:

tabhost+viewPager
参考连接：
http://blog.youkuaiyun.com/qjlhlh/article/details/7788444
github上有更强大，以封装好的相关类库
连接为：https://github.com/LuckyJayce/ViewPagerIndicator

方案2：

在tabhost所在xml写一个View占位符，摆在tabhost之上；
根据选项卡的个数代码计算占位符宽度；
关键代码：
代码计算滚动条宽度：

/**
     * 初始滚动条长度
     */
    private void InitImageView() {
        topSelect = (ImageView) findViewById(R.id.tab_top_select);
        //有几张图片就让其便宜屏幕的多少分之一
        int screenW = ((WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getWidth();
        int offset = screenW / 4;// 计算偏移量
        Matrix matrix = new Matrix();
        matrix.postTranslate(0, 0);
        topSelect.setImageMatrix(matrix);// 设置动画初始位置
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) topSelect.getLayoutParams();
        params.width = offset;
        topSelect.setLayoutParams(params);
    }

在tabhost切换时执行

/**
     * 移动tab选中标识图片
     *
     * @param selectIndex
     */
    public void moveTopSelect(int selectIndex) {
// 起始位置中心点
        TabWidget tabwidget = mFragmentTabHost.getTabWidget();
        int startMid = ((View) tabwidget.getChildAt(mCurSelectTabIndex)).getLeft() +
                ((View) tabwidget.getChildAt(mCurSelectTabIndex)).getWidth() / 2;
// 起始位置左边位置坐标
        int startLeft = startMid - topSelect.getWidth() / 2;
// 目标位置中心点
        int endMid = ((View) tabwidget.getChildAt(selectIndex)).getLeft() +
                ((View) tabwidget.getChildAt(selectIndex)).getWidth() / 2;
// 目标位置左边位置坐标
        int endLeft = endMid - topSelect.getWidth() / 2;
        TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - topSelect.getLeft(), 0, 0);
        animation.setDuration(200);
        animation.setFillAfter(true);
        topSelect.bringToFront();
        topSelect.startAnimation(animation);
// 改变当前选中按钮索引
        mCurSelectTabIndex = selectIndex;
        Log.i("fs", "endMid " + endMid + " startLeft " + startLeft + " endLeft" + (endLeft - topSelect.getLeft()));
    }

参考连接:
http://blog.youkuaiyun.com/jdsjlzx/article/details/7555408

比较：使用方案1，手势操作也支持，不过给的demo是滚动条向下的；
方案2，手势操作需要另加，滚动条调位置比较方便