Liên kết Android ViewPager2 + Fragment + BottomNavigationView

Bài viết này chủ yếu giới thiệu ViewPager2 + Fragment + BottomNavigationView Trong bài viết trước, ViewPager2 và Fragment đã được liên kết.

Tổng quan

BottomNavigationView là một điều khiển điều hướng phía dưới. Hiệu ứng cần đạt được bây giờ là trượt Fragment trong ViewPager2 và phần menu của BottomNavigationView phía dưới sẽ được liên kết tương ứng. xem làm thế nào để đạt được nó.

Ý tưởng thực hiện

1. Đưa điều khiển ViewPager2 vào tệp bố cục Hoạt động

2. Viết các tập tin menu và cung cấp chúng cho BottomNavigationView để hiển thị

3. Đưa điều khiển BottomNavigationView vào tệp bố cục Hoạt động

4. Viết Fragment để điền vào ViewPager2

5. Viết Adaptor để triển khai FragmentStateAdapter

6.BottomNavigationView thêm setOnItemSelectedListener để liên kết ViewPager2

7.ViewPager2 thêm registerOnPageChangeCallback để liên kết với BottomNavigationView

Triển khai mã

Hãy triển khai mã từng bước theo các ý tưởng trên.

1. Đưa điều khiển ViewPager2 vào tệp bố cục Hoạt động

2. Viết các tập tin menu và cung cấp cho BottomNavigationView để hiển thị

Tự cấu hình biểu tượng.

3. Đưa điều khiển BottomNavigationView vào tệp bố cục Hoạt động

                        
                          package com.johnny.slzzing; import android.os.Bundle; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import org.w3c.dom.Text; /** * Một lớp con {@link Fragment} đơn giản. * Sử dụng phương thức nhà máy {@link Bottom2Fragment#newInstance} để * tạo một thể hiện của đoạn mã này. */ public class Bottom2Fragment extends Fragment { // TODO: Đổi tên các đối số tham số, chọn tên khớp với // các tham số khởi tạo đoạn mã, ví dụ: ARG_ITEM_NUMBER private static final String ARG_PARAM1 = "param1"; private static final String ARG_PARAM2 = "param2"; // TODO: Đổi tên và thay đổi kiểu tham số private String mParam1; private String mParam2; public Bottom2Fragment() { // Bắt buộc phải có hàm tạo public rỗng } /** * Sử dụng phương thức nhà máy này để tạo một thể hiện mới của * phần này bằng các tham số được cung cấp. * * @param param1 Tham số 1. * @param param2 Tham số 2. * @return Một thể hiện mới của phần Bottom2Fragment. */ // TODO: Đổi tên và thay đổi kiểu và số lượng tham số public static Bottom2Fragment newInstance(String param1, String param2) { Bottom2Fragment fragment = new Bottom2Fragment(); Bundle args = new Bundle(); args.putString(ARG_PARAM1, param1); args.putString(ARG_PARAM2, param2); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mParam1 = getArguments().getString(ARG_PARAM1); mParam2 = getArguments().getString(ARG_PARAM2); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Thổi phồng bố cục cho đoạn mã này return inflater.inflate(R.layout.fragment_bottom2, container, false); } @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); TextView textView = view.findViewById(R.id.textview2); //Không thể sử dụng thuộc tính textView textView.setText(mParam1); } }

                        
                      

fragment_bottom2.xml 。

4. Viết Fragment để điền vào ViewPager2

5. Viết Adaptor để triển khai FragmentStateAdapter

Như đã đề cập ở bài viết trước, hãy kế thừa trực tiếp FragmentStateAdapter.

                        
                          lớp MyViewPager2BottomAdapter mở rộng FragmentStateAdapter { Danh sách fragmentList; công khai MyViewPager2BottomAdapter(@NonNull FragmentActivity fragmentActivity, Danh sách danh sách) { siêu(fragmentActivity); this.fragmentList = danh sách; } @NonNull @Ghi đè công khai Fragment createFragment(int position) { trả về fragmentList.get(position); } @Ghi đè công khai int getItemCount() { trả về fragmentList.size(); } }

                        
                      

6.BottomNavigationView thêm setOnItemSelectedListener để liên kết ViewPager2

phương thức cốt lõi BottomNavigationView.setOnItemSelectedListener.

Triển khai đoạn mã sau trong Hoạt động

                        
                            được bảo vệ void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_pager2_bottom); viewPager2 = findViewById(R.id.viewpager2bottom); bottomNavigationView = findViewById(R.id.bootomnav2); MyViewPager2BottomAdapter myViewPager2BottomAdapter = new MyViewPager2BottomAdapter(this,initFragmentList()); viewPager2.setAdapter(myViewPager2BottomAdapter); // Không có thông tin bottomNavigationView item Thay thế thông tin viewPager2 bằng bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { int itemId = item.getItemId(); switch (itemId){ case R.id.home_item: viewPager2.setCurrentItem(0); break; case R.id.type_item: viewPager2.setCurrentItem(1); break; case R.id.add_item: viewPager2.setCurrentItem(2); break; case R.id.setting_item: viewPager2.setCurrentItem(3); break; } return true; } }); }

                        
                      

