欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ViewPager+Fragment实现简单页面切换

程序员文章站 2022-05-14 21:07:10
...

ViewPager+Fragment实现简单页面切换

1.效果

ViewPager+Fragment实现简单页面切换
ViewPager+Fragment实现简单页面切换

2.demo大概组成

ViewPager+Fragment实现简单页面切换ViewPager+Fragment实现简单页面切换

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) {

        }
    }
}