Android Studio 开发之——电子阅览器（一）

说明：此博客主要用于讲解简单的电子阅览器的实现，本篇主要说明菜单界面的实现与代码

菜单界面框架

菜单界面采用tablayout+viewpager2+fragment实现，实现可滑动的菜单页面效果。

我们先来看主界面布局，mainactivity.xml如下：

<RelativeLayout 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"xmlns:app="http://schemas.android.com/apk/res-auto"tools:context=".MainActivity"><androidx.viewpager2.widget.ViewPager2android:id="@+id/viewpage"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@+id/rg_tab_bar" /><com.google.android.material.tabs.TabLayoutandroid:id="@+id/rg_tab_bar"app:tabIndicatorHeight="3dp"android:layout_width="match_parent"android:layout_height="56dp"android:layout_alignParentBottom="true"><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="书架" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="分类" /></com.google.android.material.tabs.TabLayout><Viewandroid:id="@+id/div_tab_bar"android:layout_width="match_parent"android:layout_height="2px"android:layout_above="@id/rg_tab_bar"android:background="@color/div_white" /><FrameLayoutandroid:id="@+id/ly_content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@id/div_tab_bar"/></RelativeLayout>

上述代码中，采用相对布局的方式，在底部使用tablayout控件导航栏，导航栏以上部分为fragment，展示具体一个页面内容，使用viewpager2实现多个页面间的滑动。

MainActivity.java代码如下

package com.example.ebooktest;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import androidx.fragment.app.Fragment;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import java.util.ArrayList;public class MainActivity extends AppCompatActivity {private ViewPager2 viewPager;private TabLayout tabLayout;private String[] titles = {"书架", "分类"};ArrayList<Fragment> fragments;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化滑动页面initPage();tabLayout = (TabLayout) findViewById(R.id.rg_tab_bar);TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(tabLayout,viewPager, new TabLayoutMediator.TabConfigurationStrategy() {@Overridepublic void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {tab.setText(titles[position]);}});tabLayoutMediator.attach();}private void initPage() {viewPager = findViewById(R.id.viewpage );fragments = new ArrayList<>();fragments.add(Fragment_Tab.newInstance() );fragments.add(BFragment.newInstance());MyFragmentPageAdapter pageAdapter = new MyFragmentPageAdapter(getSupportFragmentManager(),getLifecycle(),fragments);viewPager.setAdapter(pageAdapter);}
}

上述代码中，主要是进行viewpager2与多个fragment间的适配，然后利用TabLayoutMediator 将tabLayout和ViewPager关联，这样是为了在滑动fragment进行翻页时，相对应的标题栏被选中的位置也能同步变化。

紧接着我们需要完成viewpager2适配器，MyFragmentPageAdapter.java如下：

package com.example.ebooktest;import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;import java.util.ArrayList;
import java.util.List;public class MyFragmentPageAdapter extends FragmentStateAdapter {List<Fragment> fragmentList = new ArrayList<>();    //存储页面的fragment//构造函数中 传递fragmentListpublic MyFragmentPageAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragments) {super(fragmentManager, lifecycle);fragmentList = fragments;}@NonNull@Overridepublic Fragment createFragment(int position) {return fragmentList.get(position);}@Overridepublic int getItemCount() {return fragmentList.size();}
}

上述代码，createFragment方法主要是根据position来创建添加对应的Fragment到ViewPager2中去，
getItemCount是是用于获取Fragment的个数。

在创建分别创建BFragment与Fragment_Tab页面，去除prarm1与prarm2参数，即可完成基本的菜单框架

总结

1.mainactivity.xml中放置tablayout，fragment，viewpager2控件，并对其进行布局。

2.设置ViewPager2的适配器，最后利用TabLayoutMediator 将tabLayout和ViewPager关联。

最终效果如下：