当前位置：首页 > news >正文

Android 实现首页Tab切换并且支持懒加载功能详解

news 2025/6/29 3:55:27

1. 添加依赖

在 build.gradle 文件中添加以下依赖：

implementation 'androidx.viewpager2:viewpager2:1.1.0-beta01'
implementation 'com.google.android.material:material:1.6.1'

2. 布局文件

在 res/layout/activity_main.xml 中创建主界面布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabGravity="fill"app:tabMode="fixed" /><androidx.viewpager2.widget.ViewPager2android:id="@+id/viewPager2"android:layout_width="match_parent"android:layout_height="match_parent" />
</LinearLayout>

3. 创建 Fragment

创建多个 Fragment 用于展示不同的页面内容，以 HomeFragment 为例：

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;public class HomeFragment extends Fragment {private boolean isLoaded = false;@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_home, container, false);}@Overridepublic void onResume() {super.onResume();if (!isLoaded && isVisible()) {loadData();isLoaded = true;}}private void loadData() {// 这里进行数据加载操作，例如网络请求等}
}

对应的 fragment_home.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"><TextViewandroid:text="Home Page"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="24sp" />
</LinearLayout>

4. 创建适配器

创建一个继承自 FragmentStateAdapter 的适配器类：

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;import java.util.ArrayList;
import java.util.List;public class MyFragmentStateAdapter extends FragmentStateAdapter {private final List<Fragment> fragmentList = new ArrayList<>();public MyFragmentStateAdapter(@NonNull FragmentActivity fragmentActivity) {super(fragmentActivity);}public void addFragment(Fragment fragment) {fragmentList.add(fragment);}@NonNull@Overridepublic Fragment createFragment(int position) {return fragmentList.get(position);}@Overridepublic int getItemCount() {return fragmentList.size();}
}

5. 在 MainActivity 中设置 TabLayout 和 ViewPager2

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import android.os.Bundle;
import android.graphics.drawable.Drawable;
import androidx.core.content.ContextCompat;public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;private ViewPager2 viewPager2;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tabLayout = findViewById(R.id.tabLayout);viewPager2 = findViewById(R.id.viewPager2);MyFragmentStateAdapter adapter = new MyFragmentStateAdapter(this);adapter.addFragment(new HomeFragment());adapter.addFragment(new DiscoverFragment());adapter.addFragment(new ProfileFragment());viewPager2.setAdapter(adapter);new TabLayoutMediator(tabLayout, viewPager2, (tab, position) -> {switch (position) {case 0:tab.setText("Home");Drawable homeIcon = ContextCompat.getDrawable(this, R.drawable.ic_home);tab.setIcon(homeIcon);break;case 1:tab.setText("Discover");Drawable discoverIcon = ContextCompat.getDrawable(this, R.drawable.ic_discover);tab.setIcon(discoverIcon);break;case 2:tab.setText("Profile");Drawable profileIcon = ContextCompat.getDrawable(this, R.drawable.ic_profile);tab.setIcon(profileIcon);break;}}).attach();}
}