Android自定义View

最新推荐文章于 2024-11-08 13:58:32 发布
最新推荐文章于 2024-11-08 13:58:32 发布
阅读量733 收藏 2
点赞数
分类专栏： 自定义控件 文章标签： android 控件 android开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwbzwbzwbzwbzwbzwb/article/details/52558772
版权

对于Android自定义控件，这是Android开发进阶的一个重要技能，从此踏入自定义的门槛。今天就先继承自View，实现两个比较基本的自定义控件。先看效果图：
这里写图片描述
自定义控件一般需要如下几步：
1、自定义属性。因为在自定义控件的过程中往往需要在控件上添加我们自己希望的属性。
2、在自定义控件中获取我们自定义的属性。
3、自定义OnMeasure()方法。（可选，因为系统默认了一个实现方法，许多时候我们并不需要处理这个方法）
4、自定义onDraw()方法。（在屏幕上绘制出控件的模样）
5、在布局文件中引用类型
由于上面两个控件自定义的操作步骤是相同的，所以两个控件就一起说了。
第一步自定义属性：
每个自定义的属性都需要给定一个属性值得类型，几种类型已经在下面代码中标识出来

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

    <!--
    这个是第一个的自定义属性,name表示属性的名称,format表示属性值得类型
    color:颜色            比如android:textColor="#ffffff"
    dimension:尺寸        比如 android:textSize="16sp"
    enum:枚举类型          比如 android:layout_width="wrap_content"
    boolean:             true 或者 false
    flag:位或类型          用 | 连接起来, 比如android:layout_gravity="center|vertical"
    float:浮点类型
    fraction:百分数
    reference:引用类型     比如 android:textColor="@color/mycolor"
    string:字符串类型
    -->
    <declare-styleable name="ProgressView">
        <attr name="colorWidth" format="dimension"/>
        <attr name="noColorWidth" format="dimension"/>
        <attr name="color" format="color"/>
        <attr name="width" format="dimension"/>
        <attr name="speed" format="enum">
            <enum name="fast" value="5"/>
            <enum name="middle" value="3"/>
            <enum name="slow" value="1"/>
        </attr>
    </declare-styleable>

    <declare-styleable name="ClockView">
        <attr name="hourColor" format="color"/>
        <attr name="minuteColor" format="color"/>
        <attr name="secondColor" format="color"/>
        <attr name="tableColor" format="color"/>
    </declare-styleable>
</resources>

下面是第二三四步的代码，首先来看第一个自定义控件的代码。说明已经在代码中标注出来，主要实现的是onDraw()方法用来绘制控件，这部分有时候需要考虑的是数学问题，而在这个控件中实现不断向右滑动就是利用科count的不断连续性的改变实现的。

public class ProgressView extends View {

    //下面的几个变量用来存储各个属性值。
    int colorWidth;
    int noColorWidth;
    int color;
    Paint paint;
    int count = 0;
    int screenWidth;
    int speed;
    int width;
    public ProgressView(Context context) {
        super(context);
    }

    public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    public ProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //通过typedArray来获取各个属性值
        TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.ProgressView);
        colorWidth = array.getDimensionPixelSize(R.styleable.ProgressView_colorWidth,20);
        noColorWidth = array.getDimensionPixelSize(R.styleable.ProgressView_noColorWidth,20);
        color = array.getColor(R.styleable.ProgressView_color, Color.BLUE);
        speed = array.getInt(R.styleable.ProgressView_speed,3);
        width = array.getDimensionPixelSize(R.styleable.ProgressView_width,10);

        //初始化画笔
        paint = new Paint();
        paint.setColor(color);
        paint.setStrokeWidth(width);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        screenWidth = getWidth();
        int start = count % (colorWidth + noColorWidth);
        start = start - (colorWidth + noColorWidth);
        while (start < screenWidth) {
            canvas.drawLine(start,getHeight()/2,start+colorWidth,getHeight()/2,paint);
            start += colorWidth+noColorWidth;
        }
        count += speed;
        count %= (colorWidth+noColorWidth);
        /*
        每当绘制一次count增加,然后调用invalidate(),会重新执行onDraw方法,而每次绘制会根据count的值绘制
        到不同的位置，从而就达到了动态的效果。
        这里有两个方法postInvalidate()和invalidate()方法.其中前者是在工作线程中被调用,
        而后者在UI线程中被调用
        */
        invalidate();
    }
}

