Android TabLayout 使用进阶（含源码），《Android面试题及解析》分享

this.titleArr = titleArr;

}

@Override

public Fragment getItem(int i) {

return mFragmentList.get(i);

}

@Override

public int getCount() {

return mFragmentList != null ? mFragmentList.size() : 0;

}

@Nullable

@Override

public CharSequence getPageTitle(int position) {

return titleArr[position];

}

@Override

public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {

// super.destroyItem(container, position, object);

}

}

③ 编码运行

现在都具备了，回到ClassificationActivity中，修改代码如下：

package com.llw.tablayoutdemo.mode2;

import androidx.appcompat.app.AppCompatActivity;

import androidx.fragment.app.Fragment;

import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

import com.llw.tablayoutdemo.R;

import com.llw.tablayoutdemo.adapter.BasicFragmentAdapter;

import java.util.ArrayList;

import java.util.List;

/**

• 分类页面 ；TabLayout + ViewPager + Fragment

• @author llw

*/

public class ClassificationActivity extends AppCompatActivity {

private TabLayout tabLayout;

private ViewPager viewPager;

String[] titleArray = new String[]{“电视剧”, “电影”, “综艺”, “体育”, “新闻”, “国际”};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_classification);

tabLayout = findViewById(R.id.tab_layout);

viewPager = findViewById(R.id.view_pager);

List fragmentList = new ArrayList<>();

fragmentList.add(new TVSeriesFragment());

fragmentList.add(new MovieFragment());

fragmentList.add(new VarietyShowFragment());

fragmentList.add(new SportsFragment());

fragmentList.add(new NewsFragment());

fragmentList.add(new InternationalFragment());

BasicFragmentAdapter adapter = new BasicFragmentAdapter(getSupportFragmentManager(), fragmentList, titleArray);

viewPager.setAdapter(adapter);

tabLayout.setupWithViewPager(viewPager);

}

}

可以看到代码不多，下面运行一下吧。对了，还缺少一个页面入口，修改activity_main.xml，在里面增加一个按钮。

<Button

android:text=“分类页面：TabLayout + ViewPager + Fragment”

android:onClick=“mode2”

android:textAllCaps=“false”

android:layout_width=“match_parent”

android:layout_height=“50dp”/>

然后在MainActivity中增加一个方法。

/**

• 组合使用 分类页面 ；TabLayout + ViewPager + Fragment

• @param view

*/

public void mode2(View view) { startActivity(new Intent(this, ClassificationActivity.class)); }

现在可以运行了。

不过这个文字并没有放大，那么再来设置一下，这里通过TextView来实现，在layout下新建一个tab_item.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=“wrap_content”

android:orientation=“vertical”>

<TextView

android:id=“@+id/tv_title”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center”

android:gravity=“center”

android:textColor=“#333333”

android:textSize=“14sp” />

然后在ClassificationActivity中增加如下方法。

/**

• 初始化TabLayout

*/

private void initTabLayout() {

for (int i = 0; i < tabLayout.getTabCount(); i++) {

TabLayout.Tab tab = tabLayout.getTabAt(i);

if (tab != null) {

//设置标签视图 为 TextView

tab.setCustomView(getTabView(i));

}

}

updateTabText(tabLayout.getTabAt(tabLayout.getSelectedTabPosition()), true);

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

@Override

public void onTabSelected(TabLayout.Tab tab) {

updateTabText(tab,true);

}

@Override

public void onTabUnselected(TabLayout.Tab tab) {

updateTabText(tab,false);

}

@Override

public void onTabReselected(TabLayout.Tab tab) {

}

});

}

/**

• 获取TabView

• @param currentPosition

• @return

*/

private View getTabView(int currentPosition) {

View view = LayoutInflater.from(this).inflate(R.layout.tab_item, null);

TextView textView = view.findViewById(R.id.tv_title);

textView.setText(titleArray[currentPosition]);

return view;

}

/**

• 更新标签文字

• @param tab

• @param isSelect

*/

private void updateTabText(TabLayout.Tab tab, boolean isSelect) {

if (isSelect) {

//选中文字加大加粗

TextView tabSelect = tab.getCustomView().findViewById(R.id.tv_title);

tabSelect.setTextSize(22);

tabSelect.setTextColor(Color.parseColor(“#00FF00”));

tabSelect.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));

tabSelect.setText(tab.getText());

} else {

TextView tabUnSelect = tab.getCustomView().findViewById(R.id.tv_title);

tabUnSelect.setTextSize(14);

tabUnSelect.setTextColor(Color.BLACK);

tabUnSelect.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));

tabUnSelect.setText(tab.getText());

}

}

最后调用在onCreate方法中调用initTabLayout()方法。

运行一下：

嗯，这个效果还是阔以滴。

三、App主页面 （TabLayout + TabItem + ViewPager + Fragment）

---

现在常规的App主页面都是底部有几个菜单，4个或者5个。通讯类的基本上是4个，如果QQ、微信。购物类的基本上是5个，如果淘宝、天猫、京东等。至于有几个我们不管，主要是怎么去实现这个主页面的菜单切换。这里的实现方式其实有很多，而文本以TabLayout为主，那么自然是以TabLayout来现实了，就如我标题上说的一样，用到了，TabLayout + TabItem + ViewPager + Fragment。

① 选中图标

下面就来看看具体怎么去做吧。

这里是第三个使用方式了，那么在com.llw.tablayoutdemo包下新建一个mode3包，这个包下新建一个HomeActivity，用来作为App的主页面，然后它的布局activity_home.xml是有一点点麻烦的。里面会用到8个图标。

将图标放到layout下的drawable文件夹中。

然后在这个文件夹下新建四个xml文件，分别是：

app_home.xml

<?xml version="1.0" encoding="utf-8"?>

app_search.xml

<?xml version="1.0" encoding="utf-8"?>

app_find.xml

<?xml version="1.0" encoding="utf-8"?>

app_mine.xml

<?xml version="1.0" encoding="utf-8"?>

下面来写activity_home.xml，里面的代码如下：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app