custom view_Android Custom View Level 1基本术语和Custom View的创建

最新推荐文章于 2024-03-24 09:47:57 发布

weixin_26739079

最新推荐文章于 2024-03-24 09:47:57 发布

阅读量345

点赞数

文章标签： python java

原文链接：https://proandroiddev.com/android-custom-view-level-1-67ed1c3febe1

版权

custom view

Custom Views …. Yes… we all know Custom views are one of the most interesting topics and Fundamental topics of Android. It has effects throughout our application in terms of performance and look n feel. When I started learning about the custom view. I found there are lots of scattered information about the custom views. So I tried to add One Blog Series. where we learn and practice some basic concepts of custom views. before starting let’s brush up some basic terms.

自定义视图...。是的…我们都知道，自定义视图是Android最有趣的主题之一。就性能和外观而言，它对我们整个应用程序都有影响。当我开始学习自定义视图时。我发现关于自定义视图的信息很多。因此，我尝试添加一个博客系列。在这里我们学习和实践一些自定义视图的基本概念。在开始之前，我们先梳理一些基本术语。

You want to explore Attributesets, attributes, TypedArray, and how to play with them. Playing with a custom view at the XML level. Follow Android Custom View Level 2

您想探索Attributesets ， attribute ， TypedArray以及如何使用它们。在XML级别上使用自定义视图。遵循Android自定义视图级别2

Basic concepts of View LifeCycle and its methods, how android framework parses Layout hierarchy. Follow Android Custom View Level 3

View LifeCycle及其方法的基本概念，Android框架如何解析Layout层次结构。遵循Android自定义视图级别3

What is View?View Class is a basic build block of UI Components in android.Rectangular Area draws over the screen and provides different event handling(click), properties(setting text over TextView), and much more.Widget class extends and provide components like Buttons, TextView, etc

什么是视图？ View Class是android中UI组件的基本构建块.Rectangular Area绘制在屏幕上并提供不同的事件处理(单击)，属性(通过TextView设置文本)等等.Widget类扩展并提供诸如Buttons，TextView的组件等

What is ViewGroup and how its different from Views?ViewGroup: it is a subclass of View. it can hold multiple views that can provide a meaningful UI.It is a base class for layouts. layouts are invisible containers that can hold views or ViewGroups.

什么是ViewGroup？它与Views有何不同？ ViewGroup：它是View的子类。它可以容纳多个可以提供有意义的UI的视图。它是布局的基类。布局是不可见的容器，可以容纳视图或ViewGroup。

Let’s see different Children of View class

让我们看看不同的View of Children类

Constructors of View Class

视图类的构造函数

public View(Context context) {} // constructor

the only Context needed. this constructor, particular we use when we need to add View directly to Activities or Fragments using Kotlin or java code.

唯一需要的上下文。此构造函数，尤其是当我们需要使用Kotlin或Java代码将View直接添加到Activity或Fragments时，尤其如此。

public View(Context context, @Nullable AttributeSet attrs) {} // constructor

Basic XML, Constructor. Without it, the layout inflater will crash. attrs will contains attributes defined in XML. We will do a little exercise on it.

基本XML，构造函数。没有它，布局充气机将崩溃。 attrs将包含以XML定义的属性。我们将对此进行一些练习。

// Constructor of view class 
public View(Context context, @Nullable AttributeSet attrs,
 int defStyleAttr) {
 // code
}


public View(Context context, @Nullable AttributeSet attrs,
      int defStyleAttr, int defStyleRes){
// code 
}

int defStyleAttr - A default style to apply to the View (defined in the theme)like android: background, color, and more.int defStyleResource - A default style to apply on the View, if defStyleAttr is unused.these constructors are required to apply a default style to all UI elements without having to specify it in each layout file.we will go deeper about the constructors in upcoming sections.

int defStyleAttr应用于默认View样式(在主题中定义)，例如android：背景，颜色等。 int defStyleResource如果defStyleAttr defStyleAttr，则默认应用于View默认样式。这些构造函数需要对所有UI元素应用默认样式，而不必在每个布局文件中指定它。我们将在后面的部分中深入了解构造函数。

We have discussed theories about view class constructors and some basic terms. I think we have discussed a theory a-lot. let us write some code and use the first constructor of view class to make a custom view. Let us make our first custom view.Before that, we need to understand 2 things1. Canvas => When we want to draw shapes or text into a view on Android View, We need A Canvas object. In simplified words, a Canvas is a logical 2D drawing surface that provides methods for drawing onto a bitmap2. Paint => Paint Class in android provide a way to draw something on our canvas. Paint class has properties like color, style, etc through which we can easily draw on the canvas

我们已经讨论了有关视图类构造函数和一些基本术语的理论。我认为我们已经讨论了很多理论。让我们编写一些代码，并使用view类的第一个构造函数创建一个自定义视图。让我们做第一个自定义视图，在此之前，我们需要了解两件事1。 Canvas =>当我们想在Android View上的视图中绘制形状或文本时，我们需要一个Canvas对象。简而言之，“ 画布”是逻辑2D绘图表面，它提供了用于在位图2上进行绘制的方法。 Android中的Paint => Paint Class提供了一种在画布上绘制内容的方法。 Paint类具有颜色，样式等属性，通过这些属性我们可以轻松地在画布上绘制

class CircleView (context:Context): View(context){}

let us get our Canvas and Paint reference variable and init them in the constructor

