Android开发：AS开发底下菜单页面切换、滑动效果

最新推荐文章于 2023-05-31 16:56:39 发布

Chipei Kung

最新推荐文章于 2023-05-31 16:56:39 发布

阅读量3.4k

点赞数 2

分类专栏： JavaASSyvideo(190701) 文章标签： ViewPager滑动页面 Fragment滑动页面底下菜单切换

Kung个人所有!

本文链接：https://blog.csdn.net/yu1581274988/article/details/96586209

版权

JavaASSyvideo(190701) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Android开发：AS开发底下菜单页面切换、滑动效果

目前市面上开发的app，其页面切换方式五花八门，我会在最后贴上几种比较炫酷的造型，下面还是给大家解析下页面切换的两位老祖ViewPager与Fragment：

1、ViewPager实现滑动切换页面

ViewPager布局文件要求，也可以说这是在主布局界面(activity_main.xml)给ViewPager申请空间位置：

	....
    <android.support.v4.view.ViewPager
        android:layout_weight="1"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_above="@+id/bottom_tab_layout">
    </android.support.v4.view.ViewPager>
    ....

自定义适配器(adapter)类，新建CustomViewPagerAdapter.java文件

package com.sylanty.syvideo;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;

public class CustomViewPagerAdapter extends PagerAdapter {
    List<View> pages;
    public CustomViewPagerAdapter(List<View> pages){
        this.pages = pages;
    };

    //获取页面数量
    @Override
    public int getCount() {
        return pages.size();
    }

    //判断类型是否匹配
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return object==view;
    }

    //加载page
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = pages.get(position);
        container.addView(view);
        return view;
    }

    //移除page
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(pages.get(position));
    }
}

在MainActivity类文件，MainActivity.java中调用ViewPager

	....
	//MainActivity起始函数
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        initPages();
        //初始化自定义适配器
        customViewPagerAdapter = new CustomViewPagerAdapter(pages);
        //设置adapter
        viewPager.setAdapter(customViewPagerAdapter);
        viewPager.setOnPageChangeListener(this);
    }
    ....

	....
    // 初始化viewpager页面
    private void initPages() {
        pages = new ArrayList<View>();
        View homepage = View.inflate(MainActivity.this,R.layout.home_viewpager,null);
        View mepage = View.inflate(MainActivity.this,R.layout.me_viewpager,null);
        pages.add(homepage);
        pages.add(mepage);
    }
    ....

	....
	//继承自ViewPager.OnPageChangeListener接口
    //实现页面滑动的事件监听
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }
    //继承自ViewPager.OnPageChangeListener接口
    //实现页面选中后的事件监听
    @Override
    public void onPageSelected(int position) {
        resumeTab();
        switch (position){
            case 0:
                homeImage.setImageResource(R.drawable.home_blue);
                homeText.setTextColor(getResources().getColor(R.color.colorTextBlue));
                toolbartitle.setText(R.string.app_home);
                break;
            case 1:
                meImage.setImageResource(R.drawable.me_blue);
                meText.setTextColor(getResources().getColor(R.color.colorTextBlue));
                toolbartitle.setText(R.string.app_me);
                break;
            default:
                break;
        }
    }
    @Override
    public void onPageScrollStateChanged(int state) {

    }
    ....

这样你的滑动切换页面的效果就实现了；
配图羽：

2、Fragment实现切换页面

跟ViewPager一样，也要在主布局界面(activity_main.xml)先申请空间位置：

	....
    <FrameLayout
         android:id="@+id/main_frame"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1"/>
	....

因为Fragment是固定界面，所以我们需要根据你的菜单栏中项目数来定义Fragment个数，这里我们申请两个Fragment，以下是java文件，对于xml布局文件你可以自己建立，不出错就行：

public class HomeFrament extends Fragment{
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frament_home,null);
    } 
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
 
    }
}

public class MeFrament extends Fragment{
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frament_me,null);
    }
}

