android.support.design.widget.TabLayout的使用
现在非常流行的是TabLayout+ViewPager+Fragment
1：首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。
布局文件如下：
2：创建几个Fragment
public class NewsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_news, container, false);
return view;
}
}
3：创建适配器
/**
* 此adpter是在一个fragment中切换不同的view，好处是在一个activity中可以取得所有view中的值
* Created by cg on 2015/10/21.
*/
public class viewAdapter extends PagerAdapter {
public List list_view;
private List list_Title; //tab名的列表
private int[] tabImg;
private Context context;
public viewAdapter(Context context,List list_view,List list_Title,int[] tabImg) {
this.list_view = list_view;
this.list_Title = list_Title;
this.tabImg = tabImg;
this.context = context;
}
@Override
public int getCount() {
return list_view.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(list_view.get(position), 0);
return list_view.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView(list_view.get(position));
}
/**
* 此方法是给tablayout中的tab赋值的，就是显示名称,并且给其添加icon的图标
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
//这段被注的代码，是只显示文字，不显示图标
//return list_Title.get(position % list_Title.size());
Drawable dImage = context.getResources().getDrawable(tabImg[position]);
dImage.setBounds(0, 0, dImage.getIntrinsicWidth(), dImage.getIntrinsicHeight());
//这里前面加的空格就是为图片显示
SpannableString sp = new SpannableString(" "+ list_Title.get(position));
ImageSpan imageSpan = new ImageSpan(dImage, ImageSpan.ALIGN_BOTTOM);
sp.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sp;
}
} Fragment适配器：
/**
* 这里使用多个fragment进行切换，好处是每个fragment 都有自己独立的代码
*
*/
public class fragmentAdapter extends FragmentPagerAdapter {
private List list_fragment; //fragment列表
private List list_Title; //tab名的列表
public fragmentAdapter(FragmentManager fm, List list_fragment, List list_Title) {
super(fm);
this.list_fragment = list_fragment;
this.list_Title = list_Title;
}
@Override
public Fragment getItem(int i) {
return list_fragment.get(i);
}
@Override
public int getCount() {
return list_fragment.size();
}
/**
* 此方法是给tablayout中的tab赋值的，就是显示名称
*
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return list_Title.get(position % list_Title.size());
}
}
Fragment布局文件：
MainActivity代码：
public class MainActivity extends ActionBarActivity {
private TabLayout tab_title;
private ViewPager vp_pager;
private List list_title; //tab名称列表
private List listViews;
private List list_fragment;
private View newsView; //定义新闻页面
private View sportView;
private View funView;
private viewAdapter vAdapter; //定义以view为切换的adapter
private fragmentAdapter fAdapter; //定义以fragment为切换的adapter
private NewsFragment nFragment;
private HomeFragment sFragment;
private WordFragment fFragment;
private int[] tabImg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initControls();
viewChanage();
//fragmentChange();
}
/**
* 初始化控件
*/
private void initControls() {
tab_title = (TabLayout) findViewById(R.id.tab_title);
vp_pager = (ViewPager) findViewById(R.id.vp_pager);
//为tabLayout上的图标赋值
tabImg = new int[]{R.drawable.back_3x, R.drawable.btn_oval_withe_shape, R.drawable.loading_anmi_list};
}
/**
* 采用在viewpager中切换 view 的方式,并添加了icon的功能
*/
private void viewChanage() {
listViews = new ArrayList<>();
LayoutInflater mInflater = getLayoutInflater();
newsView = mInflater.inflate(R.layout.fragment_news, null);
sportView = mInflater.inflate(R.layout.fragment_home, null);
funView = mInflater.inflate(R.layout.fragment_word, null);
listViews.add(newsView);
listViews.add(sportView);
listViews.add(funView);
list_title = new ArrayList<>();
list_title.add("新闻");
list_title.add("家庭");
list_title.add("世界");
//设置TabLayout的模式,这里主要是用来显示tab展示的情况的
//TabLayout.MODE_FIXED 各tab平分整个工具栏,如果不设置，则默认就是这个值
//TabLayout.MODE_SCROLLABLE 适用于多tab的，也就是有滚动条的，一行显示不下这些tab可以用这个
// 当然了，你要是想做点特别的，像知乎里就使用的这种效果
tab_title.setTabMode(TabLayout.MODE_FIXED);
//设置tablayout距离上下左右的距离
//tab_title.setPadding(20,20,20,20);
//为TabLayout添加tab名称
tab_title.addTab(tab_title.newTab().setText(list_title.get(0)));
tab_title.addTab(tab_title.newTab().setText(list_title.get(1)));
tab_title.addTab(tab_title.newTab().setText(list_title.get(2)));
vAdapter = new viewAdapter(this, listViews, list_title, tabImg);
vp_pager.setAdapter(vAdapter);
//将tabLayout与viewpager连起来
tab_title.setupWithViewPager(vp_pager);
}
/**
* 采用viewpager中切换fragment
*/
private void fragmentChange() {
list_fragment = new ArrayList<>();
nFragment = new NewsFragment();
sFragment = new HomeFragment();
fFragment = new WordFragment();
list_fragment.add(nFragment);
list_fragment.add(sFragment);
list_fragment.add(fFragment);
list_title = new ArrayList<>();
list_title.add("新闻");
list_title.add("家庭");
list_title.add("世界");
fAdapter = new fragmentAdapter(getSupportFragmentManager(), list_fragment, list_title);
vp_pager.setAdapter(fAdapter);
//将tabLayout与viewpager连起来
tab_title.setupWithViewPager(vp_pager);
}
}
效果如下：
