ViewPager+TabLayout实现Android页面滑动切换

ViewPager+TabLayout实现Android页面滑动切换

最近学习了一下Android页面滑动切换效果的实现，写这篇文章加深一下印象

用一个简单的案例来实现该效果

先展示一下效果

这里采用时ViewPager和TabLayout实现页面滑动切换效果

首先把布局代码沾上

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9"
        android:id="@+id/viewPager">
    </androidx.viewpager.widget.ViewPager>

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/tabLayout">
    </com.google.android.material.tabs.TabLayout>

</LinearLayout>

用两个fragment页面作为切换页面

fragment_left.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hello world!"/>
</androidx.constraintlayout.widget.ConstraintLayout>

fragment_right.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hello SlideSwitch!"/>
</androidx.constraintlayout.widget.ConstraintLayout>

以上就是布局文件内容

下面就是java代码了

先构建FragmentAdapter适配器

MyAdapter.java

public class MyAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public MyAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

    public void setFragments(List<Fragment> fragments) {
        this.fragments = fragments;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

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

然后编写一下两个fragment的java

FragmentLeft.java

public class FragmentLeft extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_left, container, false);
    }
}

FragmentRight.java

public class FragmentRight extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_right, container, false);
    }
}

最后编写MainActivity活动类

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<Fragment> fragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initViewPager();
    }

    private void initViewPager() {
        //创建List集合
        fragments = new ArrayList<>();
        //添加到fragments集合里
        fragments.add(new FragmentLeft());
        fragments.add(new FragmentRight());
        //创建适配器
        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        //把fragment添加到adapter
        adapter.setFragments(fragments);
        //吧adapter添加到viewPager
        viewPager.setAdapter(adapter);

        //tabLayout有几个创建几个
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        //是tabLayout和viewPager关联同步一下
        tabLayout.setupWithViewPager(viewPager);
        //设置创建的名字，一开始时显示索引为0的界面
        tabLayout.getTabAt(0).setText("首页");
        tabLayout.getTabAt(1).setText("消息");
    }

    private void initView() {
        viewPager = findViewById(R.id.viewPager);
        tabLayout = findViewById(R.id.tabLayout);
    }
}

最后跑一下程序，查看效果

本文就到这里，喜欢的朋友能给一个免费的赞嘛，你的鼓励是我前进的动力！