下面的代码是实现那个时钟控件。

package com.zwbin.custom;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;
import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by wenbin on 16/9/14.
 */
public class ClockView extends View {

    int hourColor;
    int minuteColor;
    int secondColor;
    int tableColor;

    Paint paint;

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

    public ClockView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.ClockView);
        hourColor = typedArray.getColor(R.styleable.ClockView_hourColor, Color.RED);
        minuteColor = typedArray.getColor(R.styleable.ClockView_minuteColor, Color.BLUE);
        secondColor = typedArray.getColor(R.styleable.ClockView_secondColor, Color.GREEN);
        tableColor = typedArray.getColor(R.styleable.ClockView_tableColor, Color.GRAY);

        paint = new Paint();
    }

    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //开始画表盘
        paint.setColor(tableColor);
        paint.setStrokeWidth(3);
        paint.setStyle(Paint.Style.STROKE);
        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width/2,height/2);
        canvas.drawCircle(width/2,height/2,radius,paint);
        paint.setStrokeWidth(8);
        //表盘最长的四条线
        for (int i = 0;i < 4;i++) {
            double degree = Math.PI/2 * i;
            double sin = Math.sin(degree);
            double cos = Math.cos(degree);
            canvas.drawLine((int)(radius*sin + width/2),
                    (int)(height/2-radius*cos),
                    (int)((radius-60)*sin + width/2),
                    (int)(height/2 - (radius-60)*cos),
                    paint);
        }
        //表盘第二长的12条线
        for (int i = 0;i < 12;i++) {
            double degree = Math.PI/6 * i;
            double sin = Math.sin(degree);
            double cos = Math.cos(degree);
            canvas.drawLine((int)(radius*sin + width/2),
                    (int)(height/2-radius*cos),
                    (int)((radius-40)*sin + width/2),
                    (int)(height/2 - (radius-40)*cos),
                    paint);
        }
        //表盘最短的60条线
        for (int i = 0;i < 60;i++) {
            double degree = Math.PI/30 * i;
            double sin = Math.sin(degree);
            double cos = Math.cos(degree);
            canvas.drawLine((int)(radius*sin + width/2),
                    (int)(height/2-radius*cos),
                    (int)((radius-20)*sin + width/2),
                    (int)(height/2 - (radius-20)*cos),
                    paint);
        }
        //开始画中心点
        paint.setStrokeWidth(30);
        canvas.drawPoint(width/2,height/2,paint);

        Calendar calendar = Calendar.getInstance();
        int hour = calendar.get(Calendar.HOUR);
        int mimute = calendar.get(Calendar.MINUTE);
        int second = calendar.get(Calendar.SECOND);
        //开始画时针
        int hourRadius = radius/3;
        paint.setStrokeWidth(30);
        paint.setColor(hourColor);
        canvas.drawLine(width/2,
                height/2,
                (int)(width/2+hourRadius*Math.sin(hour*Math.PI/6)),
                (int)(height/2-hourRadius*Math.cos(hour*Math.PI/6)),
                paint);
        //开始画分针
        int minuteRadius = radius/2;
        paint.setStrokeWidth(20);
        paint.setColor(minuteColor);
        canvas.drawLine(width/2,
                height/2,
                (int)(width/2+minuteRadius*Math.sin(mimute*Math.PI/30)),
                (int)(height/2-minuteRadius*Math.cos(mimute*Math.PI/30)),
                paint);
        //开始画秒针
        int secondRadius = radius*2/3;
        paint.setStrokeWidth(10);
        paint.setColor(secondColor);
        canvas.drawLine(width/2,
                height/2,
                (int)(width/2+secondRadius*Math.sin(second*Math.PI/30)),
                (int)(height/2-secondRadius*Math.cos(second*Math.PI/30)),
                paint);
        invalidate();
    }
}

