FlipViewPager 对item实现左右对折滑动翻页效果《IT蓝豹》

FlipViewPager 对item实现左右对折滑动翻页效果

FlipViewPager 对每一条item实现左右对折滑动翻页效果》,解决左右滑动和上下滑动的事件分发处理机制。
内部实现如下:用ListView试下,对listview设置adapter,这个adapter继承BaseFlipAdapter<Friend>
,然后对每一个item进行view处理,部分代码如下:
class FriendsAdapter extends BaseFlipAdapter<Friend> {

private final int PAGES = 3;
        private int[] IDS_INTEREST = {R.id.interest_1, R.id.interest_2, R.id.interest_3, R.id.interest_4, R.id.interest_5};

public FriendsAdapter(Context context, List<Friend> items, FlipSettings settings) {
            super(context, items, settings);
        }

@Override
        public View getPage(int position, View convertView, ViewGroup parent, Friend friend1, Friend friend2) {
            final FriendsHolder holder;

if (convertView == null) {
                holder = new FriendsHolder();
                convertView = getLayoutInflater().inflate(R.layout.friends_merge_page, parent, false);
                holder.leftAvatar = (ImageView) convertView.findViewById(R.id.first);
                holder.rightAvatar = (ImageView) convertView.findViewById(R.id.second);
                holder.infoPage = getLayoutInflater().inflate(R.layout.friends_info, parent, false);
                holder.nickName = (TextView) holder.infoPage.findViewById(R.id.nickname);

for (int id : IDS_INTEREST)
                    holder.interests.add((TextView) holder.infoPage.findViewById(id));

convertView.setTag(holder);
            } else {
                holder = (FriendsHolder) convertView.getTag();
            }

switch (position) {
                // Merged page with 2 friends
                case 1:
                    holder.leftAvatar.setImageResource(friend1.getAvatar());
                    if (friend2 != null)
                        holder.rightAvatar.setImageResource(friend2.getAvatar());
                    break;
                default:
                    fillHolder(holder, position == 0 ? friend1 : friend2);
                    holder.infoPage.setTag(holder);
                    return holder.infoPage;
            }
            return convertView;
        }

@Override
        public int getPagesCount() {
            return PAGES;
        }

private void fillHolder(FriendsHolder holder, Friend friend) {
            if (friend == null)
                return;
            Iterator<TextView> iViews = holder.interests.iterator();
            Iterator<String> iInterests = friend.getInterests().iterator();
            while (iViews.hasNext() && iInterests.hasNext())
                iViews.next().setText(iInterests.next());
            holder.infoPage.setBackgroundColor(getResources().getColor(friend.getBackground()));
            holder.nickName.setText(friend.getNickname());
        }

class FriendsHolder {
            ImageView leftAvatar;
            ImageView rightAvatar;
            View infoPage;

List<TextView> interests = new ArrayList<>();
            TextView nickName;
        }
    }

运行效果:

相关代码

时间: 2024-10-10 19:51:41

FlipViewPager 对item实现左右对折滑动翻页效果《IT蓝豹》的相关文章

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外) html: <!DOCTYPE html> <html> <head> <title></title> <meta name=&qu

NGUI 滑动翻页效果

using UnityEngine; using System.Collections; public class PageView : MonoBehaviour { const int ITEM_NUM = 2; //总页数 const int PAGE_WIDTH = 2048; //页宽 const float DRAG_SPEED = 0.5f; //翻页时间 const int DRAG_OFFECT = 30; //滑动的起点和终点的差需大于这个数才能触发翻页效果 float be

桌面浏览器实现滑动翻页效果(Swiper)

还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chinaz.com/free/2013/0626/307273.shtml 我自己的感觉是:功能强大.示例丰富.文档详细. 官方网站:http://www.chinaz.com/free/2013/0626/307273.shtml GitHub地址:https://github.com/nolimits

实现手机滑动翻页效果

var nStartX,nEndX,nDetalX; function touchToNextPage(){ document.addEventListener('touchstart', function (e) { //获得手指开始碰触屏幕时的x坐标 nStartX = e.touches[0].pageX; },false); document.addEventListener('touchmove', function (e) { //获得手指滑动过程中的x坐标 nEndX =Numbe

js实现移动端手指左右上下滑动翻页效果

var ele = document.getElementsByClassName("img-box")[0]; var beginX, beginY, endX, endY, swipeLeft, swipeRight; ele.addEventListener('touchstart', function (event) { event.stopPropagation(); event.preventDefault(); beginX = event.targetTouches[0

vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里没有血),在我们小白需要用到两个技术结合的时候,他们早已冲向前为我们杀出了一条路,准备好了实现用的技术和方案.有时候我就在想,我的理想大概就是站在自己现在仰望的代码塔的顶峰,像他们一样,不断输出自己的热情和力量,产出一个可以为人所用的东西,以能够为后来人发光发热吧. vue-awesome-swip

多个ImageView组成界面实现上下滑动翻页

============问题描述============ 上面这个就是我的手机界面,我想实现用手上下滑动翻页,翻页过后再来更新这10张照片的内容(图片从服务器GET下来已经实现),现在我就是想晓得这个滑动翻页该用什么组件来实现哦,小弟菜鸟一枚,希望大家多给提点哈 ============解决方案1============ 用fragment吧,改一下fragment里面的数据就行了 ============解决方案2============ 搜一下图片播放器吧

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前写的<[jQuery]论手机浏览器中拖拽动作的艰难性>(点击打开链接)中的观点一直,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢? 一.基本目标 在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的

android ViewPager左右滑动翻页,并可以删除page

首先新建一个Activity,继承FragmentActivity. 初始化一个Fragment的List集合,用于像FragmentStatePagerAdapter填充数据,而ViewPager由FragmentStatePagerAdapter的实例进行初始化.和ListView一样,Fragment的List集合的数据变了,就通知FragmentStatePagerAdapter进行界面刷新. ArrayList<Fragment> fragments =new ArrayList&l