ViewPager+Fragment实现简单页面切换

ViewPager+Fragment实现简单页面切换

1.效果

2.demo大概组成

3.步骤

1.在activity_main.xml中添加ViewPager

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:id="@+id/drawerlayout_main">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <include layout="@layout/title"/>
            <androidx.viewpager.widget.ViewPager
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:id="@+id/main_viewpager"/>
        </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hello!"
        android:textStyle="bold"
        android:textSize="60sp"
        android:gravity="center"
        android:layout_gravity="left"
        android:background="#ffffff"/>


</androidx.drawerlayout.widget.DrawerLayout>

• < include layout="@layout/title"/>这个布局文件是我自定义的，具体代码如下。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#6699cc">
    <TableRow
        android:layout_height="60dp"
        android:layout_width="match_parent">
        <Button
            android:id="@+id/menu"
            android:background="@mipmap/menu"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginLeft="20dp"/>
        <TextView
            android:id="@+id/mine"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1"
            android:text="我的"
            android:textSize="25sp"
            android:textStyle="normal"
            android:textColor="#ffffff"
            android:layout_marginLeft="40dp"/>
        <TextView
            android:id="@+id/music_club"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:textStyle="normal"
            android:text="音乐馆"
            android:textSize="25sp"
            android:textColor="#ffffff"/>
        <TextView
            android:id="@+id/find"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1"
            android:text="发现"
            android:textSize="25sp"
            android:textStyle="normal"
            android:textColor="#ffffff"
            android:layout_marginRight="60dp"/>
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/search"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:hint="搜索"
            android:singleLine="true"
            android:editable="false"
            android:clickable="true"
            android:gravity="center"
            android:textColorHint="#ffffff" />
    </TableRow>
</LinearLayout>

2.编写Fragment布局文件

这里只做简单演示，所以布局文件中只有一个TextView，并且这里做三个Fragment（基本相同，所以这里就写一个）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="我的"
    android:textSize="60sp"
    android:gravity="center" />
</LinearLayout>

public class Mine extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.mine_fragment,null);
        return view;
    }
}

3.创建FragmentAdapter类（Fragment适配器）

public class FragmentAdapter extends FragmentPagerAdapter {
    private FragmentManager fragmentManager;
    private List<Fragment> fragmentList;

    public FragmentAdapter(FragmentManager fm, List<Fragment> list){
        super(fm);
        fragmentList=list;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);//显示第几个页面
    }

    @Override
    public int getCount() {
        return fragmentList.size();//共有几个页面
    }
}

4.准备工作完成之后，完善MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView mineText;
    private TextView musicClubText;
    private TextView findText;
    private ViewPager viewPager;
    private List<Fragment> list;
    private FragmentAdapter fragmentAdapter;
    private Button menu;
    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null)
            actionBar.hide();
        drawerLayout=findViewById(R.id.drawerlayout_main);
        menu=findViewById(R.id.menu);
        mineText=findViewById(R.id.mine);
        musicClubText=findViewById(R.id.music_club);
        findText=findViewById(R.id.find);
        viewPager=findViewById(R.id.main_viewpager);
        menu.setOnClickListener(this);
        mineText.setOnClickListener(this);
        musicClubText.setOnClickListener(this);
        findText.setOnClickListener(this);
        viewPager.setOnPageChangeListener(new MyPagerChangeListener());//设置页面切换的监听
        list = new ArrayList<>();//添加Fragment
        list.add(new Mine());//0页面
        list.add(new MusicClub());//1页面
        list.add(new Find());//2页面

        fragmentAdapter = new FragmentAdapter(getSupportFragmentManager(),list);//创建适配器
        viewPager.setAdapter(fragmentAdapter);
        viewPager.setCurrentItem(0);//打开时，默认当前页面为0页面
        mineText.setTypeface(Typeface.DEFAULT_BOLD);//将标题栏对应的字体设置为粗体
    }

    @Override
    public void onClick(View view) {//标题栏的点击事件
        switch (view.getId()){
                //点击哪个TextView，将当前页面设置为对应的页面，将标题栏对应的字体设置为粗体，其余的设置为普通字体
            case R.id.mine:
                viewPager.setCurrentItem(0);
                mineText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                musicClubText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                findText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                break;
            case R.id.music_club:
                viewPager.setCurrentItem(1);
                mineText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                musicClubText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                findText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                break;
            case R.id.find:
                viewPager.setCurrentItem(2);
                mineText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                musicClubText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                findText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                break;
            case R.id.menu:
                drawerLayout.openDrawer(GravityCompat.START);
        }
    }

    class MyPagerChangeListener implements ViewPager.OnPageChangeListener{

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            switch (position){//滑动监听
                case 0:
                    mineText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                    musicClubText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    findText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    break;
                case 1:
                    mineText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    musicClubText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                    findText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    break;
                case 2:
                    mineText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    musicClubText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
                    findText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
                    break;

            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}