📜  如何在 Android 应用中创建滑动导航(1)

📅  最后修改于: 2023-12-03 15:24:06.867000             🧑  作者: Mango

如何在 Android 应用中创建滑动导航

在 Android 应用中创建滑动导航可以方便用户在不同界面之间进行切换和导航。本文将介绍如何使用 TabLayout 和 ViewPager 来创建滑动导航。

步骤1:导入依赖项

为了使用 TabLayout 和 ViewPager ,需要在 build.gradle 文件中添加以下依赖项:

implementation 'com.google.android.material:material:1.2.0-alpha05'
步骤2:创建布局

在布局文件中添加 TabLayout 和 ViewPager 。下面是一个例子:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
步骤3:创建适配器

为了使 ViewPager 显示 Fragment ,需要使用 FragmentPagerAdapter 或 FragmentStatePagerAdapter 创建适配器。这里使用 FragmentPagerAdapter 作为例子。

public class MyPagerAdapter extends FragmentPagerAdapter {

    private static int NUM_ITEMS = 3;

    public MyPagerAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public int getCount() {
        return NUM_ITEMS;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return FirstFragment.newInstance();
            case 1:
                return SecondFragment.newInstance();
            case 2:
                return ThirdFragment.newInstance();
            default:
                return null;
        }
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "First";
            case 1:
                return "Second";
            case 2:
                return "Third";
            default:
                return null;
        }
    }
}
步骤4:创建 Fragment

创建三个 Fragment 作为示例,分别叫 FirstFragment、SecondFragment 和 ThirdFragment ,使用 newInstance() 返回新实例。

public class FirstFragment extends Fragment {

    public static FirstFragment newInstance() {
        return new FirstFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_first, container, false);
        // TODO: 填充布局逻辑
        return view;
    }
}

public class SecondFragment extends Fragment {

    public static SecondFragment newInstance() {
        return new SecondFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_second, container, false);
        // TODO: 填充布局逻辑
        return view;
    }
}

public class ThirdFragment extends Fragment {

    public static ThirdFragment newInstance() {
        return new ThirdFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_third, container, false);
        // TODO: 填充布局逻辑
        return view;
    }
}
步骤5:设置适配器

在 Activity 或 Fragment 中使用 TabLayout 和 ViewPager ,设置 MyPagerAdapter 适配器。

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private MyPagerAdapter adapter;

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

        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);

        adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}

至此,一个简单的滑动导航就创建好了。可以根据自己的需求去修改和完善这个示例。

参考链接:

https://material.io/components/tabs/android#using-tabs

https://developer.android.com/reference/android/support/v4/view/ViewPager