自定义View（Path,Bitmap,Slider）

最新推荐文章于 2023-01-13 07:30:00 发布
最新推荐文章于 2023-01-13 07:30:00 发布
阅读量409 收藏
点赞数
分类专栏： 界面设计 android 文章标签： path 位图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_lihaimeng/article/details/48527793
版权

1、Path

public class MyPath extends View {
    private int width;
    private int height;
    private Path mPath;
    private Paint mPaint;
    private Paint mPaintNew;
    private int count = 0;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case 0x23:
                    count+=10;
                    if(count>80){//注意这里的count值要>80
                        count=0;
                    }
                    invalidate();
                    handler.sendEmptyMessageDelayed(0x23, 20);
                    break;
            }

        }
    };

    public MyPath(Context context) {
        super(context);
    }

    public MyPath(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(20);
        //      mPaint.setStrokeWidth(5);
        mPaint.setAntiAlias(true);//去锯齿

        mPaintNew = new Paint();
        mPaintNew.setColor(Color.RED);
        mPaintNew.setStrokeWidth(5);
        mPaintNew.setStyle(Paint.Style.STROKE);
        mPath = new Path();
        handler.sendEmptyMessage(0x23);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画三角形
        mPath.moveTo(100, 100);
        mPath.lineTo(0, 200);
        mPath.lineTo(200, 200);
        mPath.close();
        canvas.drawPath(mPath, mPaint);
        canvas.drawTextOnPath("在三角形边上写点啥呢", mPath, 50, 20, mPaint);
        //画圆
        mPath.addCircle(width/2,height/2,300,Path.Direction.CW);
        canvas.drawPath(mPath,mPaint);
        canvas.drawTextOnPath("在这里我要写点啥呢",mPath,1000,50,mPaint);//1000文字开始写的偏移，50文字相对圆的上下偏移
        //画贝塞尔曲线
        mPath.moveTo(100,100);//起始点坐标
        mPath.quadTo(100, 400, 300, 300);//控制点坐标，结束点坐标
        canvas.drawPath(mPath, mPaint);
        canvas.drawPoint(100, 100, mPaint);
        canvas.drawPoint(100,400,mPaint);
        canvas.drawPoint(300,300,mPaint);
        //波浪
        mPath.reset();
        mPath.moveTo(count, 100);
       for(int i =0;i<10;i++) {
           mPath.rQuadTo(20, 5, 40, 0);//一个完整的波浪长度为80
           mPath.rQuadTo(20, -5, 40, 0);
       }
        canvas.drawPath(mPath, mPaint);
        canvas.drawCircle(300, 100, 50, mPaintNew);
    }
}

三角形
这里写图片描述
贝塞尔曲线
这里写图片描述
圆
这里写图片描述

2、BitmapView

public class BitmapView extends View {
    private int width;
    private int height;
    private Bitmap mBitmap;
    private Paint mPaint;
    private Matrix matrix;
    private int imageWidth;
    private int imageHeight;

    public BitmapView(Context context) {
        super(context);
    }

    public BitmapView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.hh);
        mPaint = new Paint();
        matrix = new Matrix();
        imageWidth = mBitmap.getWidth();
        imageHeight = mBitmap.getHeight();
        Log.d("图片的高: " + mBitmap.getHeight(), "图片的宽: " + mBitmap.getWidth());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //   canvas.drawBitmap(mBitmap,50,100,mPaint);//将图片画入
        matrix.reset();
        matrix.postScale(2, 2);//x,y轴各放大两倍
        canvas.drawBitmap(mBitmap, matrix, mPaint);
        matrix.reset();
        canvas.drawBitmap(mBitmap, matrix, mPaint);//把原图再画到放大的图片上

        matrix.reset();
        matrix.postTranslate(0, imageHeight * 2);//平移，x轴不变，y轴向下平移高的两倍
        canvas.drawBitmap(mBitmap, matrix, mPaint);

        matrix.reset();
        matrix.postRotate(90);//旋转180度
        matrix.postTranslate(imageWidth * 2, imageHeight * 2);//x,y轴都平移两倍
        canvas.drawBitmap(mBitmap, matrix, mPaint);

        matrix.reset();
        float matrix_values[] = {1f, 0f, 0f, 0f, -1f, 0f, 0f, 0f, 1f};//关于x轴对称
        matrix.setValues(matrix_values);
        matrix.postTranslate(0, imageHeight * 2);
        canvas.drawBitmap(mBitmap, matrix, mPaint);

        matrix.reset();
        float matrix_values2[] = {-1f, 0f, 0f, 0f, 1f, 0f, 0f, 0f, 1f};//关于y轴对称
        matrix.setValues(matrix_values2);
        matrix.postTranslate(imageWidth * 3, 0);
        canvas.drawBitmap(mBitmap, matrix, mPaint);

        matrix.reset();
        float matrix_values3[] = {1f, 0f, 0f, 0f, -1f, 0f, 0f, 0f, 1f};
        matrix.setValues(matrix_values3);
        matrix.postTranslate(0, imageHeight * 4);
        matrix.postTranslate(imageWidth * 2, 0);
        matrix.postScale(2, 2,imageWidth*2, imageHeight *3);//以imageWidth*2, imageHeight *3点放大
        canvas.drawBitmap(mBitmap, matrix, mPaint);
    }
}

