使用ListView实现滚筒选择器效果

最新推荐文章于 2022-02-18 19:30:46 发布

csdn_韦振斌

最新推荐文章于 2022-02-18 19:30:46 发布

阅读量1.1k

点赞数 2

分类专栏：知识分享文章标签： android listview 滚筒选择器滚筒 wheel

本文链接：https://blog.csdn.net/u011453163/article/details/52960329

版权

知识分享专栏收录该内容

19 篇文章 0 订阅

订阅专栏

转载请注明出处http://blog.csdn.net/u011453163/article/details/52960329

Android和ios应用开发虽然大同小异，但是对于原生sdk提供的组件来说，ios要相对美观点，但是Android 的组件也是可以高度自定义的，基本上ios有的Android都能自定义达到相同的效果。
今天通过对listview做一点点小修改实现一个wheelview的效果（滚筒选择器）虽然网上已经有很多这样的效果，但有时候我只想实现一个比较简单的效果并不想去引入太多的类。。
先看效果图
这里写图片描述

这个选择器效果我只是在原来的listview上做了一些小修改，也踩了一些坑。
有两个点

1.数据循环   
2.滑动后的回弹居中

第一点我用的是取余的方法，这个在循环的viewpager里应该很多人都用过了。

第二点回弹居中的效果我用的是属性动画（ValueAnimator）而没用Scroller

关于第一点就不多说了，处理适配器的两个方法就可以了

  @Override
        public int getCount() {
            return datas!=null?2000:0;
        }

        @Override
        public String getItem(int position) {
            return datas!=null?datas.get(position%datas.size()):null;
        }

关于第二点回弹居中的效果
回弹居中效果，虽然listview有提供好几个平滑滚动的方法 
smoothScrollToPosition(int position)
smoothScrollByOffset(int offset) 

基本上带smooth的方法都是带有平滑效果的，但是都不是很理想，都有不能被接受的准确性，就是偏移了。
但是有一个方法是非常准确的

@Override
    public void setSelection(int position) {
        setSelectionFromTop(position, 0);
    }

这个方法一点也不陌生，就是滚到指定位置的。虽然不知道为什么这个不会偏差，然后找到里面的

 public void setSelectionFromTop(int position, int y)

很好，这个方法是可以直接用的。这个方法的效果是滚动到指定的位置偏移头的量，setSelectionFromTop(position, 0)，就是setSelection(int position)；
所以想到利用这个偏移量来达到回弹居中的效果想法大概是这样的
这里写图片描述

因为listview的复用，所以保证listview的高是item的奇数倍数就好了，所以只要监听listview的滚动就可以了


    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if(scrollState==SCROLL_STATE_IDLE){
            if(view instanceof ListView){
                View v = view.getChildAt(0);
                int position= view.getFirstVisiblePosition();
                if(-v.getTop()>v.getHeight()/2){
                    ScrollAnim((ListView) view,position, v.getTop(),-v.getHeight());
                    selectPosition=position+1;
                }else {
                    ScrollAnim((ListView) view,position, v.getTop(),0);
                    selectPosition=position;
               }

            }
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if(view instanceof ListView){
            for (int i = 0; i < view.getChildCount(); i++) {
                View v=view.getChildAt(i);
                if(v instanceof TextView){
                if(v.getY()+v.getHeight()/2>view.getHeight()/3&&v.getY()+v.getHeight()/2<view.getHeight()/3*2){
                    ((TextView) v).setTextColor(selectColor);
                    ((TextView) v).setTextSize(TypedValue.COMPLEX_UNIT_SP,selectTextSize);
                }else {
                    ((TextView) v).setTextColor(defColor);
                    ((TextView) v).setTextSize(TypedValue.COMPLEX_UNIT_SP,defTextSize);
                }
                }
            }
        }
    }

onScrollStateChanged里做的事是在滑动停止以后做回弹居中的效果
onScroll里是做了滑动过程中的一些选中变化，这里是做了字体颜色和大小的变化。

if(scrollState==SCROLL_STATE_IDLE){
            if(view instanceof ListView){
                View v = view.getChildAt(0);
                int position= view.getFirstVisiblePosition();
                if(-v.getTop()>v.getHeight()/2){
                    ScrollAnim((ListView) view,position, v.getTop(),-v.getHeight());
                    selectPosition=position+1;
                }else {
                    ScrollAnim((ListView) view,position, v.getTop(),0);
                    selectPosition=position;
               }

            }
        }

停止以后计算第一个显示的item的偏移量以决定是向上滚动或者向下滚动，平滑滚动是用的属性动画api ValueAnimator

 private void ScrollAnim(final ListView v, final int position, int y1, int y2){
        ValueAnimator valueAnimator= ValueAnimator.ofInt(y1,y2);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                v.setSelectionFromTop(position,((Integer) animation.getAnimatedValue()).intValue());
            }
        });
        valueAnimator.setDuration(150);
        valueAnimator.start();
    }

这里就是用到了setSelectionFromTop(position,y)这个方法；