7.ViewPager2 thêm registerOnPageChangeCallback để liên kết với BottomNavigationView

                        
                          được bảo vệ void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_pager2_bottom); viewPager2 = findViewById(R.id.viewpager2bottom); bottomNavigationView = findViewById(R.id.bootomnav2); MyViewPager2BottomAdapter myViewPager2BottomAdapter = new MyViewPager2BottomAdapter(this,initFragmentList()); viewPager2.setAdapter(myViewPager2BottomAdapter); bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { int itemId = item.getItemId(); switch (itemId){ trường hợp R.id.home_item: viewPager2.setCurrentItem(0); ngắt; trường hợp R.id.type_item: viewPager2.setCurrentItem(1); ngắt; trường hợp R.id.add_item: viewPager2.setCurrentItem(2); ngắt; trường hợp R.id.setting_item: viewPager2.setCurrentItem(3); ngắt; } trả về true; } }); // Không có mục nào được thêm vào thuộc tính bottomNavigationView selectedItem viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() { @Override public void onPageSelected(int position) { super.onPageSelected(position); switch (position){ trường hợp 0: bottomNavigationView.setSelectedItemId(R.id.home_item); break; trường hợp 1: bottomNavigationView.setSelectedItemId(R.id.type_item); break; trường hợp 2: bottomNavigationView.setSelectedItemId(R.id.add_item); break; trường hợp 3: bottomNavigationView.setSelectedItemId(R.id.setting_item); break; } } }); }

                        
                      

Tóm tắt

Bài viết này chủ yếu giới thiệu cách tích hợp ViewPager2 + Fragment + BottomNavigationView và hiện thực hóa mối liên kết hai chiều giữa ViewPager2 và BottomNavigationView.

Một số khác biệt giữa ViewPager và ViewPager2

• Bộ điều hợp của ViewPager kế thừa FragmentStatePagerAdapter và Bộ điều hợp của ViewPager2 kế thừa FragmentStateAdapter
• Trình nghe trượt của ViewPager là phương thức viewPager.addOnPageChangeListener và trình nghe trượt của ViewPager2 là phương thức registerOnPageChangeCallback.

Mọi người đều có thể ghé thăm blog cá nhân của tôi, Johnny's Hut. Chào mừng bạn đến theo dõi tài khoản công khai cá nhân của tôi.

Cuối cùng, bài viết về liên kết AndroidViewPager2+Fragment+BottomNavigationView kết thúc tại đây. Nếu bạn muốn biết thêm về liên kết AndroidViewPager2+Fragment+BottomNavigationView, vui lòng tìm kiếm các bài viết về CFSDN hoặc tiếp tục duyệt các bài viết liên quan. blog! .