ViewPager+Fragment+BottomNavigationView

在很多应用中可以同过滑动屏幕来切换页面,在Android开发中咱们可以通过ViewPager和Fragment来实现这一功能,本教程通过 ViewPager+Fragment+BottomNavigationView 来实现底部栏与页面切换

没图说个锤子,咱来看看效果图
截屏

activity_main.xml 布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_above="@id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation" />

</RelativeLayout>

fragment.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:orientation="vertical"
    android:gravity="center">
<TextView
    android:textSize="15sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tv"/>
</LinearLayout>

navigation.xml 代码

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

ViewPagerAdapter 继承自FragmentPagerAdapter

class ViewPagerAdapter extends FragmentPagerAdapter{

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            return fragmentList.get(i);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }
    }

MainActivity.java 完整代码


public class MainActivity extends AppCompatActivity {

    private ViewPager viewpager;
    private BottomNavigationView navigation;
    private List<Fragment> fragmentList = new ArrayList<>();
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    viewpager.setCurrentItem(0);
                    return true;
                case R.id.navigation_dashboard:
                    viewpager.setCurrentItem(1);
                    return true;
                case R.id.navigation_notifications:
                    viewpager.setCurrentItem(2);
                    return true;
            }
            return false;
        }
    };
    private ViewPager.OnPageChangeListener mOnPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {
            Menu item = navigation.getMenu();
            if (item.getItem(i) != null){
                item.getItem(i).setChecked(false);
            }else{
                item.getItem(0).setChecked(false);
            }
            item.getItem(i).setChecked(true);
        }

        @Override
        public void onPageSelected(int i) {

        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //添加Fragment
        fragmentList.add(DemoFragment.newInstance("Home"));
        fragmentList.add(DemoFragment.newInstance("Dashboard"));
        fragmentList.add(DemoFragment.newInstance("Notifications"));
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        navigation = (BottomNavigationView) findViewById(R.id.navigation);
        //ViewPager设置adpater
        viewPager.setAdapter(adapter);
        //BottomNavigationView添加OnPageChangeListener事件
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        //ViewPager添加OnPageChangeListener事件
        viewPager.addOnPageChangeListener(mOnPageChangeListener);
    }

    //ViewPager adapter
    class ViewPagerAdapter extends FragmentPagerAdapter{

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            return fragmentList.get(i);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }
    }
}

DemoFragment.java 完整代码


public class DemoFragment extends Fragment {
    public static DemoFragment newInstance(String info){
        Bundle bundle = new Bundle();
        bundle.putString("title",info);
        DemoFragment fragment = new DemoFragment();
        fragment.setArguments(bundle);
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment,container,false);
        TextView tv = (TextView)v.findViewById(R.id.tv);
        tv.setText(getArguments().getString("title"));
        return v;
    }
}

ps:由于过于简单所以就不留下源码文件下载地址了。。。。

发布了13 篇原创文章 · 获赞 24 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/sinat_28502161/article/details/82770203