最后是划线的，上下蒙层效果

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(20,getHeight()/3,getWidth()-20,getHeight()/3,paintLine);
        canvas.drawLine(20,getHeight()/3*2,getWidth()-20,getHeight()/3*2,paintLine);
    }
    @Override
    public void draw(Canvas canvas) {
        initFirst();
        canvas.saveLayer(0,0,this.getWidth(),this.getHeight(),null,Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
        super.draw(canvas);
        paintShader.setShader(shaderTop);
        canvas.drawRect(0, 0, this.getWidth(), 100,paintShader);
        paintShader.setShader(shaderButtom);
        canvas.drawRect(0, this.getHeight()-100,this.getWidth(), this.getHeight(),paintShader);
    }

详细的看代码。

package com.weizhenbin.show.widget;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;
import android.widget.TextView;

/**
 * Created by weizhenbin on 2016/10/26.
 */
public class WheelListView extends ListView implements AbsListView.OnScrollListener {

    private Paint paintLine,paintShader;
    private int selectColor= Color.BLUE;//选择字体颜色
    private int defColor= Color.BLACK;//默认字体颜色
    private int selectTextSize=20;//选择字体大小  单位sp
    private int defTextSize=15;//默认字体大小  单位sp

    private LinearGradient shaderTop;
    private LinearGradient shaderButtom;
    private boolean hasInit=false;

    public int selectPosition;
    public WheelListView(Context context) {
        this(context,null);
    }

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

    public WheelListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOnScrollListener(this);
        paintLine=new Paint();
        paintLine.setStrokeWidth(2);
        paintLine.setColor(selectColor);
    }


    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if(scrollState==SCROLL_STATE_IDLE){
            if(view instanceof ListView){
                View v = view.getChildAt(0);
                int position= view.getFirstVisiblePosition();
                if(-v.getTop()>v.getHeight()/2){
                    ScrollAnim((ListView) view,position, v.getTop(),-v.getHeight());
                    selectPosition=position+1;
                }else {
                    ScrollAnim((ListView) view,position, v.getTop(),0);
                    selectPosition=position;
               }

            }
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if(view instanceof ListView){
            for (int i = 0; i < view.getChildCount(); i++) {
                View v=view.getChildAt(i);
                if(v instanceof TextView){
                if(v.getY()+v.getHeight()/2>view.getHeight()/3&&v.getY()+v.getHeight()/2<view.getHeight()/3*2){
                    ((TextView) v).setTextColor(selectColor);
                    ((TextView) v).setTextSize(TypedValue.COMPLEX_UNIT_SP,selectTextSize);
                }else {
                    ((TextView) v).setTextColor(defColor);
                    ((TextView) v).setTextSize(TypedValue.COMPLEX_UNIT_SP,defTextSize);
                }
                }
            }
        }
    }
    private void initFirst() {
        if(!hasInit){
            paintShader =new Paint();
            paintShader.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
            shaderTop=new LinearGradient(0, 0, 0, 100, 0xFF000000, 0,
                    Shader.TileMode.CLAMP);
            shaderButtom=new LinearGradient(0, this.getHeight()-100, 0, this.getHeight(), 0, 0xFF000000,
                    Shader.TileMode.CLAMP);
            hasInit=true;
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(20,getHeight()/3,getWidth()-20,getHeight()/3,paintLine);
        canvas.drawLine(20,getHeight()/3*2,getWidth()-20,getHeight()/3*2,paintLine);
    }
    @Override
    public void draw(Canvas canvas) {
        initFirst();
        canvas.saveLayer(0,0,this.getWidth(),this.getHeight(),null,Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
        super.draw(canvas);
        paintShader.setShader(shaderTop);
        canvas.drawRect(0, 0, this.getWidth(), 100,paintShader);
        paintShader.setShader(shaderButtom);
        canvas.drawRect(0, this.getHeight()-100,this.getWidth(), this.getHeight(),paintShader);
    }
    /**
     * 平滑滚动
     * */
    private void ScrollAnim(final ListView v, final int position, int y1, int y2){
        ValueAnimator valueAnimator= ValueAnimator.ofInt(y1,y2);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                v.setSelectionFromTop(position,((Integer) animation.getAnimatedValue()).intValue());
            }
        });
        valueAnimator.setDuration(150);
        valueAnimator.start();
    }

    public void setSelectColor(int selectColor) {
        this.selectColor = selectColor;
    }

    public void setDefColor(int defColor) {
        this.defColor = defColor;
    }

    public void setSelectTextSize(int selectTextSize) {
        this.selectTextSize = selectTextSize;
    }

    public void setDefTextSize(int defTextSize) {
        this.defTextSize = defTextSize;
    }
}

好到此就分享完了，这里只是给一个思路而已，如果有幸被使用，注意的是 WheelListView的高度是item的三倍最好，还没很完善的做好适配。

csdn_韦振斌

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用ListView实现滚筒选择器效果

Android和ios应用开发虽然大同小异，但是对于原生sdk提供的组件来说，ios要相对美观点，但是Android 的组件也是可以高度自定义的，基本上ios有的Android都能自定义达到相同的效果。今天通过对listview做一点点小修改实现一个wheelview的效果（滚筒选择器）虽然网上已经有很多这样的效果，但有时候我只想实现一个比较简单的效果并不想去引入太多的类。。先
复制链接

扫一扫