android app实现轮播的图片视频播放video，仿淘宝商品详情的视频播放（android）

这段时间在学习开发android app 记录一下实现仿淘宝图片视频切换的功能，直接拿来用即可，大家有什么问题可以共同交流

先看一下目录结构吧

思路：

1. ViewPager 分别实现三个类型的滑动–fragment

private void initFragment() {
        fragments = new ArrayList<>();
        fragments.add(new SwiperVrFragment());
        fragments.add(new SwiperVideoFragment());
        fragments.add(new SwiperImageFragment());
    }

2. 对应的fragment做自己的事情，在SwiperImageFragment里面做图片轮播其他的就很简单了，

当然这可能不是最好的方法，大家有什么好的实现方法也可以和我沟通，一起学习下

主要代码：

BlankFragment.java

public class BlankFragment extends Fragment {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewSwitcherHelper mViewSwitchHelper;
    TextView textView;

    private List<Fragment> fragments;
    String[] titles = {"VR", "视频", "图片"};

    //获取swiperImageFragment的轮播图数据
    int numbers = new SwiperImageFragment().number();


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_blank, container, false);

        tabLayout = view.findViewById(R.id.tablayout);
        viewPager = view.findViewById(R.id.viewpager_menu);
        textView = view.findViewById(R.id.number);

        //设置数据
        textView.setText(String.valueOf(numbers));

        //页面，数据源
        initFragment();
        initis();

        return view;
    }

    private void initis() {

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选择时触发
                if (tab.getText().equals("视频")) {
                    JZVideoPlayerStandard.goOnPlayOnResume();
                }
                JZVideoPlayerStandard.goOnPlayOnPause();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //未选择是触发
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //选中之后再次点击即复选时触发
            }
        });

        //ViewPager的适配器
        viewPager.setAdapter(new MyAdapter(getChildFragmentManager(), fragments));
        //绑定
        tabLayout.setupWithViewPager(viewPager);
    }

    private void initFragment() {
        fragments = new ArrayList<>();
        fragments.add(new SwiperVrFragment());
        fragments.add(new SwiperVideoFragment());
        fragments.add(new SwiperImageFragment());
    }

    /**
     * 分类菜单适配器
     */
    private class MyAdapter extends FragmentPagerAdapter {
        List<Fragment> list;

        public MyAdapter(@NonNull FragmentManager fm, List<Fragment> list) {
            super(fm);
            this.list = list;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }

        //重写这个方法，将设置每个Tab的标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

SwiperImageFragment.java

public class SwiperImageFragment extends Fragment {

    protected ViewPager mViewpager;
    private List<View> mViewlist = new ArrayList<>();
    List<Lunbo>  ads = new ArrayList<>();

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.swiper_image_fragment, container, false);

        mViewpager = view.findViewById(R.id.viewPager);
        Lunbo lunbo = new Lunbo("https://img1.gtimg.com/ninja/2/2020/09/ninja160126192713315.jpg", "2");
        Lunbo lunbo2 = new Lunbo("https://img1.gtimg.com/chinanba/pics/hv1/121/162/2325/151224556.jpg", "2");
        Lunbo lunbo3 = new Lunbo("https://img1.gtimg.com/chinanba/pics/hv1/203/125/2325/151215203.jpg", "2");
        Lunbo lunbo4 = new Lunbo("https://img1.gtimg.com/chinanba/pics/hv1/36/121/2325/151214016.jpg", "2");
        ads.add(lunbo);
        ads.add(lunbo2);
        ads.add(lunbo3);
        ads.add(lunbo4);

        setBannerview(ads);

        return view;
    }

    class Lunbo {
        String url;
        String tag;

        public Lunbo(String url, String tag) {
            this.url = url;
            this.tag = tag;
        }

        public String getUrl() {
            return url;
        }

        public void setUrl(String url) {
            this.url = url;
        }

        public String getTag() {
            return tag;
        }

        public void setTag(String tag) {
            this.tag = tag;
        }
    }

    /**
     * 轮播图片实现
     */
    protected void setBannerview(List<Lunbo> lunbos) {
        //区分图片和视频布局
        for (int i = 0; i < lunbos.size(); i++) {
            View view = LayoutInflater.from(getContext()).inflate(R.layout.view_guide_img, null);
            ImageView _imageview = view.findViewById(R.id.iv_center);
            MyGlideImageLoader.getInstance().onNetUrl2(getActivity(), _imageview, lunbos.get(i).getUrl());
            mViewlist.add(view);
        }
        mViewpager.setAdapter(new BannerAdapter(mViewlist));
    }

    public int number(){
        return ads.size();
    }

}

SwiperVideoFragment.java

public class SwiperVideoFragment extends Fragment {

    protected ViewPager mViewpager;
    private ViewSwitcherHelper mViewSwitchHelper;
    private LinearLayout del;
    private List<View> mViewlist = new ArrayList<>();
    List<Lunbos> ads = new ArrayList<>();
    String videourl = "ss.mp4";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.swiper_video_fragment, container, false);

        mViewpager = view.findViewById(R.id.viewPager);
        del = view.findViewById(R.id.del);

        //视频封面图
        Lunbos lunbos = new Lunbos("https://guangdong.mutuan.com//uploads/image/20191219/9513b84d9b2f7a893fcbe7b89a2d147d.jpg", "1");
        ads.add(lunbos);
        setBannerview(ads);

        return view;
    }

    static class Lunbos {
        String url;
        String tag;

        public Lunbos(String url, String tag) {
            this.url = url;
            this.tag = tag;
        }

        public String getUrl() {
            return url;
        }

        public void setUrl(String url) {
            this.url = url;
        }

        public String getTag() {
            return tag;
        }

        public void setTag(String tag) {
            this.tag = tag;
        }
    }

    protected void setBannerview(List<Lunbos> lunboss) {
        //区分图片和视频布局
        for (int i = 0; i < lunboss.size(); i++) {
            if (lunboss.get(i).getTag().equals("1")) {
                View view = LayoutInflater.from(getContext()).inflate(R.layout.view_guide_video, null);
                JZVideoPlayerStandard videoplayer = view.findViewById(R.id.videoplayer);
                videoplayer.setUp(videourl, JZVideoPlayerStandard.SCREEN_WINDOW_NORMAL, "");
                Glide.with(getActivity()).load(lunboss.get(i).getUrl()).into(videoplayer.thumbImageView);
                mViewlist.add(view);
            } else {
                View view = LayoutInflater.from(getContext()).inflate(R.layout.view_guide_two, null);
                ImageView _imageview = view.findViewById(R.id.iv_center);
                MyGlideImageLoader.getInstance().onNetUrl2(getActivity(), _imageview, lunboss.get(i).getUrl());
                mViewlist.add(view);
            }
        }
        mViewpager.setAdapter(new BannerAdapter(mViewlist));
    }

    @Override
    public void onPause() {
        super.onPause();
        JZVideoPlayerStandard.goOnPlayOnPause();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        JZVideoPlayerStandard.releaseAllVideos();
    }
}

关于vr部分的就不写出来了，这里面有用到陀螺仪实现图片跟随手机转动而动的功能，还有vr使用的一些东西，比较复杂

后期有时间会整理一下代码上传到GitHub上面提供大家一起探讨一下