iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android实现梯形TextView效果
  • 325
分享到

Android实现梯形TextView效果

2024-04-02 19:04:59 325人浏览 泡泡鱼
摘要

目录效果图:自定义代码实现逻辑:要点分析 1.背景与文本内容的绘制 2.梯形范围内外的点击事件处理 3.其它自定义属性 效果图: 自定义代码实现逻辑: public class

效果图:

自定义代码实现逻辑:


public class LadderTextView extends Android.support.v7.widget.AppCompatTextView {
    private static final String TAG = "LadderView";
    private Path linePath;
    private Paint paint, textPaint;
    private int width, height;
    private float strokeWidth = 2;
    private Region mRegion;
    private String textContent;
    private int lineOffset = 0;//划线的偏移量
    private int textOffset = 0;//文本的偏移量
    private float offsetScale = 1;//梯高与(梯顶与梯底)之差的比例(梯底比梯顶长)
    private boolean isLeft = true;//分为左和右两种斜角梯形模式
    private boolean isSelected = false;//是否是选定
    private int selectedColor = Color.BLACK;

    public LadderTextView(Context context) {
        super(context);
        init();
    }

    public LadderTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttributes(context, attrs);
        init();
    }


    public LadderTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttributes(context, attrs);
        init();
    }

    private void initAttributes(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LadderTextView);
        textContent = typedArray.getString(R.styleable.LadderTextView_textContent);
        offsetScale = typedArray.getFloat(R.styleable.LadderTextView_offsetScale, 0.5f);
        isLeft = typedArray.getBoolean(R.styleable.LadderTextView_isLeft, true);
        isSelected = typedArray.getBoolean(R.styleable.LadderTextView_isSelected, true);
        selectedColor = typedArray.getColor(R.styleable.LadderTextView_selectedColor, Color.GREEN);
        strokeWidth = typedArray.getDimension(R.styleable.LadderTextView_strokeWidth, 1);
        typedArray.recycle();
    }

    private void init() {
        Log.v(TAG, "init");
        mRegion = new Region();
        paint = new Paint();
        textPaint = new Paint();
        linePath = new Path();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(dp2px(getContext(), strokeWidth));
        paint.setColor(selectedColor);
        paint.setStyle(isSelected ? Paint.Style.FILL_AND_STROKE : Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);

        textPaint.setAntiAlias(true);
        textPaint.setTextSize(getTextSize());//传递TextSize(px)
        textPaint.setColor(isSelected ? Color.WHITE : selectedColor);
        setText("");//去除掉原有的Text内容
        lineOffset = dp2px(getContext(), strokeWidth) / 2;
        textOffset = (int) (getTextSize() / 2) + getBaseline() * 2;
        Log.v(TAG, "lineOffset textOffset ->" + lineOffset + " " + textOffset);
    }


    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = getWidth();
        height = getHeight();
        Log.v(TAG, "width height->" + width + " " + height);
    }

    @Override
    protected void onDraw(canvas canvas) {
        super.onDraw(canvas);
        Log.v(TAG, "onDraw");
        if (isLeft) {
            linePath.moveTo(0 + lineOffset, 0 + lineOffset);
            linePath.lineTo(width, 0 + lineOffset);
            linePath.lineTo((int) (width - offsetScale * height), height - lineOffset);
            linePath.lineTo(0 + lineOffset, height - lineOffset);
            linePath.close();
            setTextAlignment(TEXT_ALIGNMENT_TEXT_START);
            canvas.drawPath(linePath, paint);
            canvas.drawText(textContent == null ? "" : textContent,
                    getPaddingStart() + lineOffset,
                    height / 2 + textOffset, textPaint);
        } else {
            linePath.moveTo(0 + lineOffset + offsetScale * height, 0 + lineOffset);
            linePath.lineTo(width - lineOffset, 0 + lineOffset);
            linePath.lineTo(width - lineOffset, height - lineOffset);
            linePath.lineTo(0, height - lineOffset);
            linePath.close();
            setTextAlignment(TEXT_ALIGNMENT_TEXT_END);
            canvas.drawPath(linePath, paint);
            canvas.drawText(textContent == null ? "" : textContent,
                    getWidth() - lineOffset - getPaddingEnd() - getDrawTextWidth(textPaint, textContent),
                    height / 2 + textOffset, textPaint);
        }

    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (!isInRegion(event)) {//点击的点的位置不在范围内则不响应
                return false;
            }
        }
        return super.dispatchTouchEvent(event);
    }

    
    public boolean isInRegion(MotionEvent event) {
        RectF rectF = new RectF();
        linePath.computeBounds(rectF, true);
        mRegion.setPath(linePath, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
        return mRegion.contains((int) event.getX(), (int) event.getY());
    }

    
    private int getDrawTextWidth(Paint paint, String textContent) {
        float totalWidth = 0f;
        if (textContent != null && textContent.length() > 0) {
            int len = textContent.length();
            float[] widths = new float[len];
            paint.getTextWidths(textContent, widths);
            for (int j = 0; j < len; j++) {
                totalWidth += widths[j];
            }
        }
        return (int) Math.ceil(totalWidth);
    }

    
    private int dp2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    public void setTextContent(String textContent) {
        this.textContent = textContent;
        invalidate();
    }

    public void setMSelected(boolean isSelected) {
        textPaint.setColor(isSelected ? Color.WHITE : selectedColor);
        paint.setStyle(isSelected ? Paint.Style.FILL_AND_STROKE : Paint.Style.STROKE);
        this.isSelected = isSelected;
        invalidate();
    }

    @Override
    public boolean isSelected() {
        return isSelected;
    }
}

