横向滑动选择器，点击自动切换选项。

最新推荐文章于 2024-05-29 09:36:24 发布
最新推荐文章于 2024-05-29 09:36:24 发布
阅读量2.6k 收藏 4
点赞数 1
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongruichun/article/details/86590046
版权

先来个效果：   (可以左右滑动，可以选中上一个，下一个，点击具体项选中那项)

（中间字体大，两边字体小，稍微有点拱桥形状，实现在onDraw后面几行代码，可自行优化）

 

 

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="HSelectView">
        <!--可见数目-->
        <attr name="ViewSeesize" format="integer"></attr>
        <!--被选择文字的大小和颜色-->
        <attr name="selectedTextSize" format="float"></attr>
        <attr name="selectedTextColor" format="color|reference"></attr>

        <!--未被被选择文字的大小和颜色-->
        <attr name="textSize" format="float"></attr>
        <attr name="textColor" format="color|reference"></attr>
    </declare-styleable>

</resources>

 

      初始化（不多赘述）

/**
     * 初始化画笔
     */
    private void initPaint() {
        textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextSize(textSize);
        textPaint.setColor(textColor);
        selectedPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        selectedPaint.setColor(selectedColor);
        selectedPaint.setTextSize(selectedTextSize);
    }


    /**
     * 初始化属性
     *
     * @param attrs
     */
    private void initAttrs(AttributeSet attrs) {
        TypedArray tta = context.obtainStyledAttributes(attrs,
                R.styleable.HSelectView);
        //两种字体颜色和字体大小
        seeSize = tta.getInteger(R.styleable.HSelectView_ViewSeesize, 5);
        selectedTextSize = tta.getFloat(R.styleable.HSelectView_selectedTextSize, 50);
        selectedColor = tta.getColor(R.styleable.HSelectView_selectedTextColor, context.getResources().getColor(android.R.color.black));
        textSize = tta.getFloat(R.styleable.HSelectView_textSize, 40);
        textColor = tta.getColor(R.styleable.HSelectView_textColor, context.getResources().getColor(android.R.color.darker_gray));

        tta.recycle();
    }

 

onDraw方法（确定每个item的坐标，然后加上偏移量，这一串东西就可以滑动了，左右任滑）

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        if (firstVisible) {//第一次绘制的时候得到控件 宽高；
            width = getWidth();
            height = getHeight();
            anInt = width / seeSize;
            firstVisible = false;
        }
        if (selectItem >= 0 && selectItem <= stringList.size() - 1) {//加个保护；防止越界

            String selectStr = stringList.get(selectItem);//得到被选中的文字
            /**
             * 得到被选中文字 绘制时所需要的宽高
             */
            selectedPaint.getTextBounds(selectStr, 0, selectStr.length(), rect);
            //3从矩形区域中读出文本内容的宽高
            int centerTextWidth = rect.width();
            centerTextHeight = rect.height();

            float selectWidth = getWidth() / 2 - centerTextWidth / 2 + anOffset;
            selectedPaint.setTextSize(calcTextSize(selectWidth + textWidth / 2));
            canvas.drawText(stringList.get(selectItem),
                    selectWidth,
                    getHeight() / 2 + centerTextHeight / 2,
                    selectedPaint);//绘制被选中文字，注意点是y坐标

            for (int i = 0; i < stringList.size(); i++) {//遍历strings，把每个地方都绘制出来，

                if (selectItem > 0 && selectItem < stringList.size() - 1) {
                    //这里主要是因为strings数据源的文字长度不一样，为了让被选中两边文字距离中心宽度一样，我们取得左右两个文字长度的平均值
                    textPaint.getTextBounds(stringList.get(selectItem - 1), 0, stringList.get(selectItem - 1).length(), rect);
                    int width1 = rect.width();
                    textPaint.getTextBounds(stringList.get(selectItem + 1), 0, stringList.get(selectItem + 1).length(), rect);
                    int width2 = rect.width();
                    textWidth = (width1 + width2) / 2;
                }
                if (i == 0) {//得到高，高度是一样的，所以无所谓
                    textPaint.getTextBounds(stringList.get(0), 0, stringList.get(0).length(), rect);
                    textHeight = rect.height();
                }


                if (i != selectItem) {
                    float weith = (i - selectItem) * anInt + getWidth() / 2 - textWidth / 2 + anOffset;
                    locX[i] = weith;//保存位置

                    textPaint.setTextSize(calcTextSize(weith + textWidth / 2));

                    canvas.drawText(stringList.get(i),
                            weith,
                            getHeight() / 2 + centerTextHeight / 2 + Math.abs(i - selectItem) * 3,
                            textPaint);//画出每组文字
                } else {
                    locX[i] = selectWidth;//保存位置
                }
            }


        }

    }
