Android中使用TabLayout实现Tab

高斋晓开卷,独共圣人语。这篇文章主要讲述Android中使用TabLayout实现Tab相关的知识,希望能为你提供帮助。
一、需求
      activity + fragment实现tab,并可以滑动切换tab。
需要导入compile \'com.android.support:design:25.3.1\'
二、layout实现

< LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

< android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>

< TextView
android:id="@+id/intervalText1"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/colorTextDivider"/>

< android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_tab_height"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorColor="@color/primary"
app:tabIndicatorHeight="@dimen/dimen_line"/>

< /LinearLayout>

三、activity + fragment
1、activity实现
public class MainActivity extends AppCompatActivity {

private static final String TAB_TITLE_SALE = "SALE";
private static final String TAB_TITLE_CART = "CART";
private static final String TAB_TITLE_REPORT = "REPORT";
private static final String TAB_TITLE_SETUP = "SETUP";

private static final String TAB_TITLE = "TAB_TITLE";
private static final String TAB_IMAGE = "TAB_IMAGE";

private List< Map< String, Object> > tabResourcesList = new ArrayList< > ();
private List< Fragment> fragments;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initData();
initFragment();
initView();
}

/**
* 初始化跟ViewPager、TabLayout中数据有关的数据
*/
private void initData() {
// 初始化Tablayout中展示的标题
addTabResources(TAB_TITLE_SALE, R.drawable.tab_sale);
addTabResources(TAB_TITLE_CART, R.drawable.tab_cart);
addTabResources(TAB_TITLE_REPORT, R.drawable.tab_report);
addTabResources(TAB_TITLE_SETUP, R.drawable.tab_setup);
}

private void addTabResources(String title, Integer image) {
Map< String, Object> map = new HashMap< > ();
map.put(TAB_TITLE, title);
map.put(TAB_IMAGE, image);
tabResourcesList.add(map);
}

private void initFragment() {
// 初始化Fragment集合
fragments = new ArrayList< > ();
SaleFragment saleFragment = new SaleFragment();
fragments.add(saleFragment);
CartFragment cartFragment = new CartFragment();
fragments.add(cartFragment);
ReportFragment reportFragment = new ReportFragment();
fragments.add(reportFragment);
SetupFragment setupFragment = new SetupFragment();
fragments.add(setupFragment);
}

private void initView() {
TabLayout tabs = (TabLayout) findViewById(R.id.tablayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.vp);

CustomPagerAdapter customPagerAdapter = new CustomPagerAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(customPagerAdapter);
tabs.setupWithViewPager(viewPager);
// TabLayout中Tab的排列方式,FIXED表示平分布局;SCROLLABLE表示线性排列,可滑动
tabs.setTabMode(TabLayout.MODE_FIXED);

for (int i = 0; i < tabResourcesList.size(); i++) {
tabs.getTabAt(i).setCustomView(getTabView(tabResourcesList.get(i).get(TAB_TITLE).toString(),
tabResourcesList.get(i).get(TAB_IMAGE).hashCode()));
}
}

private View getTabView(String title, int resId) {
View newTabView = LayoutInflater.from(this).inflate(R.layout.tab_item_view, null);
ImageView tabIcon = (ImageView) newTabView.findViewById(R.id.tabIcon);
tabIcon.setImageResource(resId);
TextView tabTitle = (TextView) newTabView.findViewById(R.id.tabText);
tabTitle.setText(title);
return newTabView;
}
}

2、适配器的实现实现activity和fragment的绑定。
public class CustomPagerAdapter extends FragmentPagerAdapter {

private List< Fragment> fragments;

public CustomPagerAdapter(FragmentManager fragmentManager, List< Fragment> fragments) {
super(fragmentManager);
this.fragments = fragments;
}

@Override
public int getCount() {
return fragments.size(); //页卡数
}

@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
}

3、fragment实现每次切换tab刷新界面,定义了BaseFragment,避免重复代码。
定义了四个fragment继承BaseFragment,四个fragment对应四个不同的layout文件。
【Android中使用TabLayout实现Tab】
Android中使用TabLayout实现Tab

文章图片
 
Android中使用TabLayout实现Tab

文章图片

public abstract class BaseFragment extends Fragment {

protected View rootView;
protected boolean isVisible;
private boolean isReady = false;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

if (rootView == null) {
rootView = inflater.inflate(getLayoutId(), container, false);
isReady = true;
delayLoad();
}

// remove rootView from its parent
ViewGroup parent = (ViewGroup) rootView.getParent();
if (parent != null) {
parent.removeView(rootView);
}
return rootView;
}

private void delayLoad() {
if (!isReady || !isVisible) {
return;
}

initData();
initView(rootView);
setListener();
}

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
if (getUserVisibleHint()) {
isVisible = true;
delayLoad();
} else {
isVisible = false;
}
}

protected abstract int getLayoutId();

protected abstract void initData();

protected abstract void initView(View view);

protected abstract void setListener();
}


    推荐阅读