之前收到一个需求，需要把一个数据展示列表页面做成像滚轮那样的动画效果：中间最大然后向上下两端逐渐缩小。我想了想iOS那边自带滚轮组件，安卓得自己去实现，目前网上仿ios的滚轮组件的也有一些，但是感觉不适合我，我的要求没那么复杂，于是决定自己动手去实现一下。
动手前先分析一下应该怎么做，归根到底只是要实现缩放效果，由中间向两边变小，当一个item越接近中间就放大，越远离中间就缩小。那么可以通过先获取ListVIEw的中点，然后获取当前可视的所有item跟ListVIEw的中点的垂直距离计算出一个比例，然后将item的大小根据这个比例进行缩放，各个item跟ListVIEw的中点的垂直距离不同，计算出来的比例也就不同，然后每次滚动的时候都计算比例然后进行缩放，这样应该就能实现我们想要的效果了。
因为一开始我的列表展示就是用ListVIEw做的，有其他效果在里面，也不方便换其他组件，所以依然还是用ListVIEw实现就好了。由于我们是每次一滚动都要进行缩放，ListVIEw有提供一个OnScrollListener，它的onScroll方法每次一开始滚动就会调用，所以我们选择重写它。当它被调用的时候，我们就开始获取ListVIEw中点，然后开始计算每个item的距离进行缩放.
/** * 中点的Y坐标 */ private float centerY = 0f; @OverrIDe public voID onScroll(AbsListVIEw vIEw,int firstVisibleItem,int visibleItemCount,int totalitemCount) { //计算中点 centerY = getHeight()/2; //判断中点的有效性 if(centerY <= 0){ return; } //开始对当前显示的VIEw进行缩放 for(int i = 0; i < visibleItemCount; i++){ //获取item VIEw temp_vIEw = getChildAt(i); //计算item的中点Y坐标 float itemY = temp_vIEw.getBottom()-(temp_vIEw.getHeight()/2); //计算离中点的距离 float distance = centerY; if(itemY > centerY){ distance = itemY - centerY; }else{ distance = centerY - itemY; } //根据距离进行缩放 temp_vIEw.setScaleY(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); temp_vIEw.setScaleX(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); //根据距离改变透明度 temp_vIEw.setAlpha(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); } } 后面不想加demo了，所以直接上整个ListVIEw的代码吧
/** * 模仿滚轮动画缩放的ListVIEw * Created by xu on 2017/3/3. */ public class XuListVIEw extends ListVIEw implements AbsListVIEw.OnScrollListener { private static final String TAG = "XuListVIEw"; /** * 中点的Y坐标 */ private float centerY = 0f; public XuListVIEw(Context context,AttributeSet attrs) { super(context,attrs); //设置一个滚动监听 setonScrollListener(this); } @OverrIDe public voID onScrollStateChanged(AbsListVIEw vIEw,int scrollState) { } @OverrIDe public voID onScroll(AbsListVIEw vIEw,int totalitemCount) { //计算中点 centerY = getHeight()/2; //判断中点的有效性 if(centerY <= 0){ return; } //开始对当前显示的VIEw进行缩放 for(int i = 0; i < visibleItemCount; i++){ //获取item VIEw temp_vIEw = getChildAt(i); //计算item的中点Y坐标 float itemY = temp_vIEw.getBottom()-(temp_vIEw.getHeight()/2); //计算离中点的距离 float distance = centerY; if(itemY > centerY){ distance = itemY - centerY; }else{ distance = centerY - itemY; } //根据距离进行缩放 temp_vIEw.setScaleY(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); temp_vIEw.setScaleX(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); //根据距离改变透明度 temp_vIEw.setAlpha(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); } } } 这样基本就实现了我们想要的效果了
但是现在有一个问题，就是第一个item和最后一个item无法滚动到中间从而放大突出显示。对此我暂时想了两个方法去解决：1、在头尾各种添加一些空白的item，使我们需要显示的数据都可以滚动到最中间。（我现在就是这么做的）；2、使整个列表实现循环滚动。
添加空白的item的话，我是通过修改adapter去实现的。数据源是一个数组，我在数组前面和后面各加一些特殊的数据，adapter实现getvIEw的时候，如果发现当前item的数据是特殊数据，那么item就变透明，从而实现了我们原本要显示的数据都可以被滚动最中间；
先从数据源下手，从头尾填充特殊的数据
public class MainActivity extends AppCompatActivity { XuListVIEw mlisetvIEw; MyAdapter adapter; ArrayList<String> nos = new ArrayList<String>(); @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); mlisetvIEw = (XuListVIEw) findVIEwByID(R.ID.List_test); ArrayList<String> temp = new ArrayList<String>(); for(int i = 0;i<10;i++){ temp.add(i+""); } adapter = new MyAdapter(this,temp); mlisetvIEw.setAdapter(adapter); resetitem(mlisetvIEw); } /** * 在头尾填充透明的item数据 */ private voID resetitem(ListVIEw ListvIEw) { if(ListvIEw == null){ return; } //获取屏幕高度 WindowManager wm =getwindowManager(); int displayheight = wm.getDefaultdisplay().getHeight(); //计算一个item的高度 int itemhight = 0; if(adapter!=null){ VIEw v=(VIEw)adapter.getVIEw(0,null,ListvIEw); v.measure( VIEw.MeasureSpec.makeMeasureSpec(0,VIEw.MeasureSpec.UnspecIFIED),VIEw.MeasureSpec.makeMeasureSpec(0,VIEw.MeasureSpec.UnspecIFIED)); itemhight=v.getMeasuredHeight(); } //根据Item的高度和屏幕的高度计算需要多少个item可以填满一半的屏幕 int newcount = ((displayheight/2)/itemhight); //填充前面的空白item for (int i = 1; i <= newcount; i++) { nos.add("full"); } //添加我们需要显示的数据 for(int i = 0;i<10;i++){ nos.add(i+""); } //填充后面的空白item for (int i = 1; i <= newcount; i++) { nos.add("full"); } //刷新数据 adapter.refreshData(nos); } } 然后adapter里面对头尾的特殊数据进行识别，将item变为透明的。
public class MyAdapter extends BaseAdapter { ArrayList<String> nos = new ArrayList<String>(); private Context context; public MyAdapter(Context context,ArrayList<String> nos){ this.context = context; this.nos = nos; } public voID refreshData(ArrayList<String> nos) { this.nos = nos; notifyDataSetChanged(); } @OverrIDe public int getCount() { return nos.size(); } @OverrIDe public Object getItem(int position) { return nos.get(position); } @OverrIDe public long getItemID(int position) { return position; } @OverrIDe public VIEw getVIEw(int position,VIEw convertVIEw,VIEwGroup parent) { VIEwHolder holder = null; if (convertVIEw == null) { // 如果是第一次显示该页面(要记得保存到vIEwholder中供下次直接从缓存中调用) holder = new VIEwHolder(); convertVIEw = LayoutInflater.from(context).inflate(R.layout.item_test,null); holder.tv_no = (TextVIEw) convertVIEw.findVIEwByID(R.ID.tv_no); convertVIEw.setTag(holder); } else { holder = (VIEwHolder) convertVIEw.getTag(); } holder.tv_no.setText(nos.get(position)); if(nos.get(position).equals("full")){ convertVIEw.setVisibility(VIEw.INVISIBLE); }else{ convertVIEw.setVisibility(VIEw.VISIBLE); } return convertVIEw; } private class VIEwHolder { TextVIEw tv_no; } } 这样我们就实现可以第一种解决方法
第二种方法，就是让整个ListVIEw实现循环滚动，实现的方式有很多，大家可以自行百度，我这里就通过修改adapter的getCount方法去实现，就是在getCount方法return一个很大的值，getVIEw获取数据的时候要模原本的数组大小，不然数组就越界了。然后ListVIEw滚动到最中间，这样就实现伪循环滚动了
public class MainActivity extends AppCompatActivity { XuListVIEw mlisetvIEw; MyAdapter adapter; ArrayList<String> nos = new ArrayList<String>(); @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); mlisetvIEw = (XuListVIEw) findVIEwByID(R.ID.List_test); ArrayList<String> temp = new ArrayList<String>(); for(int i = 0;i<10;i++){ temp.add(i+""); } adapter = new MyAdapter(this,temp); mlisetvIEw.setAdapter(adapter); //滚动到中间 mlisetvIEw.setSelection(adapter.getCount()/2); } } /** * Created by xu on 2017/6/27. */ public class MyAdapter extends BaseAdapter { ArrayList<String> nos = new ArrayList<String>(); private Context context; public MyAdapter(Context context,ArrayList<String> nos){ this.context = context; this.nos = nos; } @OverrIDe public int getCount() { return Integer.MAX_VALUE; } @OverrIDe public Object getItem(int position) { return nos.get(position); } @OverrIDe public long getItemID(int position) { return position; } @OverrIDe public VIEw getVIEw(int position,null); holder.tv_no = (TextVIEw) convertVIEw.findVIEwByID(R.ID.tv_no); convertVIEw.setTag(holder); } else { holder = (VIEwHolder) convertVIEw.getTag(); } holder.tv_no.setText(nos.get(position%nos.size())); return convertVIEw; } private class VIEwHolder { TextVIEw tv_no; } } 这样我们就实现了使列表进行循环滚动，从而达到每个item都可以滚动到中间突出显示的效果了
既然我们把动画效果都做出来了，那么也可以直接做成一个滚轮选择器，只需要加多两步：1、把最靠近中间的item滚动到中间；2、把中间的item的序号通过一个接口返回出去。 我就直接贴代码吧，反正也不难。
把最靠近中间的item滚动到中间的实现我是这么做的:首先决定好整个ListVIEw可视的的item数量是多少，必须是奇数，这样才能只有一个item处于正中间，然后根据ListVIEw的高度计算出每个item符合要求的高度，然后更改现有的item的高度，同时对内容进行缩放（不缩放内容单纯高度变小的话布局就乱了）。最后我们利用smoothScrollToposition方法回正可视item中的第一个item，就实现了将最中间的item回滚到最中间的效果了。因为可视的item我们是根据ListVIEw的高度去计算item的高度的，所有的可视item刚好铺满ListVIEw，所以只要顶部那个回正了，其他的item也会回正。所以我们可以重写一下OnScrollListener的onScrollStateChanged方法，每次滚动结束就执行一次回滚
/** * 可视的item数 */ private int mVisibleItemCount = -1; /** * 没调整之前每个item的高度 */ private float olditemheight = 0; /** * 调整过后的每个item的高度 */ private float newitemheight = -1; /** * 调整每个可视的item的高度 以及对内容进行缩放 */ public voID resetItemHeight() { for (int i = 0; i < getChildCount(); i++) { //获取item VIEw temp_vIEw = getChildAt(i); //设置item的高度 VIEwGroup.LayoutParams lp = temp_vIEw.getLayoutParams(); lp.height = (int) newitemheight; temp_vIEw.setLayoutParams(lp); //缩放内容 我的item的内容用一个linearLayout包了起来 所以直接缩放linearLayout linearLayout item_ll_value = (linearLayout) temp_vIEw.findVIEwByID(R.ID.item_ll_value); item_ll_value.setScaleY((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight)); item_ll_value.setScaleX((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight)); } } /** * 计算在给定的可视item数目下 每个item应该设置的高度 * */ private voID getNewItemHeight() { //先把旧的item存起来 olditemheight = getChildAt(0).getHeight(); //计算新的高度 newitemheight = getHeight() / mVisibleItemCount; if ((getHeight() / mVisibleItemCount) % newitemheight > 0) { //除不尽的情况下把余数分给各个item，暂时发现分一次余数就够了，如果效果不理想就做个递归多分几次 float remainder = (getHeight() / mVisibleItemCount) % newitemheight; newitemheight = remainder / mVisibleItemCount; } } @OverrIDe public voID onScrollStateChanged(AbsListVIEw vIEw,int scrollState) { //滚动结束之后开始回滚item if (scrollState == AbsListVIEw.OnScrollListener.SCRolL_STATE_IDLE && mVisibleItemCount != -1) { //使离中间最近的item回滚到中点位置 smoothScrollToposition(getFirstVisibleposition()); } } 实现了把最靠近中间的item滚动到中间，那么选择的item就是滚动结束后处于最中间的item。对此我们需要再次重写一下OnScrollListener的onScrollStateChanged方法。每次滚动结束后，取可视item中的第一个item的序号加上我们之前设置的可视item数的一半（舍去小数部分）就是最中间的item的序号了，也是当前选择项的序号。
/** * 当前选中项发生变化的监听者 */ private onSelectionChangelisenter selectionChangelisenter; /** * 设置选中项的监听者 */ public voID setSelectionChangelisenter(onSelectionChangelisenter selectionChangelisenter) { this.selectionChangelisenter = selectionChangelisenter; } @OverrIDe public voID onScrollStateChanged(AbsListVIEw vIEw,int scrollState) { //滚动结束之后开始正常回滚item并记录最中间的item为选中项 (必须设置可视项，ListVIEw才会改为选择器模式) if( scrollState == AbsListVIEw.OnScrollListener.SCRolL_STATE_IDLE && mVisibleItemCount != -1){ //使离中间最近的item回滚到中点位置 smoothScrollToposition(getFirstVisibleposition()); //计算当前选中项的序号 int Nowposition = getFirstVisibleposition() + mVisibleItemCount/2; //把当前选中项的序号存起来并通过Listener回调出去 if(selectionChangelisenter != null && Nowposition != curposition){ curposition = Nowposition; selectionChangelisenter.onSelectionChange(curposition); } } } 此处我是使用了一个接口去，用以实时把最新的数据返回出去
/** * Created by xu on 2017/3/3. */ public interface onSelectionChangelisenter { voID onSelectionChange(int position); } 使用这个滚轮选择器的方法也非常简单，除了跟正常的ListVIEw初始化和绑定adapter之外，只需要额外调用两个方法就行了
//设置ListVIEw的可视item数（必须是奇数） mlisetvIEw.setVisibleItemCount(3);
//设置监听者监听选中项的变化 mlisetvIEw.setSelectionChangelisenter(new onSelectionChangelisenter() { @OverrIDe public voID onSelectionChange(final int position) { mHandler.post(new Runnable() { @OverrIDe public voID run() { Toast.makeText(MainActivity.this,"选择项发生变化 当前选中序号："+(temp.get(position)),Toast.LENGTH_SHORT).show(); } }); } }); 这样我们就实现滚轮数字选择器的效果了
现在贴下整个滚轮选择器的完整代码
/** * 模仿滚轮动画缩放的ListVIEw * Created by xu on 2017/3/3. */ public class XuListVIEw extends ListVIEw implements AbsListVIEw.OnScrollListener { private static final String TAG = "XuListVIEw"; /** * 中点的Y坐标 */ private float centerY = 0f; /** * 可视的item数 */ private int mVisibleItemCount = -1; /** * 没调整之前每个item的高度 */ private float olditemheight = 0; /** * 调整过后的每个item的高度 */ private float newitemheight = -1; /** * 当前选中项发生变化的监听者 */ private onSelectionChangelisenter selectionChangelisenter; /** * 当前选中项的序号 */ private int curposition = -1; public XuListVIEw(Context context,attrs); //设置一个滚动监听 setonScrollListener(this); } /** * 设置选中项的监听者 */ public voID setSelectionChangelisenter(onSelectionChangelisenter selectionChangelisenter) { this.selectionChangelisenter = selectionChangelisenter; } /** * 设置ListVIEw的显示item数 * @param count ：必须是奇数 如果为-1 则表示只是使用动画效果的普通ListVIEw */ public boolean setVisibleItemCount(int count){ if(count % 2 == 0){ return false; }else{ mVisibleItemCount = count; return true; } } /** * 在这里第一次调整item高度 */ @OverrIDe public voID onWindowFocusChanged(boolean hasWindowFocus) { super.onWindowFocusChanged(hasWindowFocus); if(mVisibleItemCount != -1){ getNewItemHeight(); resetItemHeight(); } } /** * 调整每个可视的item的高度 以及对内容进行缩放 */ public voID resetItemHeight(){ for(int i = 0; i < getChildCount(); i++){ //获取item VIEw temp_vIEw = getChildAt(i); //设置item的高度 VIEwGroup.LayoutParams lp = temp_vIEw.getLayoutParams(); lp.height = (int)newitemheight; temp_vIEw.setLayoutParams(lp); //缩放内容 我的item的内容用一个linearLayout包了起来 所以直接缩放linearLayout linearLayout item_ll_value = (linearLayout)temp_vIEw.findVIEwByID(R.ID.item_ll_value); item_ll_value.setScaleY((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight)); item_ll_value.setScaleX((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight)); } } /** * 计算在给定的可视item数目下 每个item应该设置的高度 */ private voID getNewItemHeight(){ //先把旧的item存起来 olditemheight = getChildAt(0).getHeight(); //计算新的高度 newitemheight = getHeight()/mVisibleItemCount; if((getHeight()/mVisibleItemCount) % newitemheight > 0){ //除不尽的情况下把余数分给各个item，暂时发现分一次余数就够了，如果效果不理想就做个递归多分几次 float remainder = (getHeight()/mVisibleItemCount) % newitemheight; newitemheight = remainder/mVisibleItemCount; } } @OverrIDe public voID onScrollStateChanged(AbsListVIEw vIEw,int scrollState) { //滚动结束之后开始正常回滚item并记录最中间的item为选中项 (必须设置可视项，ListVIEw才会改为选择器模式) if( scrollState == AbsListVIEw.OnScrollListener.SCRolL_STATE_IDLE && mVisibleItemCount != -1){ //使离中间最近的item回滚到中点位置 smoothScrollToposition(getFirstVisibleposition()); //计算当前选中项的序号 int Nowposition = getFirstVisibleposition() + mVisibleItemCount/2; //把当前选中项的序号存起来并通过Listener回调出去 if(selectionChangelisenter != null && Nowposition != curposition){ curposition = Nowposition; selectionChangelisenter.onSelectionChange(curposition); } } } @OverrIDe public voID onScroll(AbsListVIEw vIEw,int totalitemCount) { //计算中点 centerY = getHeight()/2; //判断中点的有效性 if(centerY <= 0){ return; } //开始对当前显示的VIEw进行缩放 for(int i = 0; i < visibleItemCount; i++){ //获取item VIEw temp_vIEw = getChildAt(i); //计算item的中点Y坐标 float itemY = temp_vIEw.getBottom()-(temp_vIEw.getHeight()/2); //计算离中点的距离 float distance = centerY; if(itemY > centerY){ distance = itemY - centerY; }else{ distance = centerY - itemY; } //根据距离进行缩放 temp_vIEw.setScaleY(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); temp_vIEw.setScaleX(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); //根据距离改变透明度 temp_vIEw.setAlpha(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY)); } } } 注释很详细 相信小白看了也没什么难度。
滚轮效果的实现方式有很多，解决头尾两个item无法滚动到中间的方法也很多，我说的方法仅供参考，没有最好的方法，只有最符合自己的需求的方法。
demo下载地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。
总结以上是内存溢出为你收集整理的Android使用ListView实现滚轮的动画效果实例全部内容，希望文章能够帮你解决Android使用ListView实现滚轮的动画效果实例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）