Android-TabLayout使用小结

TabLayout是Google发布的Android Support Design库里的一个控件，它控件非常强大，既可以用来实现TabPageIndicator的效果，也可以作为底部导航条使用。下面将来详细讲述一下它的用法:

1.TabLayout实现TabPageIndicator效果

核心代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_vpager);
viewPager = (ViewPager)findViewById(R.id.viewPager);
tabLayout = (TabLayout)findViewById(R.id.tab_layout);

fragments[0] = new HomeFragment();
fragments[1] = new MessageFragment();
fragments[2] = new PlayerFragment();
fragments[3] = new MineFragment();

/**
* 切忌不可这样写：
* tabLayout.addTab(tabLayout.newTab().setText("xxx"));
* 否则文字将显示不出来
**/
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());

adapter = new PagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setText("首页");
tabLayout.getTabAt(1).setText("消息");
tabLayout.getTabAt(2).setText("视频");
tabLayout.getTabAt(3).setText("我的");
}

private class PagerAdapter extends FragmentPagerAdapter {

public PagerAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int position) {
return fragments[position];
}

@Override
public int getCount() {
return fragments.length;
}
}

2.TabLayout+Fragment实现页面切换效果:

核心代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_frag);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);

fragments[0] = new HomeFragment();
fragments[1] = new MessageFragment();
fragments[2] = new PlayerFragment();
fragments[3] = new MineFragment();

tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_tablayout));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_tablayout));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_tablayout));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_tablayout));

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {

onItemSelected(tab.getPosition());
onItemSelectedState(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});

setTabTitles();
onItemSelected(0);
onItemSelectedState(0);
}

private void onItemSelected(int position) {
FragmentManager manager = getSupportFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
transaction.replace(R.id.container, fragments[position]);
transaction.commit();
}

private void onItemSelectedState(int position) {
clearTabItemSelectedState();
View itemView = tabLayout.getTabAt(position).getCustomView();
ImageView imageView = (ImageView)itemView.findViewById(R.id.item_image);
TextView name = (TextView)itemView.findViewById(R.id.item_name);
imageView.setImageResource(drawablesSelected[position]);
name.setTextColor(getResources().getColor(R.color.colorSelected));
}

private void clearTabItemSelectedState() {
for (int i = 0; i < tabLayout.getTabCount(); i++) {
View itemView = tabLayout.getTabAt(i).getCustomView();
ImageView imageView = (ImageView) itemView.findViewById(R.id.item_image);
TextView name = (TextView)itemView.findViewById(R.id.item_name);
imageView.setImageResource(drawables[i]);
name.setTextColor(getResources().getColor(R.color.colorNormal));
}
}

private void setTabTitles() {
for (int i = 0; i < 4; i++) {
View itemView = tabLayout.getTabAt(i).getCustomView();
ImageView imageView = (ImageView) itemView.findViewById(R.id.item_image);
TextView tvName = (TextView) itemView.findViewById(R.id.item_name);
tvName.setText(names[i]);
imageView.setImageResource(drawables[i]);
}
}

完整代码：http://download.csdn.net/detail/y472360651/9842376