可左右上下滑动切换图片的界面

主Activity布局只有一个Viewpager
代码如下:

public class Btn03Activity extends BaseActivity implements ViewPager.OnPageChangeListener {
    private ViewPager viewPager;
    private MyAdapter myAdapter;
    private List<GoodsEntity> data;
    private List<Integer> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_btn03);
        initData();
        initView();
        initEvent();

    }

    private void initEvent() {
        myAdapter.setDatas(data);
        viewPager.setAdapter(myAdapter);
        viewPager.addOnPageChangeListener(this);
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        myAdapter = new MyAdapter();
    }

    private void initData() {
        data = new ArrayList<>();
        list = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            list.add(R.drawable.flower);
        }
        for (int i = 0; i < 5; i++) {
            GoodsEntity entity = new GoodsEntity();
            entity.setResId(R.drawable.flower);
            entity.setData(list);
            data.add(entity);
        }

    }

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

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    class MyAdapter extends StandardPagerAdapter {
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            PageView pageView = new PageView(container.getContext());
            GoodsEntity entity = (GoodsEntity) getItem(position);
            pageView.setData(entity);
            container.addView(pageView);
            return pageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            PageView pageView = (PageView) object;
            container.removeView(pageView);
        }
    }

}

可以看到viewpager的item是一个自定义view
代码如下:

public class PageView extends FrameLayout {
    private GoodsEntity entity;
    private VerticalViewPager verticalViewPager;
    private ViewAdapter adapter;

    public PageView(Context context) {
        this(context, null);
    }

    public PageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.view_pager, this, true);
        verticalViewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
        adapter = new ViewAdapter();
        verticalViewPager.setAdapter(adapter);

    }

    public void setData(GoodsEntity entity) {
        this.entity = entity;
        adapter.setDatas(entity.getData());
    }

    class ViewAdapter extends StandardPagerAdapter {
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
//            View view = LayoutInflater.from(container.getContext()).inflate(R.layout.img_item, container, false);
//            ImageView img = (ImageView) view.findViewById(R.id.img_item);
            View view = LayoutInflater.from(container.getContext()).inflate(R.layout.touch_img, container, false);
            TouchImageView img = (TouchImageView) view.findViewById(R.id.touch_img);
            img.setMaxZoom(2.2f);
            Integer resId = (Integer) getItem(position);
            img.setImageResource(resId);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }
    }
}

代码很简单,可以看到有一个可以上下滑动的viewpager: VerticalViewPager
用法和普通的viewpager一样
item是一个imageview:TouchImageView 是可以双击放大和手势放大的imageview
其中的StandardPagerAdapter只是对普通的PagerAdapter做了简单的封装:

public class StandardPagerAdapter extends PagerAdapter {
    private List<?> datas;
    private View mCurrentView;

    public StandardPagerAdapter() {
    }

    public StandardPagerAdapter(List<?> datas) {
        this.datas = datas;
    }

    public StandardPagerAdapter setDatas(List<?> datas) {
        this.datas = datas;
        notifyDataSetChanged();
        return this;
    }

    @Override
    public int getCount() {
        if (datas != null) return datas.size();
        return 0;
    }

    public Object getItem(int i) {
        if (datas != null && datas.size() > i && i >= 0) {
            return datas.get(i);
        }
        return null;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        mCurrentView = (View) object;
    }

    public View getPrimaryItem() {
        return mCurrentView;
    }

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现左右滑动切换图片可以使用一些现成的插件或者自己编写JavaScript代码实现。以下是一个使用JavaScript实现左右滑动切换图片的示例代码: HTML代码: ```html <div class="slider"> <div class="slider-wrapper"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <a href="#" class="slider-prev">Prev</a> <a href="#" class="slider-next">Next</a> </div> ``` CSS样式: ```css .slider { position: relative; overflow: hidden; } .slider-wrapper { display: flex; transition: transform 0.5s ease; } .slider-wrapper img { width: 100%; height: auto; } .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; color: white; background-color: black; padding: 8px 16px; text-decoration: none; z-index: 1; } .slider-prev { left: 0; } .slider-next { right: 0; } ``` JavaScript代码: ```js const slider = document.querySelector('.slider'); const wrapper = document.querySelector('.slider-wrapper'); const prevButton = document.querySelector('.slider-prev'); const nextButton = document.querySelector('.slider-next'); let position = 0; prevButton.addEventListener('click', () => { position += slider.clientWidth; if (position > 0) { position = -wrapper.clientWidth + slider.clientWidth; } wrapper.style.transform = `translateX(${position}px)`; }); nextButton.addEventListener('click', () => { position -= slider.clientWidth; if (position < -wrapper.clientWidth + slider.clientWidth) { position = 0; } wrapper.style.transform = `translateX(${position}px)`; }); ``` 该代码实现了一个左右滑动切换图片的功能,点击“Prev”按钮可以向左切换图片,点击“Next”按钮可以向右切换图片。需要注意的是,该代码使用了flex布局和transform属性实现图片的水平布局和平移动画。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值