Android 自定义控件

最新推荐文章于 2024-06-03 18:31:31 发布
最新推荐文章于 2024-06-03 18:31:31 发布
阅读量252 收藏
点赞数
分类专栏： Anrdoid 基础知识 文章标签： android canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38478780/article/details/108896822
版权

一、前言

对于 Android 开发者来说，原生控件往往无法满足要求，需要开发者自定义一些控件，因此，需要去了解自定义 view 的实现原理。这样即使碰到需要自定义控件的时候，也可以游刃有余。

1.1、自定义控件的优点

  1. 多个地方复用；
  2. 统一的逻辑样式；
  3. 精简代码。

1.2、自定义控件的方式

  1. 继承已有控件；
  2. 继承布局；
  3. 继承根 View。

二、继承已有控件

我们要自定义的控件和已有控件非常相似，那么我们就可以在已有控件的基础上，继承组件，增加属性，来实现自己想要的效果。

案例一： 自定义提交按钮（按钮点击变色）,效果如下所示：

在这里插入图片描述
具体实现步骤如下所示：

  1. 新建资源文件 R.drawable.btn_submit
    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/btn_submit_p" android:state_pressed="true"/>
    <item android:drawable="@mipmap/btn_submit_n" />
</selector>
  2. 新建 SubmitButton 类继承 Button 类
    public class SubmitButton extends Button {

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

    private void init() {
        setBackgroundResource(R.drawable.btn_submit);
        setText("自定义提交按钮");
        setTextSize(18);
        setTextColor(0xffffffff);  // 白色
    }
}
  3. 使用
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="45dp"
        android:text="普通Button"
        android:textSize="15sp" />

    <com.zjgsu.customviewdemo.SubmitButton
        android:id="@+id/btn_custom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="45dp" />

</LinearLayout>

三、继承布局

当单个控件不好实现我们需要的效果的时候，即需要有多个已有控件来实现我们的效果，这时候我们可以利用继承布局的方式来实现，可以继承线性布局或者相对布局等。

案例二： 自定义 Item，效果如下所示：

自定义Item

3.1、通过调用方法设置 Item 的内容

我们可以看到第一个 Item 上三个要素都是全的，左边的内容、右边的内容和右边的箭头，但是第二个和第三个则是只有箭头和只有内容，这个是根据我们写的方法设置的。