onTouchEvent方法(主要确定偏移量多少，偏移到一定位置，切换下一个item选中，哈哈哈哈。。。。)
@Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.e("action", "onTouchEvent: " + event.getAction());
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();//获得点下去的x坐标

                myDownX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE://复杂的是移动时的判断
                float scrollX = event.getX();


                anOffset = scrollX - downX;//滑动时的偏移量，用于计算每个是数据源文字的坐标值

                if (scrollX > downX) {
                    //向右滑动，当滑动距离大于每个单元的长度时，则改变被选中的文字。
                    if (scrollX - downX >= anInt / 2) {
                        if (selectItem > 0) {

                            anOffset = anOffset - anInt;
                            selectItem = selectItem - 1;
                            downX = scrollX - anOffset;

                            setListener(selectItem);
                        }
                    }
                } else {

                    //向左滑动，当滑动距离大于每个单元的长度时，则改变被选中的文字。
                    if (downX - scrollX >= anInt / 2) {

                        if (selectItem < stringList.size() - 1) {

                            anOffset = anInt + anOffset;
                            selectItem = selectItem + 1;
                            downX = scrollX - anOffset;
                            setListener(selectItem);
                        }
                    }
                }

                invalidate();
                break;

            case MotionEvent.ACTION_UP:
                //抬起手指时，偏移量归零，相当于回弹。

                if (Math.abs(myDownX - event.getX()) < 10) {
                    for (int i = 0; i < stringList.size(); i++) {
                        if (event.getX() > locX[i] && (i == stringList.size() - 1 || event.getX() < locX[i + 1])) {
                            selectItem = i;
                            setListener(selectItem);
                            break;
                        }
                    }
                }
                anOffset = 0;
                invalidate();

                break;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }

 

 

全部代码一起贴出：



import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ruedy on 2017/5/5.
 */

public class HorizontalselectedView extends View {

    private Context context;
    private List<String> stringList = new ArrayList<String>();//数据源字符串数组

    private Float[] locX;//记录每一个item 的x坐标

    private int seeSize = 5;//可见个数

    private int anInt;//每个字母所占的大小； 宽度除于可见个数
    private TextPaint textPaint;
    private boolean firstVisible = true;
    private int width;//控件宽度
    private int height;//控件高度
    private Paint selectedPaint;//被选中文字的画笔
    private int selectItem;
    private float downX;//位置会改变

    private float myDownX;//值不改变，只保存按下x值。
    private float anOffset;//滑动时的偏移量，用于计算每个是数据源文字的坐标值
    private float selectedTextSize;
    private int selectedColor;
    private float textSize;
    private int textColor;
    private Rect rect = new Rect();


    private int textWidth = 0;
    private int textHeight = 0;
    private int centerTextHeight = 0;


    public HorizontalselectedView(Context context) {
        this(context, null);
    }