让我们获取Canvas和Paint参考变量并在构造函数中对其进行初始化

var paint:Paint = Paint()
var centerOfX =  340F // center of circle on X axis 
var centerOfY =  340F // center of circle on Yaxis
var radiusOfCircleView =  140F // radius of circle 
init {
    paint.color =  ContextCompat.getColor(context,android.R.color.holo_green_light)
    paint.strokeWidth = 40f
    paint.style = Paint.Style.STROKE// Constructor Call
}

Now, let us draw something using the onDraw method. we will discuss it more in detail in the View LifeCycle section.

现在，让我们使用onDraw方法绘制一些东西。我们将在“查看生命周期”部分中对其进行详细讨论。

override fun onDraw(canvas: Canvas?) {
    canvas?.drawCircle(centerOfX,centerOfY,radiusOfCircleView,paint)
    super.onDraw(canvas)
}

Our First View is ready to roll

我们的第一个视图已准备就绪

class CircleView (context:Context): View(context){
    var paint:Paint = Paint()
    var centerOfX =  340F
    var centerOfY =  340F
    var radiusOfCircleView =  140F
    init {
        paint.color = ContextCompat.getColor(context,android.R.color.holo_green_light)
        paint.strokeWidth = 40f
        paint.style = Paint.Style.STROKE// Constructor Call
    }override fun onDraw(canvas: Canvas?) {
        canvas?.drawCircle(centerOfX,centerOfY,radiusOfCircleView,paint)
        super.onDraw(canvas)
    }
}

Let us discuss this class … we have extends View class with its single argument constructor. we can only use this type of view in Java code otherwise we will get exceptions. We have overridden onDraw() to draw on canvas using paint objects. We have set some properties (radius, color)and draw a circle. next step: Adding a view to activity

让我们讨论这个类……我们用其单个参数构造函数扩展了View类。我们只能在Java代码中使用这种类型的视图，否则我们将获得异常。我们已经重写了onDraw()以使用绘画对象在画布上绘画。我们设置了一些属性(半径，颜色)并绘制了一个圆。下一步：向活动添加视图

class CustomViewActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        var circleView:CircleView = CircleView(this)
        setContentView(circleView)
    }
}

Now we have some dirt of view class on Our hand’s lets summaries it.

现在，我们手上有一些视图类的摘要。

Summary1. Android has View class which can help us to make custom view in android.2. ViewGroups are a special type of view that can contain multiple views and ViewGroups.3. View class has four constructors that provide us different ways to create custom android views.4. Canvas is a class which we used to draw 2D drawing using Paint class object.

总结 1. Android具有View类 ，可以帮助我们在android.2。中创建自定义视图。 ViewGroups是一种特殊的视图类型，可以包含多个视图和ViewGroups。3。 View类有四个构造函数 ，为我们提供了创建自定义android views.4的不同方法。画布是我们用于使用Paint类对象绘制2D绘图的类。

Now if try to add this view in XML and use it activity.

现在，如果尝试以XML添加此视图并使用它的活动。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <com.android.custom.view.CircleView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

And change code in Activity

并在活动中更改代码

class CustomViewActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
      /*  var circleView:CircleView = CircleView(this)
        setContentView(circleView)*/
        setContentView(R.layout.activity_custom_view)
    }
}

What happened let us dig more about exceptions

发生了什么使我们对异常有了更多的了解

Did You get this?1. InflateException on adding our custom view2. NoSuchMethodException!! init requires context an AttributeSet.Yes, we can infer that it is demanding our second constructor of View. But Why?

你明白了吗1。添加自定义view2的InflateException 。 NoSuchMethodException !! init要求上下文是AttributeSet。是的，我们可以推断出它需要第二个View构造函数。但为什么？

<com.android.custom.view.CircleView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

android:layout_width=”match_parent”android:layout_height=”wrap_content”these properties are attributes of view. So, adding a view in XML requires attributes implementation. the second constructor of View class contains default attributes implementations for us. because no implementation of attributes we are getting inflate exceptions. if we want to get rid of above inflateException, we need to add a second view constructor. final code will be like this:

android：layout_width =“ match_parent” android：layout_height =“ wrap_content”这些属性是view的 属性。因此，在XML中添加视图需要实现属性。 View类的第二个构造函数包含我们的默认属性实现。因为没有实现属性，所以我们会膨胀异常。如果要摆脱上述inflateException异常，则需要添加第二个视图构造函数。最终代码将如下所示：

class CircleView (context:Context,attrs:AttributeSet): View(context,attrs){// we have added attrs variable in constructor 
    var paint:Paint = Paint()
    var centerOfX =  340F
    var centerOfY =  340F
    var radiusOfCircleView =  140F
    init {
        paint.color = ContextCompat.getColor(context,android.R.color.holo_green_light)
        paint.strokeWidth = 40f
        paint.style = Paint.Style.STROKE// Constructor Call
    }
override fun onDraw(canvas: Canvas?) {
        canvas?.drawCircle(centerOfX,centerOfY,radiusOfCircleView,paint)
        super.onDraw(canvas)
    }
}

We will discuss more the attribute terms in our next blog. let us take a break with coffee, we have just made our first custom view. If you want to explore more about custom view …. Go for next level

我们将在下一个博客中讨论更多属性术语。让我们休息一下咖啡，我们已经完成了第一个自定义视图。如果您想进一步了解自定义视图…。进入下一个级别