TabLayout的两种常见设计布局：
- 顶部标签页（如今日头条，知乎）
- 底部菜单栏（如微信主界面）
其中上一篇文章中讲到了Android Design新控件之TabLaout（一），快速打造一个滑动标签页，接着接着举例使用TabLayout+ViewPager来简单实现一个类似于微信等App底部菜单栏布局，此文章已经同步到CSDN啦，欢迎访问我的博客
按照惯例，我们先来看看简单的效果图：
这里写图片描述
1、和上一篇文章一样，我们需要在应用的build.gradle中添加support:design支持库
compile 'com.android.support:design:23.1.1'
2、创建activity_main.xml文件，在布局文件中添加TabLayout和ViewPager
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#bebebe" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/white" />
</LinearLayout>
3、创建适配器FragmentAdapter.class
package com.per.tablayoutdome;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.List;
/**
* 适配器
* Created by lijuan on 2016/8/23.
*/
public class FragmentAdapter extends FragmentStatePagerAdapter {
public List<Fragment> list;
private List<String> titles;
/**
* 构造方法
*/
public FragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> titles) {
super(fm);
this.list = list;
this.titles = titles;
}
/**
* 返回显示的Fragment总数
*/
@Override
public int getCount() {
return list.size();
}
/**
* 返回要显示的Fragment的某个实例
*/
@Override
public Fragment getItem(int position) {
return list.get(position);
}
/**
* 返回每个Tab的标题
*/
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}
4、选项卡页面TabFragment.class
package com.per.tablayoutdome;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* Created by lijuan on 2016/8/23.
*/
public class TabFragment extends Fragment {
private TextView textView;
public static TabFragment newInstance(int index){
Bundle bundle = new Bundle();
bundle.putInt("index", 'A' + index);
TabFragment fragment = new TabFragment();
fragment.setArguments(bundle);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab_fragment, null);
textView = (TextView) view.findViewById(R.id.text);
textView.setText(String.valueOf((char) getArguments().getInt("index")));
return view;
}
}
5、选项卡布局文件tab_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="@color/colorAccent"
android:textSize="75dp" />
</RelativeLayout>
6、主页面中MainActivity.class
package com.per.tablayoutdome;
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.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/**
* 主页面
* Created by lijuan on 2016/8/23.
*/
public class MainActivity extends AppCompatActivity {
private String[] titles = new String[]{"微信", "通讯录", "发现", "我"};
private TabLayout mTabLayout;
private ViewPager mViewPager;
private FragmentAdapter adapter;
//ViewPage选项卡页面集合
private List<Fragment> mFragments;
//Tab标题集合
private List<String> mTitles;
/**
* 图片数组
*/
private int[] mImgs=new int[]{R.drawable.selector_tab_weixin, R.drawable.selector_tab_friends, R.drawable.selector_tab_find,
R.drawable.selector_tab_me};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mTitles = new ArrayList<>();
for (int i = 0; i < 4; i++) {
mTitles.add(titles[i]);
}
mFragments = new ArrayList<>();
for (int i = 0; i < mTitles.size(); i++) {
mFragments.add(TabFragment.newInstance(i));
}
adapter = new FragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);
mViewPager.setAdapter(adapter);//给ViewPager设置适配器
mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来
mTabLayout.setSelectedTabIndicatorHeight(0);
for (int i = 0; i < mTitles.size(); i++) {
//获得到对应位置的Tab
TabLayout.Tab itemTab = mTabLayout.getTabAt(i);
if (itemTab != null) {
//设置自定义的标题
itemTab.setCustomView(R.layout.item_tab);
TextView textView = (TextView) itemTab.getCustomView().findViewById(R.id.tv_name);
textView.setText(mTitles.get(i));
ImageView imageView= (ImageView) itemTab.getCustomView().findViewById(R.id.iv_img);
imageView.setImageResource(mImgs[i]);
}
}
mTabLayout.getTabAt(0).getCustomView().setSelected(true);
}
}
其中需要注意几点：
（1）mTabLayout.setSelectedTabIndicatorHeight(0);是为了不显示tab底部的横线；
（2）系统默认的TabLayout模式是MODE_FIXED，让底部tab布局不可滑动；
（3）itemTab.setCustomView(R.layout.item_tab);用于设置自定义的标题
本片文章主要是的功能是TabLayout的Title使用自定义Layout，以上的代码和上一篇文章差不多，下面我们根据需求自己添加Layout文件。
7、item_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_img"
android:layout_width="26dp"
android:layout_height="26dp" />
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/selector_blue" />
</LinearLayout>
好了，本篇文章已经全部写完了，存在总结不到位的地方还望指导，感谢_
网友评论