Android之TabLayout使用和默认选中+移动(解决)

Android之TabLayout使用和默认选中+移动


文章链接:http://blog.csdn.net/qq_16628781/article/details/62430662


知识点:

1、TabLayout的静态使用;

2、TabLayout动态加入tab;

3、默认选中某一个tab,并移动到选中的tab位置;

4、新名词记录

{

Tab

smoothScrollTo()/scrollTo():滚动的方法

.getResources().getDisplayMetrics().density:获取屏幕密度

}


关于MD设计,估计大家已经听说不少了吧。我在这里就不多讲了。有兴趣的大家去搜索看看。

这里要讲的是TabLayout的介绍和使用。tab在APP中随处可见,实现这个有N多的方法。在5.0之后,Google看到很多很好的控件,已将它们纳入自己的门下,放到支持包中共开发者使用,tablayout就是其中一个,然后Google优化了下他,加入了5.0控件响应的效果,反正是好看多了。下面我们来看看如何使用


要使用TabLayout控件,需要在build.gradle文件的dependencies{}下加入以下代码:

compile ‘com.android.support:design:24.0.0'

这个控件在android.support.design.widget.TabLayout包下面,使用方法也是有两种,一个是在XML中设置,另外一个就是代码动态加入。下面我们分别来看。

首先是布局中使用,我们只要关注他们的属性就可以了,当然这个只是适用于tab数量固定的情况。但是对于我们想要动态的加入呢,这个也是很简单的。




    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

        

        
    

效果图如下

Android之TabLayout使用和默认选中+移动(解决)_第1张图片

代码来控制tab的加入,以及其它使用方法。

这里我遇到了一个问题,那就是我的tab的数量动态加入了M个,但需要选中第N个的tab,选是选中了{TabLayout.getTabAt(index).select()},

BUT选中的那个tab无法移动可见的区域中来。我查看了API源码,发现Google没有给我们一个类似于TabLayout.selectTabAtPosition(int position)这样可以选择position位置的函数(这是怎么回事???都提供了这么方便的一个控件,为毛不提供多一个方法,多方便啊!!!)。

说多了都是泪,最后还是找到了一个方法,自己来计算要移动的距离。

基本思路是:获取选中的tab的下标index,然后计算从第一个tab到第index个tab的距离,然后调用smoothScrollTo()/scrollTo()方法。OK搞定。具体的操作都在代码里头有解释了,请查看代码。


private void addNewTab() {
        //TabLayout tl_fTabChartP = findViewById(...);

        /*新增tab有以下几个方法:
        public void addTab(@NonNull Tab tab) {}
        public void addTab(@NonNull Tab tab, boolean setSelected) {}
        public void addTab(@NonNull Tab tab, int position, boolean setSelected) {}
        参数tab:要加入的tab
        参数setSelected:是否选中此tab
        参数position:在position的位置加入此tab
        */
        /*Tab属性:
        TabLayout.Tab tab = tl_fTabChartP.newTab();
        tab.setText("图表");
        tab.setCustomView(); //设置自定义的视图
        tab.setIcon(); //设置icon
        tab.setTag(); //设置tag
        * */
        /*TabLayout属性:
        tl_fTabChartP.removeAllTabs(); //移除所有的tab
        tl_fTabChartP.getTabAt(0); //根据index得到tab
        tl_fTabChartP.getSelectedTabPosition(); //得到选中的tab的position
        tl_fTabChartP.addView(); //加入view
        * */
        TabLayout.Tab tab = tl_fTabChartP.newTab();
        tab.setText("图表");
        tl_fTabChartP.addTab(tab);
        tl_fTabChartP.addTab(tl_fTabChartP.newTab().setText("图表"));
        tl_fTabChartP.getTabCount(); //返回当前加入到tablayout的tab的数量
        tl_fTabChartP.getChildCount(); //返回在tablayout中的view的数量,和getTabCount()的区别尚待考察,只要先知道getTabCount()的就好了
        //增加监听方法
        tl_fTabChartP.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //新的tab被选中是做的操作
                tab.getPosition(); //获取点击的tab所在的position,可以用来做index的依据
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //点击下一个tab之后,上一个tab退出被选中状态之前需要做的动作
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //当同一个tab被重新点击是触发的方法
            }
        });

        /**
         * 我想讲的是这里,
         * 这里设想一种情况,我们从后台返回了30个词条,然后都需要加入到tablayout中,作为一个tab供用户选择,
         * 利用for循环依次取出,再new tab.settext(),在add()进去就OK了。
         * 然后我们想要固定选择第N个tab,这时候,我们该如何来做呢?
         * 在tablayout里头,我没有看到直接让我们选中某一个的方法,真的看死了都没有看到。
         *
         * 但是,tablayout里头提供了一个方法.scrollTo(x, y)/.smoothScrollTo()
         * 这个方法说的是:我们可以是tablayout滚动并固定在一个view(tab)的边界
         * 参数1:x轴方向需要滚动的距离
         * 参数2:y轴方向需要滚动的距离
         * 但是这里有一个问题,我们如何知道应该要滚动多少的距离呢?
         * 思路:首先得知道应该滚动到tab的下标,然后计算这个距离,这个距离是和第1个tab的距离,
         * 最后调用这个方法,滚动到计算好的位置去,就实现了。
         *
         * 下面是这边的方法
         */
        int currentSelectPos = 1; //自己写的一个
        int index = currentSelectPos - 1;
        recomputeTlOffset1(index);
    }


/**
     * 重新计算需要滚动的距离
     *
     * @param index 选择的tab的下标
     */
    private void recomputeTlOffset1(int index) {
        if (tl_fTabChartP.getTabAt(index) != null) tl_fTabChartP.getTabAt(index).select();
        final int width = (int) (getTablayoutOffsetWidth(index) * mFinanceActivity.getResources().getDisplayMetrics().density);
        tl_fTabChartP.post(new Runnable() {
            @Override
            public void run() {
                tl_fTabChartP.smoothScrollTo(width, 0);
            }
        });
    }


//重中之重是这个计算偏移量的方法,各位看官看好了。
/**
     * 根据字符个数计算偏移量
     *
     * @param index 选中tab的下标
     * @return 需要移动的长度
     */
    private int getTablayoutOffsetWidth(int index) {
        String str = "";
        for (int i = 0; i < index; i++) {
            //channelNameList是一个List的对象,里面转载的是30个词条
            //取出直到index的tab的文字,计算长度
            str += channelNameList.get(i);
        }
        return str.length() * 14 + index * 12;
    }
以上就是实现的方法,亲测有用!!!

如有任何疑问,请及时与我联系,谢谢!



你可能感兴趣的:(Android控件)