一、前言
在开发中,我们常常需要ViewPager结合Fragment一起使用,来实现多页签的切换效果。在以前,我们有以下一系列第三方库来帮我们实现:
而现在,我们可以使用Design support library库的TabLayout来实现了。
二、最终效果图
三、TabLayout的使用
1. 添加依赖
由于TabLayout在design包内,所以首先需要在app目录下的build.gradle中添加以下依赖:
dependencies {
...
compile 'com.android.support:design:23.4.0'
}
2. 创建布局
布局相当简单,只要添加TabLayout和ViewPager的布局即可:
layout/activity_main.xml
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/tab_layout"
style="@style/TabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/white"/>
还有其他的属性我习惯在style文件中设置:
values/styles.xml
@color/colorPrimary
@color/colorPrimary
@style/TabTextAppearence
0dp
16sp
false
3. 创建Fragment
package com.sherlockshi.badgedtablayoutpractise;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* Author: SherlockShi
* Date: 2016-11-01 16:31
* Description:
*/
public class PageFragment extends Fragment {
private static final String PAGE_NAME_KEY = "PAGE_NAME_KEY";
public static PageFragment getInstance(String pageName) {
Bundle args = new Bundle();
args.putString(PAGE_NAME_KEY, pageName);
PageFragment pageFragment = new PageFragment();
pageFragment.setArguments(args);
return pageFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
TextView textView = (TextView) view.findViewById(R.id.tv_page_name);
textView.setText(getArguments().getString(PAGE_NAME_KEY));
return view;
}
}
其中Fragment的布局layout/fragment_page.xml:
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tv_page_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
4. ViewPager的适配器
package com.sherlockshi.badgedtablayoutpractise;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Author: SherlockShi
* Date: 2016-11-01 17:38
* Description:
*/
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
private Context mContext;
private List mFragmentList;
private List mPageTitleList;
private List mBadgeCountList;
public SimpleFragmentPagerAdapter(Context context,
FragmentManager fm,
List fragmentList,
List pageTitleList,
List badgeCountList) {
super(fm);
this.mContext = context;
this.mFragmentList = fragmentList;
this.mPageTitleList = pageTitleList;
this.mBadgeCountList = badgeCountList;
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mPageTitleList.get(position);
}
}
5. 设置TabLayout
package com.sherlockshi.badgedtablayoutpractise;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List mPageTitleList = new ArrayList();
private List mFragmentList = new ArrayList();
private List mBadgeCountList = new ArrayList();
private SimpleFragmentPagerAdapter mPagerAdapter;
private TabLayout mTabLayout;
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFragments();
initView();
}
private void initFragments() {
mPageTitleList.add("Tab1");
mPageTitleList.add("Tab2");
mPageTitleList.add("Tab3");
mBadgeCountList.add(6);
mBadgeCountList.add(16);
mBadgeCountList.add(166);
for (int i = 0; i < mPageTitleList.size(); i++) {
mFragmentList.add(PageFragment.getInstance(mPageTitleList.get(i)));
}
}
private void initView() {
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mPagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), mFragmentList, mPageTitleList);
mViewPager.setAdapter(mPagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
initBadgeViews();
setUpTabBadge();
}
}
四、设置角标
1. 添加角标Badge
添加角标的关键代码只需要一行:
mBadgeViews.get(i).setTargetView(((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i));
完整代码只需要在设置完TabLayout和ViewPager后,遍历每一个Tab,为Tab添加角标:
private void setUpTabBadge() {
for (int i = 0; i < mFragmentList.size(); i++) {
mBadgeViews.get(i).setTargetView(((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i));
mBadgeViews.get(i).setText(formatBadgeNumber(mBadgeCountList.get(i)));
}
}
2. 更新角标
在需要更新角标的地方,只要调用以下方法就可实现:
mBadgeCountList.set(1, count++);
setUpTabBadge();
以上,就可以轻松地为TabLayout添加角标,并处理角标的更新了。
五、问题
1. 重复选中的状态
但是如果需要更新角标,那么在更新角标后,再点击另一个Tab,会出现上一个Tab和当前Tab都是选中状态(如下图的Tab1和Tab2):
2. 角标位置不可控
而且如上图所示,角标的位置不好控制,有的离文字很近,有的离得很远,无法精确控制。
六、最实用的TabLayout加角标方法
1. 添加getTabItemView()方法
在重写的FragmentPagerAdapter中添加自定义Tab布局方法:
public View getTabItemView(int position) {
View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout_item, null);
TextView textView = (TextView) view.findViewById(R.id.textview);
textView.setText(mPageTitleList.get(position));
View target = view.findViewById(R.id.badgeview_target);
BadgeView badgeView = new BadgeView(mContext);
badgeView.setTargetView(target);
badgeView.setBadgeMargin(0, 6, 10, 0);
badgeView.setTextSize(10);
badgeView.setText(formatBadgeNumber(mBadgeCountList.get(position)));
return view;
}
对应的自定义布局为:
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="-30dp"
android:textColor="@color/tab_text_color_selector"/>
android:id="@+id/badgeview_target"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="40dp"
android:layout_marginLeft="4dp"
android:layout_gravity="center"/>
2. 设置自定义布局
private void setUpTabBadge() {
for (int i = 0; i < mFragmentList.size(); i++) {
TabLayout.Tab tab = mTabLayout.getTabAt(i);
// 更新Badge前,先remove原来的customView,否则Badge无法更新
View customView = tab.getCustomView();
if (customView != null) {
ViewParent parent = customView.getParent();
if (parent != null) {
((ViewGroup) parent).removeView(customView);
}
}
// 更新CustomView
tab.setCustomView(mPagerAdapter.getTabItemView(i));
}
// 需加上以下代码,不然会出现更新Tab角标后,选中的Tab字体颜色不是选中状态的颜色
mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true);
}
上面的示例会有两个坑:
一个坑是每次为TabLayout添加Badge后,会出现Tab的字体颜色不是选中状态的颜色,需要手动设置Tab为选中状态,可以参考上面的第19行代码解决,这应该是TabLayout的一个Bug;
另一个坑是如果每次更新Badge的时候,直接重新tab.setCustomView的话,会出现Badge不更新,解决办法是先移除之前的自定义布局,然后再重新设置布局,具体可参考第6-12行代码解决。
七、总结
以上是自己在使用TabLayout的过程中发现的一些问题及解决办法,如果大家有更好的解决方法,或者还有别的坑,欢迎留言。
当然,大家也可以直接使用第三方控件来实现以上功能,现在主流的几个控件也都做得很好,也很省心。
八、参考资料