处理如下：
这里写图片描述

public class BitmapView2 extends View {
    private int width;
    private int height;
    private Paint mPaintCircle;
    private  Paint mPaintRect;
    private Bitmap mBitmap;
    private Canvas mCanvas;

    public BitmapView2(Context context) {
        super(context);
    }

    public BitmapView2(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintCircle = new Paint();
        mPaintCircle.setColor(Color.YELLOW);
        mPaintRect = new Paint();
        mPaintRect.setColor(Color.GREEN);

        PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.XOR);//这里可以改变mode来得到不同的效果
        mPaintRect.setXfermode(mode);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.GRAY);
        mCanvas.drawCircle(width / 2, height / 2, width / 2, mPaintCircle);
        mCanvas.drawRect(0, 0, width / 2, height / 2, mPaintRect);
        canvas.drawBitmap(mBitmap,0,0,null);
    }
}

运行如下：
这里写图片描述

3、Slider（手机联系人查询）

布局文件

   <com.my.administrator.zdyview.MySlider
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textSize="50dp"
        android:layout_centerInParent="true"
        android:gravity="center" />

MySlider类继承 View，重写发放，画相应内容

public class MySlider extends View {
    private int width;
    private int height;
    private Paint mPaintText;
    private Paint mPaintRed;
    private String[] array = {"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n",
            "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"};
    private int index = -1;

    //设置观察者模式
    public interface OnItemSelect {
        public void onItemSelected(int index, String s);
    }

    private OnItemSelect listener;
//添加监听器
    public void setOnItemSelectListener(OnItemSelect listener) {
        this.listener = listener;
    }

    public MySlider(Context context) {
        super(context);
    }

    public MySlider(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintText = new Paint();
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintRed = new Paint();
        mPaintRed.setColor(Color.RED);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
        mPaintText.setTextSize(height / 26f);//每个字的大小是总宽度除以26个字母
        mPaintRed.setTextSize(height / 26f);
    }

    private float x;
    private float y;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
                x = event.getX();
                y = event.getY();
                if (x > width - mPaintText.measureText("m") * 2) {
                    index = (int) y / (height / 26);
                    Log.d("onTouch", "点击了字母" + array[index]);
                    //     Toast.makeText(getContext(), "点击了字母" + array[index], Toast.LENGTH_SHORT).show();
                    if (listener != null) {
                        listener.onItemSelected(index, array[index]);//调用onItemSelected方法
                    }
                    invalidate();
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                index=-1;
                invalidate();
                return true;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < array.length; i++) {
            if (index == i) {
                canvas.drawText("" + array[i], width - mPaintText.measureText("m"), height / 26 * (i + 1), mPaintRed);
            } else {
                canvas.drawText("" + array[i], width - mPaintText.measureText("m"), height / 26 * (i + 1), mPaintText);
            }
        }
    }
}

在Activity中

 private TextView mTextView;
    private MySlider mySlider;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextView = (TextView) findViewById(R.id.textview);
        mySlider = (MySlider) findViewById(R.id.view);
        mySlider.setOnItemSelectListener(new MySlider.OnItemSelect() {//调用监听器
            @Override
            public void onItemSelected(int index, String s) {//重写onItemSelected方法
                mTextView.setText(s);
            }
        });

这里写图片描述
触摸到字母时会变红色，同时中间的TextView显示所处的字母