    public HorizontalselectedView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HorizontalselectedView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        setWillNotDraw(false);
        setClickable(true);
        initAttrs(attrs);//初始化属性
        initPaint();//初始化画笔
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextSize(textSize);
        textPaint.setColor(textColor);
        selectedPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        selectedPaint.setColor(selectedColor);
        selectedPaint.setTextSize(selectedTextSize);
    }


    /**
     * 初始化属性
     *
     * @param attrs
     */
    private void initAttrs(AttributeSet attrs) {
        TypedArray tta = context.obtainStyledAttributes(attrs,
                R.styleable.HSelectView);
        //两种字体颜色和字体大小
        seeSize = tta.getInteger(R.styleable.HSelectView_ViewSeesize, 5);
        selectedTextSize = tta.getFloat(R.styleable.HSelectView_selectedTextSize, 50);
        selectedColor = tta.getColor(R.styleable.HSelectView_selectedTextColor, context.getResources().getColor(android.R.color.black));
        textSize = tta.getFloat(R.styleable.HSelectView_textSize, 40);
        textColor = tta.getColor(R.styleable.HSelectView_textColor, context.getResources().getColor(android.R.color.darker_gray));

        tta.recycle();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.e("action", "onTouchEvent: " + event.getAction());
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();//获得点下去的x坐标

                myDownX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE://复杂的是移动时的判断
                float scrollX = event.getX();


                anOffset = scrollX - downX;//滑动时的偏移量，用于计算每个是数据源文字的坐标值

                if (scrollX > downX) {
                    //向右滑动，当滑动距离大于每个单元的长度时，则改变被选中的文字。
                    if (scrollX - downX >= anInt / 2) {
                        if (selectItem > 0) {

                            anOffset = anOffset - anInt;
                            selectItem = selectItem - 1;
                            downX = scrollX - anOffset;

                            setListener(selectItem);
                        }
                    }
                } else {

                    //向左滑动，当滑动距离大于每个单元的长度时，则改变被选中的文字。
                    if (downX - scrollX >= anInt / 2) {

                        if (selectItem < stringList.size() - 1) {

                            anOffset = anInt + anOffset;
                            selectItem = selectItem + 1;
                            downX = scrollX - anOffset;
                            setListener(selectItem);
                        }
                    }
                }

                invalidate();
                break;

            case MotionEvent.ACTION_UP:
                //抬起手指时，偏移量归零，相当于回弹。

                if (Math.abs(myDownX - event.getX()) < 10) {
                    for (int i = 0; i < stringList.size(); i++) {
                        if (event.getX() > locX[i] && (i == stringList.size() - 1 || event.getX() < locX[i + 1])) {
                            selectItem = i;
                            setListener(selectItem);
                            break;
                        }
                    }
                }
                anOffset = 0;
                invalidate();

                break;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        if (firstVisible) {//第一次绘制的时候得到控件 宽高；
            width = getWidth();
            height = getHeight();
            anInt = width / seeSize;
            firstVisible = false;
        }
        if (selectItem >= 0 && selectItem <= stringList.size() - 1) {//加个保护；防止越界

            String selectStr = stringList.get(selectItem);//得到被选中的文字
            /**
             * 得到被选中文字 绘制时所需要的宽高
             */
            selectedPaint.getTextBounds(selectStr, 0, selectStr.length(), rect);
            //3从矩形区域中读出文本内容的宽高
            int centerTextWidth = rect.width();
            centerTextHeight = rect.height();

            float selectWidth = getWidth() / 2 - centerTextWidth / 2 + anOffset;
            selectedPaint.setTextSize(calcTextSize(selectWidth + textWidth / 2));
            canvas.drawText(stringList.get(selectItem),
                    selectWidth,
                    getHeight() / 2 + centerTextHeight / 2,
                    selectedPaint);//绘制被选中文字，注意点是y坐标

            for (int i = 0; i < stringList.size(); i++) {//遍历strings，把每个地方都绘制出来，

                if (selectItem > 0 && selectItem < stringList.size() - 1) {
                    //这里主要是因为strings数据源的文字长度不一样，为了让被选中两边文字距离中心宽度一样，我们取得左右两个文字长度的平均值
                    textPaint.getTextBounds(stringList.get(selectItem - 1), 0, stringList.get(selectItem - 1).length(), rect);
                    int width1 = rect.width();
                    textPaint.getTextBounds(stringList.get(selectItem + 1), 0, stringList.get(selectItem + 1).length(), rect);
                    int width2 = rect.width();
                    textWidth = (width1 + width2) / 2;
                }
                if (i == 0) {//得到高，高度是一样的，所以无所谓
                    textPaint.getTextBounds(stringList.get(0), 0, stringList.get(0).length(), rect);
                    textHeight = rect.height();
                }


                if (i != selectItem) {
                    float weith = (i - selectItem) * anInt + getWidth() / 2 - textWidth / 2 + anOffset;
                    locX[i] = weith;//保存位置

                    textPaint.setTextSize(calcTextSize(weith + textWidth / 2));

                    canvas.drawText(stringList.get(i),
                            weith,
                            getHeight() / 2 + centerTextHeight / 2 + Math.abs(i - selectItem) * 3,
                            textPaint);//画出每组文字
                } else {
                    locX[i] = selectWidth;//保存位置
                }
            }


        }

    }

    /**
     * 根据到中间位置的距离大小，确定字体的大小
     *
     * @param width
     * @return
     */
    private float calcTextSize(float width) {
        float size = selectedTextSize - textSize;//最大字体和最小字体差距

        float bilv = 1 - Math.abs(width - getWidth() / 2) / (getWidth() / 2);

        return textSize + size * bilv;
    }

    /**
     * 改变中间可见文字的数目
     *
     * @param seeSizes 可见数
     */
    public void setSeeSize(int seeSizes) {
        if (seeSize > 0) {
            seeSize = seeSizes;
            invalidate();
        }

    }


    /**
     * 向左移动一个单元
     */
    public void setAnLeftOffset() {
        if (selectItem < stringList.size() - 1) {
            selectItem = selectItem + 1;
            invalidate();
        }

    }

    /**
     * 向右移动一个单元
     */
    public void setAnRightOffset() {
        if (selectItem > 0) {
            selectItem = selectItem - 1;
            invalidate();
        }
    }

    /**
     * 设置个数据源
     *
     * @param strings 数据源String集合
     */
    public void setData(List<String> strings) {
        this.stringList = strings;

        locX = new Float[strings.size()];
        selectItem = strings.size() / 2;
        setListener(selectItem);
        invalidate();
    }

    /**
     * 获得被选中的文本
     *
     * @return 被选中的文本
     */
    public String getSelectedString() {
        if (stringList.size() != 0) {
            return stringList.get(selectItem);
        }
        return null;
    }


    private void setListener(int selectItem) {

        if (listener != null) {
            listener.itemSelect(selectItem);
        }

    }

    private OnItemSelectListener listener;

    public void setOnItemSelectListener(OnItemSelectListener listener) {
        this.listener = listener;
    }

    public interface OnItemSelectListener {

        void itemSelect(int item);
    }
}

 

