上篇实现了一个简单的吸附效果,那么这篇我们来实现上篇中所示的360软件详情页(带viewpager)的效果!先来参观下本篇所实现的效果图:

了解了上一篇的实现过程,那么本篇的效果无非是修改一下布局,将原来的列表位置换上viewpager,snapbar换上RadioGroup不久可以了吗?确实如此!只是在初始化viewpager时相对麻烦点,因为数据是要动态添加的,有同学可能问viewpager里的列表如何实现?用listview吗?理论是上可以得,但是我们知道ScrollView嵌套listview时的效率,所以还是不要这样干了!最好的办法就是在viewpager的item中动态添加列表view:

 views = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            View view = mInflater.inflate(R.layout.vp_item, null);
            LinearLayout ll = (LinearLayout) view.findViewById(R.id.ll);
            for (int j = 0; j < 20; j++) {
                ll.addView(getView(i));
            }
            views.add(view);
        }
        myAdapter = new MyAdapter();
        vp.setAdapter(myAdapter);
    /**
     * 填充viewpager的itmeview
     *
     * @return
     */
    private View getView(int i) {
        View view = mInflater.inflate(R.layout.list_item, null);
        //填充数据//
        TextView tv_title= (TextView) view.findViewById(R.id.tv_title);
        tv_title.setText("标题"+(i+1));
        return view;
    }

操作简单,又保证效率!当然,本例中的列表条数是固定的,如果我们还需要加载更多怎么办?只需在底部再添加一个加载更多的按钮,给予点击事件就可以了!

好了,貌似就这么简单,完事了?……还差一点!

只是上面这部分内容,运行程序后,发现ScrollView无法滑动了,那么目前有两种解决办法:

第一,将viewpager的高度固定——不科学;

第二,重写viewpager,动态计算高度——靠谱;

重写的viewpager:

package com.byl.snappingviewpager;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by baiyuliang on 2016-5-5.
 */
public class MyViewPager extends ViewPager {

    public MyViewPager(Context context) {
        super(context);
    }

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int height = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            if (h > height)
                height = h;
        }

        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

好了,就这么简单!

ASdemo下载地址:http://download.csdn.net/detail/baiyuliang2013/9510729

PS:随着安卓SDK的不断升级,现在这种效果可以直接用SDK自带方法即可实现啦~CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout,

而博客中的方法仅供参考吧~

带吸附效果的ViewPager(二)的更多相关文章

  1. 带吸附效果的ViewPager(一)

    什么叫吸附效果?先看一个示例更为直观,借用网上的一个效果图: 类似这种效果的app很多,网上的实现方法也是很多,但各种重写各种监听又令人不胜其烦,今日突发奇想,顺着自己的思路实现了类似的效果,不敢独享 ...

  2. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  3. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  4. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Android利用温度传感器实现带动画效果的电子温度计

    概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...

  6. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  8. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  9. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

随机推荐

  1. [bzoj4821][Sdoi2017]相关分析

    来自FallDream的博客,未经允许,请勿转载,谢谢. Frank对天文学非常感兴趣,他经常用望远镜看星星,同时记录下它们的信息,比如亮度.颜色等等,进而估算出星星的距离,半径等等.Frank不仅喜 ...

  2. Python作业之三次登陆锁定用户

    作业之三次登陆锁定用户 作业要求如下: 1. 输入用户名和密码 2. 认证成功提示欢迎信息 3. 认证失败三次锁定用户 具体代码如下: 方法1: import os#导入os模块 if os.path ...

  3. php留言板的实现

    留言板功能的实现,主要就是通过编程语言对数据库进行操作,简单说也就是插入和查询的实现.不管是什么语言进行实现,道理都是一样的. 应学习需要,这里用php世界上最美的语言来进行实现. 主要步骤为: 连接 ...

  4. typeAliases别名

    <configuration> <typeAliases> <!-- 通过package, 可以直接指定package的名字, mybatis会自动扫描你指定包下面的ja ...

  5. PLSQL(2)

      游标                      [1] 不带参数的游标 -- 取出EMP表中的所有人名字 DECLARE CURSOR C IS SELECT * FROM EMP; V_EMP ...

  6. ubuntu下安装 python 常用软件

    1.用于科学计算的常用包: sudo apt-get install python-numpy python-scipy python-matplotlib ipython ipython-noteb ...

  7. python学习之路基础篇(第七篇)

    一.模块 configparser configparser用于处理特定格式的文件,其本质是利用open来对文件进行操作 [section1] # 节点 k1 = v1 # 值 k2:v2 # 值 [ ...

  8. 这是一个测试,测试markdown语法

    [TOC] 1. chpt1 这是一段话,前面没有空格 前面有4个空格,且在编辑状态下上面没有空行 前面有4个空格,且在编辑状态下上面有一个空行. 前面按了一下tab 1.1 1.1 2 段落1 前面 ...

  9. 临时关闭Mac SIP系统完整性保护机制

    # 修正更新 [2016-12-27] 晚上给我笔记本安装的时候,使用user权限安装成功,mac最后是关闭sip才安装成功. $ pip install -r requirements.txt -- ...

  10. UE4使用UMG接口操作界面

    原文链接:http://gad.qq.com/article/detail/7181131 本文首发腾讯GAD开发者平台,未经允许,不得转载 UE4的蓝图之强大让人欲罢不能,但是实际在项目的开发中,C ...