mr_haiMeng
关注
专栏目录
Android自定义View最全面试题及参考答案
大模型大数据攻城狮的专栏
08-06 296
为了创建一个完全自定义的进度条，你可以创建一个新的View类并重写onDraw()方法。init();init();init();@Override// 重新绘制视图。
AppKit 概览
AI + 工程
02-11 2591
AppKit 概览 文章目录AppKit 概览AppKit 简介相关主题一、Essentials1、 （[Protecting the User’s Privacy](https://developer.apple.com/documentation/uikit/protecting_the_user_s_privacy)） 保护用户隐私2 （[Porting Your macOS Apps to Apple Silicon](https://developer.apple.com/documentati
bitmapslider
07-16
slider control example a custom control program
一个不错的slider
a392474579的博客
10-11 90
http://bqworks.com/slider-pro/ 转载于:https://www.cnblogs.com/Brittany-yan/p/4869694.html
第四十一天 Path（画路径）、Bitmap、Slider（手机联系人首字母选项）
yj13073702570的博客
09-18 385
两图形的关系图：MyPathViewpublic class MyPathView extends View { private int width; private int height; private Paint mPaint; private Path mPath; private Paint mPaintPoint; private int
VC通过位图，来实现Slider控件
hrjhrj12345的专栏
03-24 1940
VC通过位图，来实现Slider控件1、 增加 "BitmapSlider.h"、"BitmapSlider.cpp" 、 "memdc.h" 到工程.好像上传不了附件，所以需要这些文件的话，找我吧，哈。2、  增加"Picture"控件到主对话框中，3、  增加位图，假如在工程中增加的位图如下：IDB_MP_CHANNEL、IDB_MP_CHANNEL_ACTIVE、IDB_MP_T
安卓自定义View在bitmap中玩转大波浪进度
AndroidMsky的博客
12-08 4650
迫不及待拿出了效果图： 可切换波澜4种状态：https://github.com/AndroidMsky/BitmapWaveView觉得不错顺手给个star谢谢大兄弟们了使用方法：考入BitmapWave还是一个200行的小鬼：BitmapWave.java两个自定义属性：<declare-styleable name="bitmapWave"> <attr name="back
Jetpack Compose中的Canvas
最新发布
川峰的博客
01-13 1843
Jetpack Compose中直接提供了一个叫 Canvas 的 Composable 组件，可以在任何 Composable 组件中直接使用，在 Canvas 的DrawScope作用域中就可以使用其提供的各种绘制Api进行绘制了。这比传统View要方便的多，传统View中，你只能继承一个View控件，才有机会覆写其onDraw()方法。Canvas Api使用相比比传统View中的要简单一些，不需要画笔Paint和画布分开来，大多数直接就是一个函数搞定，当然也有一些限制。
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
slider控件的美化
03-25
美化slider控件，实现各式各样的slider控件的界面优化，集成slider大部分操作
MFC：一个不错的贴图Slider，CBitmapSlider
05-22
美观的滑动条类。通过贴图实现。并提供多个例子供参考 VS2005工程
完美slider类，解决很多BUG
07-30
可以实现定点控制，解决了系统自带SLIDER控件的很多问题，且不需要相应新的函数
Android开源经典项目
Tamic （大白）
09-13 5752
Android开源项目大全，包括经典个人博客，组织和开源项目
【190515】VC++中的CBitmapSlider 控件应用实例源代码
资源小站
05-15 182
源码下载简介 VC++源码CBitmapSlider，本例收集了超多的CSliderCtrl控件丰富多彩的应用，值得初学者学习。运行时如会弹出错误窗口，请点忽略。控件实例集运行截图如上所示，非常漂亮的。 源码下载地址：点击下载 备用下载地址：点击下载 ...
Android 自定义View 图片按Path运动和旋转
打渔还是晒网 —— stone
07-27 8768
View： /** * author : stone * email : aa86799@163.com * time : 16/5/29 15 29 */ public class EarthPathView extends View { private Path mPath; private Paint mPaint; private Bitmap m
VC++ CSliderCtrl自绘
老狼的专栏
05-18 621
效果图： 头文件声明（CSWSliderCtrl.h）： #pragma once // CSWSliderCtrl namespace sw { class CSWSliderCtrl : public CWnd { DECLARE_DYNAMIC(CSWSliderCtrl) public: CSWSliderCtrl(); virtual ~CSWSliderCtrl(); void SetToolTipText(LPCSTR lpszToolTipText
Android自定义View实现圆形头像详解
"Android自定义View之绘制圆形头像功能" 在Android开发中，自定义View是实现特定功能或设计需求的重要手段。本教程将详细介绍如何通过自定义View来实现圆形头像的功能。通常，用户界面中的头像展示，尤其是个人资料...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值