可以很明显得看到，代码的相似度很高，最主要的区别就是在onDraw中绘制表的部分，这部分是根据相关坐标来绘制圆圈、直线、点组成的。也和上一个自定义控件一样，每次绘制完成会调用invalidate()来进行重新绘制，表盘位置不变，时针、分针、秒针会根据时间绘制到不同的位置，连续进行绘制就会出现动态移动的效果。
下面进行最后一步，在布局文件中使用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.zwbin.custom"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.zwbin.custom.MainActivity">

    <com.zwbin.custom.ProgressView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:colorWidth="50dp"
        app:noColorWidth="50dp"
        app:speed="middle"
        app:color="#FF0000"
        app:width="10dp"/>
    <com.zwbin.custom.ClockView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

至此这两个基础的控件绘制完成了，下一篇会对这一篇的代码进行详解。

林边清泉1
关注
专栏目录
Android 自定义View (一)
Hongyang
04-21 44万+
很多的Android入门程序猿来说对于Android自定义View，可能都是比较恐惧的，但是这又是高手进阶的必经之路，所有准备在自定义View上面花一些功夫，多写一些文章。先总结下自定义View的步骤： 1、自定义View的属性 2、在View的构造方法中获得我们自定义的属性 [ 3、重写onMesure ] 4、重写onDraw 我把3用[]标出了，所以说3不一定是必须的，当然了大部分
android自定义view
weixin_37077736的博客
05-23 844
自定义View需要对View的生命周期、绘制流程、事件分发机制等有深入的了解，同时需要具备良好的Java基础和Android开发经验。Android自定义View是指开发者们可以自己定义View的外观和功能，以满足自己的需求。2.重写onMeasure()方法，测量View的大小。3.重写onLayout()方法，确定子View的位置。5.添加自定义属性，以便在xml中设置View的属性。4.重写onDraw()方法，绘制View的内容。6.添加事件监听器，实现View的交互功能。
Android自定义View基本使用
特立独行的博客
02-16 5903
Android自定义View基本使用
Android 自定义View
Jo__yang的专栏
08-15 2464
Android 开发必然会面对自定义View, 因为许多时候android sdk里现有的View 并不能满足我们项目的需求。很多的Android入门程序猿来说对于Android自定义View，可能都是比较恐惧的，但是这又是高手进阶的必经之路。这里老鸟抛砖引玉一下，总结下自定义View的步骤： 1、自定义View的属性 2、在View的构造方法中获得我们自定义的属性 3、重写
Android自定义View的四种方式
nihaomabmt的专栏
12-01 7989
一 前言 在Android开发中有很多业务场景，原生的控件是无法满足应用，并且经常也会遇到一个UI在多处重复使用情况，那么就需要通过自定义View的方式来实现这些UI效果。作为一个Android开发工程师自定义View属于一个必备技能。 像前几天正好做了一个上传本地图片的网格UI，点击相机的icon就可以上传选择本地图片，选中图片之后就可以显示的界面上。本来可以使用Android原生GridView，但是这个控件由于嵌套到ScrollView中，所以导致滑动事件冲突，当然网上...
Android自定义view
leeyhCoding的博客
09-10 387
Android自定义view继承系统控件的自定义View继承View的自定义View简单实现继承View的自定义View对padding属性进行处理对wrap_content属性进行处理自定义属性自定义组合控件组合控件的xml布局组合控件的Java代码自定义属性xml中引用组合控件调用组合控件自定义ViewGroup对wrap_content属性进行处理实现onLayout处理滑动冲突弹性滑动到其...
Android自定义View图片裁剪，支持自由裁剪、按自定义比例裁剪、圆形裁剪、旋转、镜面翻转，从0到1自定义View
09-03
方便调用，有示例。 Android自定义View图片裁剪，支持自由裁剪、按自定义比例裁剪、圆形裁剪、旋转、镜面翻转，从0到1自定义View。kotlin编写的一个自定义View。
Android自定义View实现自动转圈效果
08-27
Android自定义View实现自动转圈效果 Android自定义View实现自动转圈效果是Android开发中的一种常见需求，通过自定义View可以实现各种复杂的UI效果。本文将详细介绍如何通过自定义View实现自动转圈效果。 一、...
Android 15 在状态栏时间中显示秒数
m0_60898338的博客
11-04 341
无论您选择使用ADB进行快速解决，还是通过修改系统源代码修改，显示秒数功能都将提升您的Android使用体验。在Android 15中，您可以通过两种方式在状态栏中显示秒数：使用ADB命令或修改系统源代码。下面详细介绍这两种方法。您可以使用ADB（Android调试桥）命令轻松启用状态栏中的秒数显示。对于希望永久启用该功能的用户，可以通过修改系统源代码来实现。这种方法简单快捷，不需要对系统文件进行任何更改。如果需要进一步调整或修改，请随时告诉我！，您将启用状态栏中的秒数显示。
【北京迅为】itop-3588开发板摄像头使用手册Android12 双摄方案
最新发布
Chihiro_S的专栏
11-08 502
【北京迅为】itop-3588开发板摄像头使用手册Android12 双路摄像头方案
安卓市场如何做APP的分发、推广？
2401_88539912的博客
11-08 558
然后再加上小米lookalike算法，然后他会为这批用户投放，然后他也有点击根据点击用户的一个画像，再跟用户去进行一个算法的融合，然后再针对这批用户，不断的一个循环曝光，你会发现，整个会越来越精准，我们的投放的广告，目标人群越来越细，我们选了750万的一个人群数量去做，到后来只会针对750万里面可能是我们用户的那150万去曝光，因为他这个效果是没有任何人为干扰，他就是一个黑科技去算的，最后做出来，我们整个作为效果是非常准的。包括一些宣传，主打是整个品牌度，拍照、有声有色，帅气，年轻化。
迅为RK3588开发板Android多屏显示之多屏同显和多屏异显
Chihiro_S的专栏
11-05 376
迅为RK3588开发板Android多屏显示之多屏同显和多屏异显
android14修改默认锁屏方式为无
hedalei的博客
11-04 364
我们还看到disabledByDefault，顾名思义就是默认值了，这个值由com.android.internal.R.bool.config_disableLockscreenByDefault决定，这个值位于frameworks\base\core\res\res\values\config.xml中的config_disableLockscreenByDefault。android14修改默认休眠时间为永不休眠后，依然会很快就会息屏进入休眠。解锁后或者设置系统锁屏方式为无以后，就不会再休眠了。
mysql的高级进阶
langjiaohjiopji的博客
11-06 716
之前我们学了mysql的查询与高级查询和存储过程今天我们来学习mysql的高级进阶。
如何在安卓设备上设置代理服务器
SmartGarret的博客
11-06 656
安卓代理服务器是您的设备与目标网站之间的中介：您无需直接连接网站，而是先通过代理服务器隐藏任何身份信息。它就像一座桥梁，让数据畅通无阻，并允许您对事物进行调整，为您的在线体验增添一抹个性化的色彩。
Android 开启混淆R8编译问题处理
以后会多把工作中总结的知识、问题处理思路和方法通过博客分享出来,欢迎大家关注和共同探讨!
11-08 201
Android R8是一个代码混淆和压缩工具，可以将应用程序的大小和安全性优化。它引入了一些新功能，如成员内省、混淆指针、类内省等。但R8使用起来一直不友好，因为自从使用R8之后编译问题不断。把上面这些提示信息加入到模块的proguard-rules.pro混淆配置文件中即可解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值