上篇实现了一个简单的吸附效果,那么这篇我们来实现上篇中所示的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,
而博客中的方法仅供参考吧~