具体实现步骤如下所示：

  1. 新建单个 Item 的布局 item_layout
        <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       tools:context=".MainActivity">
   
       <View
           android:layout_width="wrap_content"
           android:layout_height="1px"
           android:background="#898888" />
   
       <RelativeLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="@drawable/selector_item"
           android:clickable="true"
           android:focusable="true"
           android:padding="10dp">
   
           <TextView
               android:id="@+id/tv_left"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentStart="true"
               android:layout_centerVertical="true"
               android:textColor="#333333"
               android:textSize="15sp" />
   
           <LinearLayout
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentEnd="true"
               android:layout_centerVertical="true"
               android:gravity="center_vertical">
   
               <TextView
                   android:id="@+id/tv_right"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_marginEnd="5dp"
                   android:textColor="#646464"
                   android:textSize="14sp" />
   
               <ImageView
                   android:id="@+id/iv_arrow"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/arrow" />
   
           </LinearLayout>
   
       </RelativeLayout>
   
       <View
           android:layout_width="wrap_content"
           android:layout_height="1px"
           android:background="#898888" />
   
   </LinearLayout>
    ```
  2. 新建 ItemView 继承自 RelativeLayout，并写一个设置内容与是否显示箭头的方法
    public class ItemView extends RelativeLayout {

    private TextView tvLeft;
    private TextView tvRight;
    private ImageView ivArrow;

    public ItemView(Context context, AttributeSet attrs) {
        super(context, attrs);

        LayoutInflater.from(context).inflate(R.layout.item_layout, this);

        tvLeft = findViewById(R.id.tv_left);
        tvRight = findViewById(R.id.tv_right);
        ivArrow = findViewById(R.id.iv_arrow);
    }

    /**
     * 设置内容
     *
     * @param tvLeftStr   左边内容
     * @param tvRightStr  右边内容
     * @param isShowArrow 是否显示箭头
     */
    public void setView(String tvLeftStr, String tvRightStr, boolean isShowArrow) {
        if (tvLeftStr != null) {
            tvLeft.setText(tvLeftStr);
        }

        if (tvRightStr != null) {
            tvRight.setText(tvRightStr);
        }

        if (isShowArrow) {
            ivArrow.setVisibility(VISIBLE);
        } else {
            ivArrow.setVisibility(GONE);
        }
    }
}
  3. 使用
    <com.zjgsu.customviewdemo.ItemView
    android:id="@+id/item_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp" />

     item1 = findViewById(R.id.item_1);
 item2 = findViewById(R.id.item_2);
 item3 = findViewById(R.id.item_3);

 item1.setView("姓名", "Bob", true);
 item2.setView("年龄", null, true);
 item3.setView("学校", "中国人民大学", false);

3.2、通过自定义属性设置 Item 的内容

自定义属性一般有以下三个步骤：

  1. 在 attrs.xml 中添加属性；
    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ItemView">
        <attr name="leftText" format="string"/>
        <attr name="rightText" format="string"/>
        <attr name="showArrow" format="boolean"/>
    </declare-styleable>
</resources>
  2. 在自定义的控件中绑定属性；
    public class ItemView extends RelativeLayout {

    private TextView tvLeft;
    private TextView tvRight;
    private ImageView ivArrow;

    public ItemView(Context context, AttributeSet attrs) {
        super(context, attrs);

        LayoutInflater.from(context).inflate(R.layout.item_layout, this);

        tvLeft = findViewById(R.id.tv_left);
        tvRight = findViewById(R.id.tv_right);
        ivArrow = findViewById(R.id.iv_arrow);

		// 获取自定义属性
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ItemView);

        String leftText = a.getString(R.styleable.ItemView_leftText);
        String rightText = a.getString(R.styleable.ItemView_rightText);
        boolean showArrow = a.getBoolean(R.styleable.ItemView_showArrow, true);

        setView(leftText, rightText, showArrow);

        a.recycle();
    }

    /**
     * 设置内容
     *
     * @param tvLeftStr   左边内容
     * @param tvRightStr  右边内容
     * @param isShowArrow 是否显示箭头
     */
    public void setView(String tvLeftStr, String tvRightStr, boolean isShowArrow) {
        if (tvLeftStr != null) {
            tvLeft.setText(tvLeftStr);
        }

        if (tvRightStr != null) {
            tvRight.setText(tvRightStr);
        }

        if (isShowArrow) {
            ivArrow.setVisibility(VISIBLE);
        } else {
            ivArrow.setVisibility(GONE);
        }
    }
}
  3. 在 xml 中使用。
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ItemView="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ItemActivity">

    <com.zjgsu.customviewdemo.ItemView
        android:id="@+id/item_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        ItemView:leftText="姓名"
        ItemView:rightText="Bob1"
        ItemView:showArrow="true" />

    <com.zjgsu.customviewdemo.ItemView
        android:id="@+id/item_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        ItemView:leftText="年龄" />

    <com.zjgsu.customviewdemo.ItemView
        android:id="@+id/item_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        ItemView:leftText="学校"
        ItemView:rightText="中国人民大学"
        ItemView:showArrow="false" />

</LinearLayout>

四、继承根 View

当我们需要实现一些特殊样式并且继承已有控件和布局都无法实现，那么我们就需要通过继承根 View 的方式自己去画了，即自定义 View。

案例三： 自定义 View，实现折线图，效果如下所示：

折线图
具体代码如下所示：

public class LineView extends View {

    Paint linePaint;

    public LineView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        initPaint();
    }

	// 初始化画笔
    private void initPaint() {
        linePaint = new Paint();
        linePaint.setColor(Color.BLUE);
        linePaint.setStrokeWidth(3);
    }

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


        // 原点
        int xPoint = 200;
        int yPoint = 400;

        // y 轴
        canvas.drawLine(xPoint, 400 - 300, xPoint, yPoint, linePaint);
        // x 轴
        canvas.drawLine(xPoint, yPoint, xPoint + 500, yPoint, linePaint);

        // 画线  上一条线的终点就是要画的线的起点
        canvas.drawLine(xPoint, yPoint, xPoint + 80, yPoint - 150, linePaint);
        canvas.drawLine(xPoint + 80, yPoint - 150, xPoint + 160, yPoint - 100, linePaint);
        canvas.drawLine(xPoint + 160, yPoint - 100, xPoint + 240, yPoint - 200, linePaint);
        canvas.drawLine(xPoint + 240, yPoint - 200, xPoint + 400, yPoint - 100, linePaint);
    }
}

这里的自定义 View 案例很简单，但是 Android 里面的自定义 View 所涉及的知识还是很多的，也算是 Android 进阶的一个内容，但是这篇博客并不是讲自定义 View 的，所以这里就不展开讲了。

五、小结

这篇博客主要讲了 Android 自定义控件的三种方式，每一种方式都给出了一个简单的案例来讲解。

萌果爱吃芒果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android开发基础——自定义控件
止步听风的博客
09-18 2595
引入布局可以解决重复编写布局代码的问题，但是如果布局中有一些控件要求能够响应事件，还是需要在每个activity中为这些控件单独编写一次事件注册的代码。比如标题栏中的返回按钮，其实不管是在哪一个Acitvity中，这个按钮的功能都是相同的，即销毁当前Activity。而如果每一个Activity都需要重新注册该事件，就会增加很多重复代码，该情况最好使用自定义控件的方式来解决。init {}}
安卓创建自定义控件
weixin_57244464的博客
01-04 857
引入布局的技巧确实解决了重复编写布局代码的问题，但是如果布局中有一些控件要求能够响应事件，我们还是需要在每个活动中为这些控件单独编写一次事件注册的代码。我们可通过如下方式解决}}
Android自定义控件
最新发布
RandowWrite
06-03 857
invalidate方法用于在UI线程中请求重绘视图。当我们希望在主线程中更新UI时，可以在UI线程中直接调用invalidate()方法。内部实现：调用了invalidate方法后，为该View添加一个标记位，同时不断向父容器请求刷新，父容器通过计算得出自身需要重绘的区域，直到传递到ViewRootImpl中，最终触发performTraversals方法，开始View树重绘流程(只绘制需要重绘的视图)postInvalidate方法用于在非UI线程中请求重绘视图。
【Android】开发自定义控件和引入布局
摸鱼小小虫的博客
07-20 611
引入布局，创建一个新的布局，导入其他layout，创建自定义控件
Android - 自定义控件
搬砖
04-01 4351
Android自定义控件
【Android入门到项目实战--3.3】—— 如何创建使用自定义控件？
张修宇的博客
03-21 977
Android入门到项目实战】—— 什么情况下该使用自定义控件？如何创建使用自定义控件？如何引入布局？
Android自定义控件EditText使用详解
08-28
Android自定义控件EditText使用详解 Android自定义控件EditText是Android开发中常用的控件之一，它可以满足开发者的多种需求。在本文中，我们将详细介绍Android自定义控件EditText的使用方法，包括自定义控件的分类...
Android自定义控件eBook实现翻书效果实例详解
01-04
本文实例讲述了Android自定义控件eBook实现翻书效果的方法。分享给大家供大家参考，具体如下： 效果图： Book.java文件： package com.book; import android.app.Activity; import android.os.Bundle; import ...
实例讲解Android自定义控件
01-05
小编在此之前给大家介绍过关于Android自定义控件的用法等，需要的可以参考下： Android开发之自定义控件用法详解 详解Android自定义控件属性 可以看到QQ上的ToolBar其实就是一个自定义的view，可以看到不同的界面...
C#.NET 封装自定义组件(控件)Dll
11-18
封装自定义控件很简单，没什么技术含量，这里通过封装自定义的数字文本框实例简单总结一下
实例讲解Android应用中自定义组合控件的方法
09-02
主要介绍了实例讲解Android应用中自定义组合控件的方法,通过例子讲解了view组合控件及自定义属性的用法,需要的朋友可以参考下
android 自定义控件
07-26
在Android开发中，自定义控件是提升应用用户体验和界面设计独特性的重要手段。自定义控件分为两类：自定义View和自定义ViewGroup。本文将深入探讨这两类控件的实现原理、应用场景以及如何在实际项目中进行有效利用。...
Android自定义控件的步骤
01-04
学习初衷：在工作实际开发过程中，原有的安卓控件已不能满足实际的功能需求，而且有些应用还需要一些独特的展示效果，这时就需要自定义控件来定制控件去满足我们的需求了。 自定义控件的步骤 步骤一：首先要新建一...
Android自定义控件LinearLayout实例讲解
09-02
总结一下，Android自定义控件是扩展系统控件功能或满足特定设计需求的重要手段。在本例中，我们学习了如何基于LinearLayout创建一个包含图像和文本的自定义按钮控件。我们通过继承LinearLayout，结合XML布局文件，...
Android自定义控件（一）
yuanheng19930119的博客
03-01 1万+
Android中提供的控件基本可以满足我们日常开发的需求，但是有些需求只凭这里控件的组合并不能满足，我们可以通过写自定义控件来实现各种功能的控件，比如QQ消息右上角红色提示框水波式消失效果。本篇将对Android自定义控件进行基本的讲解，后面还会持续更新。 自定义控件要求： 1. 应当遵守Android标准的规范(命名，可配置，事件处理等)。 2. 在XML布局中可配置控件的...
扬帆起航——Qt自定义控件介绍
m0_62599305的博客
05-27 2019
扬帆起航——史上最强Qt自定义控件就要来啦！！！ 这是一篇介绍，关于qt自定义控件的优势等。
Android的几个特点简述
热门推荐
奋斗青年一族的博客
08-27 1万+
Android拥有完善的应用程序框架，支持4大应用组件（Activity、Service、ContentProvider、BroadcastReceiver），可以在任意层次上进行复用和更换。 虽然Android的主要编程语言是Java，但Android中的Java字节码是运行在Dalvik虚拟机上的。传统的JVM是基于堆栈的，而Dalvik虚拟机是基于寄存器的，因此，在Dalvik虚拟机上运行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值