要点分析

1.背景与文本内容的绘制

计算好四个点的位置连线,TextView默认的文本内容则设置为空字符串,采用drawText的方式来实现文本的显示。需要注意的是计算文本的字号长度大小、颜色以及位于整个view的位置、偏移量等。

2.梯形范围内外的点击事件处理

依照于设计,梯形内的点击才有响应,则要计算点击的位置是否在梯形内,然后通过dispatchTouchEvent来做事件的分发。


 
    public boolean isInRegion(MotionEvent event) {
        RectF rectF = new RectF();
        linePath.computeBounds(rectF, true);
        mRegion.setPath(linePath, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
        return mRegion.contains((int) event.getX(), (int) event.getY());
    }

3.其它自定义属性

依据于需求来定,注意invalidate。

最后,完整代码

https://GitHub.com/ganshenml/LadderTextView

以上就是Android实现梯形TextView效果的详细内容,更多关于Android 梯形TextView的资料请关注编程网其它相关文章!

--结束END--

本文标题: Android实现梯形TextView效果

本文链接: https://www.lsjlt.com/news/126926.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android实现梯形TextView效果
    目录效果图:自定义代码实现逻辑:要点分析 1.背景与文本内容的绘制 2.梯形范围内外的点击事件处理 3.其它自定义属性 效果图: 自定义代码实现逻辑: public class...
    99+
    2024-04-02
  • Android如何实现梯形TextView效果
    小编给大家分享一下Android如何实现梯形TextView效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果图:自定义代码实现逻辑:public ...
    99+
    2023-06-15
  • Android中TextView和ImageView实现倾斜效果
    TextView倾斜:想做一个倾斜的TextView,想海报上显示的那样 ,在网上找例子一直不能实现,看了看TextView源码,发现很简单,为方便像我一样糊涂的孩纸,贴出来了.首先需要先自定义一个TextViewpublic class ...
    99+
    2023-05-30
    textview imageview 倾斜
  • Android用TextView实现跑马灯效果代码
    目录【前言】一、新手设置跑马灯效果【关键点讲解】【总结】二、高端玩家设置跑马灯效果三、延伸阅读总结【前言】      在Textvi...
    99+
    2024-04-02
  • Android Textview实现颜色渐变滚动效果
    本文实例为大家分享了Android颜色渐变滚动展示的具体代码,供大家参考,具体内容如下public class FlashTextView extends android.support.v7.widget.AppCompatTextVie...
    99+
    2023-05-30
    android textview 渐变
  • Android文本视图TextView实现跑马灯效果
    本文实例为大家分享了Android文本视图TextView实现跑马灯效果的具体代码,供大家参考,具体内容如下 MainActivity package com.example.j...
    99+
    2024-04-02
  • Android文本视图TextView实现聊天室效果
    本文实例为大家分享了Android文本视图TextView实现聊天室的具体代码,供大家参考,具体内容如下 Math.random()生成随机数的范围是 0 到 1 之间的 日期时间格...
    99+
    2024-04-02
  • Android实现圆形图片效果
    本文实例为大家分享了Android实现圆形图片效果的具体代码,供大家参考,具体内容如下 创建RoundPicture.java文件 在src/main/java/XX包下新建Ro...
    99+
    2024-04-02
  • Android TextView实现多文本折叠、展开效果
    背景在开发过程中,当我们的需求中包含说说或者评论等内容的展示时,我们都会考虑当内容太多时该如何显示。当内容的字数太多,如果全部展示出来可能会影响体验效果,但是又不能只截取一部分内容进行展示,此时就需要考虑使用多行显示折叠的效果来实现。效果图...
    99+
    2023-05-31
    android textview roi
  • Android中怎么用TextView实现跑马灯效果
    这篇“Android中怎么用TextView实现跑马灯效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Android中怎么...
    99+
    2023-06-29
  • android中怎么利用TextView实现跑马灯效果
    这篇文章给大家介绍android中怎么利用TextView实现跑马灯效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、要点设置四个属性android:singleLine="true"andro...
    99+
    2023-05-31
    android textview
  • Android TextView字体加粗效果
    两种不同的字体加粗效果: 正常情况下,TextView 设置字体加粗效果,直接在 xml 中设置, android:textStyle="bold" 第二种,则是通过代码设置 TextView,此处就...
    99+
    2023-10-19
    android
  • Android开发手册TextView属性实现效果盘点
    目录前言实践过程如何实现drawable的动画?图文混排前言 前面小空带大家了解了TextView的属性,实践了一些自定义粗细,阴影效果,链接形文字。 但这还仅仅局限在用她本身的能力...
    99+
    2024-04-02
  • Android用过TextView实现跑马灯效果的示例
    以前就遇到过这个问题,今天重新拾起来。跑马灯效果其实就是当文字超过TextView控件宽度的时候,使用滚动的方式显示出来:方法1:(直接xml搞定)Android系统中TextView实现跑马灯效果,必须具备以下几个条件: android:...
    99+
    2023-05-30
    textview 跑马灯 roi
  • 在Android中使用TextView实现一个跑马灯效果
    本篇文章为大家展示了在Android中使用TextView实现一个跑马灯效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 条件:android:ellipsize=”marquee”Te...
    99+
    2023-05-31
    textview android roi
  • 怎么在Android中利用TextView实现跑马灯效果
    怎么在Android中利用TextView实现跑马灯效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。MainActivitypackage com.exampl...
    99+
    2023-06-15
  • Android开发怎么实现TextView控件及阴影效果
    这篇文章主要介绍了Android开发怎么实现TextView控件及阴影效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Android开发怎么实现TextView控件及阴影效果文章都会有所收获,下面我们一起来看...
    99+
    2023-07-02
  • Android实现数字跳动效果的TextView方法示例
    前言本文介绍的是Android如何实现数字跳动效果的TextView,主要运用了DancingNumberView,DancingNumberView是一个用于跳动显示文本中数字的控件,继承自TextView,这种控件一般用于显示金额等对用...
    99+
    2023-05-31
    android textview 数字跳动
  • Android开发手册TextView控件及阴影效果实现
    目录实践过程初识文字阴影TextView是Android中最简单也是最常见的控件。今天小空就带大家会会她。 实践过程 初识 经过前两篇常用属性和不常用属性的讲解,是不是有些懵了,不要...
    99+
    2024-04-02
  • Android圆形控件实现画圆效果
    本文实例为大家分享了Android圆形控件实现画圆效果的具体代码,供大家参考,具体内容如下 实现圆形控件 实现如下 package com.example.demo.util;...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作