# BliBli

**Repository Path**: BaiLiMY/BliBli

## Basic Information

- **Project Name**: BliBli
- **Description**: Initiate blibli project

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-12-08
- **Last Updated**: 2025-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BliBli

## 功能实现

### 1. ViewPager2 + BottomNavigationView实现导航栏

1. 为每个tab创建fragment，如下所示：
```java
public class HomePageFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.home_page_fragment,container,false);
    }
}
```
注意需要先为每个页面创建好布局。

2. 创建主页面布局。添加Viewpager2和BottomNavigationView控件。如下所示：
```xml
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/homepage_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:layout_constraintBottom_toTopOf="@id/homepage_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/homepage_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/home_page_menu"
        tools:layout_editor_absoluteX="1dp" />
```
BottomNavigationView需要绑定menu。menu的定义如下所示：
```xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_action_home"
        android:title="@string/navigation_home" />

    ……
</menu>
```
3. 创建`FragmentStateAdapter`的子类和ViewPager2绑定。如下所示：
```java
    private class TabsAdapter extends FragmentStateAdapter {
        List<Fragment> fragments;

        public TabsAdapter(FragmentActivity fa, List<Fragment> fragments) {
            super(fa);
            this.fragments = fragments;
        }


        @NonNull
        @Override
        public Fragment createFragment(int position) {
            return fragments.get(position); // 获取每个position的fragment
        }

        @Override
        public int getItemCount() {
            return fragments.size(); // 返回fragment的长度
        }
    }
```
4. 绑定Adapter和ViewPager2.
```java
        TabsAdapter adapter = new TabsAdapter(this, mHomePageFragments);
        mHomePageViewPager.setAdapter(adapter);
```

5. 绑定BottomNavigationView和ViewPager2，使BottomNavigationView中某个tab被选择时，viewpager切换到对应的界面。
```java
mHomePageNavigationView.setOnNavigationItemSelectedListener(item -> {
            switch (item.getItemId()) {
                case R.id.home:
                    mHomePageViewPager.setCurrentItem(0);
                    break;
                case R.id.dynamic_state:
                    mHomePageViewPager.setCurrentItem(1);
                    break;
                case R.id.add:
                    mHomePageViewPager.setCurrentItem(2);
                    break;
                case R.id.vip_chase:
                    mHomePageViewPager.setCurrentItem(3);
                    break;
                case R.id.my:
                    mHomePageViewPager.setCurrentItem(4);
                    break;
                default:
                    break;
            }
            return true;
        });
```

6. 为ViewPager设置页面改变的监听。当页面改变时，修改BottomNavigationView中绑定的menu的值。如下所示：
```java
mHomePageViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                if (mMenuItem == null) {
                    mMenuItem = mHomePageNavigationView.getMenu().getItem(0); // 默认打开第0个tab
                }
                mMenuItem.setChecked(false); // 将上次的选择设置为false，等待下一次选择。
                mMenuItem = mHomePageNavigationView.getMenu().getItem(position);
                mMenuItem.setChecked(true);
                super.onPageSelected(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
```
BottomNavigationView和ViewPager2的作用是相互的。当我们点击BottomNavigationView某个tab时，我们将Viewpager设置
为某个页面。而当Viewpager切换到某个页面之后，我们又通过回调函数改变和BottomNavigationView绑定的菜单的选项。实现
BottomNavigationView中tab的切换效果。