使用方式：

 <com.iszcc.demo.carview.HorizontalselectedView
            android:id="@+id/hd_main"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="30"
            app:ViewSeesize="5"
            app:selectedTextColor="#f00"
            app:selectedTextSize="60"
            app:textColor="#0ff"
            app:textSize="40" />

监听：

hsMain.setOnItemSelectListener(new HorizontalselectedView.OnItemSelectListener() {
            @Override
            public void itemSelect(int item) {
                tvMain.setText(strings.get(item));
            }
        });

上一个、下一个

 hsMain.setAnLeftOffset();
 hsMain.setAnRightOffset();

 

zhongruichun
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Sgf横向滑动年龄选择器Broccoli-master.zip
07-09
Android RecyclerView 实现横向滚动年龄选择效果，仿拼多多可水平滚动RecyclerView,自定义滚动条滚动距离，预加载动画实现，ShimmerRecyclerView，ShimmerLayout，ShimmerLayout
Android自定义控件实战——滚动选择器PickerView
热门推荐
学无常师，负笈不远险阻
08-12 4万+
滚动选择器
横向选择器：HorizontalPicker——打造流畅的交互体验
最新发布
gitblog_00021的博客
05-29 779
横向选择器：HorizontalPicker——打造流畅的交互体验 HorizontalPickerAndroid widget allowing user to select one item from set of them by swiping left and right.项目地址:https://gitcode.com/gh_mirrors/hori/HorizontalPicker ...
安卓开发 简单实现自定义横向滚动选择View : HorizontalselectedView
哦，也好的博客
05-08 8106
一、需求：今日产品经理让在产品里面加了个横向选择的功能，控件样子大致要求为:网上找了好久没找到此控件，只能自己动手写了，很适合新手练习自定义View，并贡献给大家，效果如下：二、实现思路：这里我偷懒了，没有把上、左、右三个箭头写到控件里面，写进去也简单，不过突然感觉在外面布局，写个方法出来也是蛮帅的。所以今天我们的主角就是中间的可以横向滑动的部分，乍一看就是个recycleview,不过这里我没有想
swiper横向选择器
坚持原创
05-21 360
<swiper class="swiper" :indicator-dots="false" :autoplay="false" :current="initindex" @change="swiperchan"> <swiper-item v-for="(item,index) in list" :key="index"> <view class="swiper-item" :class="curindex == index?'uni-bg-red':''"&g
基于Qt自定义的滑动选择器
05-26
3. **值域设定**：可以设置滑动选择器的最小值和最大值，以及默认选中的初始值，这在处理数值范围或选项范围时非常实用。 4. **事件响应**：当用户滑动选择器时，会触发相应的事件，开发者可以通过这些事件获取当前...
横向、竖向手势滑动选择器
12-22
通过以上技术，开发者可以构建出一个类似于iOS的横向滑动选择器。在项目`TimePicker-master`中，我们可以预见到源码将包含实现这些功能的类和文件，如自定义的`TimePickerView`，手势识别逻辑，以及相关的布局和动画...
jquery选项卡切换插件制作slider滑动选项卡切换
11-22
jQuery的核心在于选择器（Selectors），它允许我们高效地定位DOM元素。例如，我们可以使用`$("#id")`选择ID为特定值的元素，`$(".class")`选择具有特定类名的所有元素，或者`$("tagname")`选择所有特定类型的元素。...
android左右滑动的选择控件
07-15
在Android社区中，有许多现成的库可以帮助开发者快速实现滑动选择控件，比如`HorizontalScrollView`、`ViewPager`以及一些第三方库如`PagerTabStrip`和`TabLayout`。这些库已经封装了大部分的滑动逻辑，只需简单配置...
jQuery滑动门选项卡上下滚动切换特效
06-09
在这款特效中，jQuery的主要作用是监听用户的鼠标行为，如悬停和移动，然后触发相应的动作，例如切换选项卡内容或显示特定的视觉效果。 "滑动门选项卡"是一种布局技术，它将多个内容区域（如图像、文本或视频）组织...
Android 横向选择器(HorizontalPickerView.java)
05-03
自定义Android 横向选择器
横向滑动时间选择器
10-19
横向滑动，可自定义View布局，时间选择器
ios-横向滑动选择器-使用简单-丰富自定义.zip
07-11
可以横向滚动的选择器，也可以用来当页面指示器。 使用简单，自定义方便。 详细使用说明见Github：https://github.com/976431yang/YQNumberSlideView
PickerView横向滑动
10-14
PickerView实现横向滑动选择数值的效果
移动端横向picker组件
01-05
使用vue开发移动端横向滚动的picker组件，不依赖任何框架和库，使用原生JS编写，组件代码约300行，代码难度一般。
微信小程序（10）——利用scroll-view实现横向滚动
蜗牛先生
02-13 1万+
这两天想做个小程序上线试试，小程序里需要用到横向滚动，却在做的过程中发现scroll-view即使加了scroll-x，也没有实现横向滚动的效果，于是查找了一下解决方案，解决方案如下： ▍解决方案 1、在scroll-view标签上加上样式属性：display: flex; white-space:nowrap； 2、scroll-view标签下的一级栏目标签需要加上样式属性：dis...
横向滚动条的设置
yangyanqin2545的博客
11-09 2176
横向滚动条的设置 当鼠标滑过的时候，出现横向的滚动条，在这里white-space：nowrap很关键 .scrollBox .inner1 .item:hover { overflow-x: scroll;//x轴出现滚动条 overflow-y: hidden;//y轴进行隐藏 white-space: nowrap; cursor: pointer;//将鼠标样式变为手指形 } 想要隐藏滚动条可以进行如下设置 .item::-webkit-scrollbar { display
Android 横向列表选中放大,Android横向滚动自动选中中间控件，底部recyclerview更着上面选中的改变...
weixin_29802189的博客
06-03 952
LocateCenterHorizontalView使用方法一、参考效果文中的Demo地址位于：https://github.com/chenxinfei/LocateCenterHorizontalView插入gif代码：gif5.gif一、特点1.使用方式和Recyclerview基本一样，非常易用。2.当滑动停止的时候默认选中中间的item，字体变大，变色，底部Recyclerview更着变...
pc端 横向滑动效果 切换菜单
07-08
1. 导航菜单支持横向排列：为了实现横向滑动切换菜单，菜单栏需要支持横向排列，这样用户才能够通过滑动手势移动到不同的菜单选项上。 2. 滑动功能的实现：使用横向滑动切换菜单时，需要通过鼠标或键盘等设备的操作...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值