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数量固定的情况。但是对于我们想要动态的加入呢，这个也是很简单的。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <!--是否可以滚动,默认fixed：app:tabMode="scrollable/fixed"-->    <!--指示器高度：app:tabIndicatorHeight="4dp"-->    <!--底部的横杆指示器的颜色：app:tabIndicatorColor="#3381f5"-->    <!--tab被选中的字体颜色：app:tabSelectedTextColor="#f00"-->    <!--tab默认的字体颜色：app:tabTextColor="#c4bfbf"-->    <!--tab字体的样式：app:tabTextAppearance="@style/MyCustomTabTextAppearance"-->    <!--tablayout的背景色：app:tabBackground="@color/greenLight" 和android:backgroud是一样的效果-->    <!--下面都是tab的padding设置：-->    <!--app:tabPadding="5dp"-->    <!--app:tabPaddingBottom="5dp"-->    <!--app:tabPaddingEnd="5dp"-->    <!--app:tabPaddingStart="5dp"-->    <!--app:tabPaddingTop="5dp"-->    <!--TabLayout布局的位置：app:tabGravity="center/fill" center：整体居中显示；fill：占满父布局，当然还和layout_width相关-->    <!--tablayout距离start的距离：app:tabContentStart="100dp"-->    <!--tab的最大宽度：app:tabMaxWidth="100dp"-->    <!--tab的最小宽度：app:tabMinWidth="50dp"-->    <android.support.design.widget.TabLayout        android:id="@+id/tl_fTabP"        android:layout_width="match_parent"        android:layout_height="40dp"        app:tabBackground="@color/greenLight"        app:tabContentStart="100dp"        app:tabGravity="fill"        app:tabIndicatorColor="#3381f5"        app:tabIndicatorHeight="4dp"        app:tabMaxWidth="100dp"        app:tabMinWidth="50dp"        app:tabMode="scrollable"        app:tabPadding="5dp"        app:tabPaddingBottom="5dp"        app:tabPaddingEnd="5dp"        app:tabPaddingStart="5dp"        app:tabPaddingTop="5dp"        app:tabSelectedTextColor="#f00"        app:tabTextAppearance="@style/MyCustomTabTextAppearance"        app:tabTextColor="#c4bfbf">        <android.support.design.widget.TabItem            android:id="@+id/ti_fTabList"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="列表" />        <android.support.design.widget.TabItem            android:id="@+id/ti_fTabChart"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="图表" />    </android.support.design.widget.TabLayout></LinearLayout>

效果图如下

代码来控制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<String>的对象，里面转载的是30个词条            //取出直到index的tab的文字，计算长度            str += channelNameList.get(i);        }        return str.length() * 14 + index * 12;    }

以上就是实现的方法，亲测有用！！！

如有任何疑问，请及时与我联系，谢谢！