在MainActivity类文件，MainActivity.java中完成切换Fragment页：

	//MainActivity起始函数
	protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         // 初始化并设置当前Fragment
         initFragment(0);
    }

	//设置Fragment
	private void initFragment(int index) {
          // 由于是引用了V4包下的Fragment，所以管理器要用getSupportFragmentManager获取
          FragmentManager fragmentManager = getSupportFragmentManager();
          // 开启事务
          FragmentTransaction transaction = fragmentManager.beginTransaction();
          // 隐藏所有Fragment
          hideFragment(transaction);
          switch (index) {
          case 0:
              if (homeFragment == null) {
                  homeFragment = new HomeFragment();
                  transaction.add(R.id.home_activity, homeFragment);
              } else {
                  transaction.show(homeFragment);
              }
             break;
          case 1:
              if (meFragment == null) {
                  meFragment = new MeFragment();
                 transaction.add(R.id.me_activity, meFragment);
             } else {
                 transaction.show(addressFragment);
             } 
             break;
          default:
             break;
         } 
       // 提交事务
        transaction.commit(); 
    }

	//隐藏Fragment
	private void hideFragment(FragmentTransaction transaction) {
         if (homeFragment != null) {
         	transaction.hide(homeFragment);
         }
         if (meFragment != null) {
             transaction.hide(meFragment);
         }
     }

注意：
主要代码就是这些，你可以通过findViewById()方法或者是按钮控件来控制切换页面，切换的方法是调用initFragment()函数。如何创建菜单栏控件可以看我的文章Android开发：AS开发APP底下菜单栏设计
还需要在AndroidManifest.xml里面对应的activity里添设置
android:configChanges=“orientation|keyboardHidden|screenSize”
这是为了改换屏幕方向等操作时不触发oncreate事件，避免界面重复叠加现象。

至此，两位老祖就介绍完了。

虽然两位老祖介绍完了，但是还存在它们融合的方法，毕竟是顶端的两位大师，肯定要交流的嘛！那我就不废话了，看下面融合技吧！

3、Fragment嵌入ViewPager融合技

在这里，我想介绍一个新的布局方法，activity_main.xml布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.sylanty.sy.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/include"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/layout_bottom"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="0dp"
        android:layout_width="0dp"
        android:id="@+id/include" />
</android.support.constraint.ConstraintLayout>

自定义适配器(adapter)类，新建CustomFragmentPagerAdapter.java文件

public class CustomFragmentPagerAdapter extends FragmentPagerAdapter {
    public List<Fragment> mFragmentList;
    public CustomFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        mFragmentList=fragmentList;
    }
    @Override
    public Fragment getItem(int position) {
        return mFragmentList==null?null:mFragmentList.get(position);
    }
    @Override
    public int getCount() {
        return mFragmentList==null?0:mFragmentList.size();
    }
}

MainActivity实现代码，如下：

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.vp_container)
    ViewPager mcContainer;
    @BindView(R.id.tv_homepage)
    TextView mcHome;
    @BindView(R.id.tv_setting)
    TextView mcSetting;
    @BindView(R.id.tv_calculator)
    TextView mcCalculator;
    private List<Fragment> fragmentList;
    private List<TextView> textViewList;
    private int mDefaultColor= Color.BLACK;
    private int mActiveColor=Color.RED;

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

        fragmentList=new ArrayList<Fragment>();
        fragmentList.add(new FrontPageFragment());
        fragmentList.add(new SalaryFragment());
        fragmentList.add(new SettingFragment());

        textViewList=new ArrayList<TextView>();
        textViewList.add(mcHome);
        textViewList.add(mcCalculator);
        textViewList.add(mcSetting);

        textViewList.get(0).setTextColor(mActiveColor);

        mcContainer.setAdapter(new CustomFragmentPagerAdapter(getSupportFragmentManager(),fragmentList));        
        mcContainer.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                for (TextView viewer:textViewList) {
                    viewer.setTextColor(mDefaultColor);
                }
                textViewList.get(position).setTextColor(mActiveColor);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        }
    }
}

注意：
融合技很强，你能驾驭吗，加油吧！

4、更多华丽页面滑动

期待我的GitHub吧
各色各样

总结：

ViewPager与Fragment各具特点，希望我们能灵活运用，笔录万岁，加油吧！

为了曾经轻易许下的梦

Chipei Kung

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android开发：AS开发底下菜单页面切换、滑动效果

Android开发：AS开发底下菜单页面切换、滑动效果目前市面上开发的app，其页面切换方式五花八门，我会在最后贴上几种比较炫酷的造型，下面还是给大家解析下页面切换的两位老祖ViewPager与Fragment：1、ViewPager实现滑动切换页面ViewPager布局文件要求，也可以说这是在主布局界面(activity_main.xml)给ViewPager申请空间位置： ....
复制链接

扫一扫