preface

  • The principle of custom Views is fundamental for Android developers to understand;
  • Before you can understand custom Views, you need to have some knowledge;
  • This article covers all the basics of knowledge in custom views.

directory

1. View definition

That is, the daily View, specifically shown as a variety of View controls displayed on the screen, such as TextView, LinearLayout, etc.

2. View classification

Views There are two main types of views:

  • Single View: that is, a View with no child views, such as TextView
  • A View group is a ViewGroup composed of multiple views and contains sub-views, such as a LinearLayout

UI components in Android are composed of views and ViewGroups.

3. Overview of view classes

  • The core class of a View is the View class
  • View class is the base class of various components in Android, such as View is ViewGroup base class
  • View constructors: there are four of them, as follows:

A custom View must override at least one constructor:

// Constructor 1 // call scenario: View is in Java code new public CarsonView(Context Context) {super(Context); } // constructor 2 // call scenario: Public CarsonView(Context Context, AttributeSet attrs) {super(Context, attrs); } // when a View has a style attribute, it is called in the second constructor. Public CarsonView(Context Context, AttributeSet attrs, int defStyleAttr) {super(Context, attrs, defStyleAttr); } // the View has the style attribute, and the API21 attribute is used after the second constructor. Public CarsonView(Context Context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(Context, attrs, defStyleAttr, defStyleRes); }Copy the code

For more concrete uses, see: Understanding View constructors and understanding View constructors

4. View structure

  • For a View group that contains child views, the structure is a tree
  • There may be multiple viewgroups or views under a ViewGroup, as shown below:

Here need to pay special attention to is: in the View of drawing process, always starts from the root node of the tree View structure (that is, starting from the top of the tree), one layer, each branch by top-down traversal (that is, the tree recursion), finally calculated the View in the tree View, thus eventually determine the whole View relevant properties of the tree.

5. Android coordinate system

The Android coordinate system is defined as:

  • The top left corner of the screen is the origin of the coordinates
  • To the right is the increasing direction of the x axis
  • We’re going to increase the y axis down here

The details are as follows:

Note: different from the general mathematical coordinate system

6. View position (coordinate) description

The position of the view is determined by four vertices, A, B, C, and D, as shown in Figure 1-3.

The position of the view is relative to the parent control, and the position description of the four vertices is determined by the four values associated with the parent control:

  • Top: The distance from the Top edge of the view to the Top edge of the parent control;
  • Left: The distance from the Left edge of the view to the Left edge of the parent control;
  • Right: The distance between the Right edge of the view and the left edge of the parent control
  • Bottom: The distance from the lower edge of the view to the upper edge of the parent control.

Figure 1-4 shows the details.

Can be remembered according to the upper left and lower right vertices of the view position:

  • Top: The distance from the upper left vertex of the view to the upper boundary of the parent control;
  • Left: The distance from the upper Left vertex of the view to the Left edge of the parent control;
  • Right: the distance between the lower Right vertex of the view and the left edge of the parent control;
  • Bottom: The distance from the Bottom right vertex of the view to the upper boundary of the parent control.

7. Location acquisition method

The position of the View is obtained using the view.getxxx () method.

GetTop () : getTop() : getLeft() : getLeft() : getTright () : getBottom() : getTop() : getLeft() : getLeft() : getTright () : getBottom()Copy the code
  • And in the MotionEventget() andgetRaw()The difference between
//get() : the coordinates of the touch point relative to the component coordinate system in which it is located event.getx (); event.getY(); //getRaw() : the coordinates of the touch point relative to the screen's default coordinate system.getrawx (); event.getRawY();Copy the code

The details are as follows:

8. Angle & Radian

  • Custom View is actually some simple shapes through calculation, so as to form the effect together.

This will involve the related operations of canvas (rotation), sines and cosines calculation, which will involve the relevant knowledge of Angle and radian.

  • Both Angle and radian are units of measure that describe angles. The differences are shown below:

The Angle increases clockwise in the default screen coordinate system.

Note: In the common mathematical coordinate system, the direction of Angle increase is counterclockwise

9. Color correlation

Color in Android includes color modes, how to create colors, and how to mix colors.

9.1 Color Mode

Android supports the following color modes:

  • ARGB8888: Four-channel high accuracy (32 bits)
  • ARGB4444: Four-channel low precision (16 bits)
  • RGB565: Android screen Default mode (16 bits)
  • Alpha8: Transparent channel only (8 bits)

What needs special attention here is:

  • Letter: indicates the channel type.
  • Numeric: Indicates how many bits are used to describe the type;
  • Example: ARGB8888, which indicates four channels (ARGB); Each corresponding channel is described by 8 bits.

Color definition using ARGB8888 as an example:

9.2 Color Definition

Mainly divided into XML definition/Java definition.

/** * definition method 1: XML * defined in /res/values/color.xml file */ <? The XML version = "1.0" encoding = "utf-8"? > <resources> // define red (no alpha (transparent) channel) <color name="red">#ff0000</color Name ="green">#00ff00</color> </resources> #f00 // Low precision - no transparent channel red # AF00 // low precision - transparent channel red #ff0000 // high precision - no transparent channel red # aAFF0000 // High precision - transparent channel red /** * Int Color = color.gray; Int Color = color. ARGB (127, 255, 0, 0); Int color = 0xaaff0000; // Red with transparencyCopy the code

9.3 Color Reference

Mainly divided into XML definition/Java definition.

/** * XML * / / / 1. References in the style file < style name = "AppTheme" parent "=" Theme. AppCompat. Light. DarkActionBar "> < item name="colorPrimary">@color/red</item> </style> // 2. Reference android in layout :background="@color/red" // 3. Android :background="#ff0000" /** * Int color = getResources().getColor(r.color.mycolor); Int color = getColor(r.color.mycolor);Copy the code

9.4 Color Tool

  • Colors are defined by RGB values, and we generally cannot intuitively know the value of the color we need, we need to borrow the color tool directly from the picture or other places to obtain the RGB value of the color.
  • Sometimes some simple color selection doesn’t need to bother the UI, and it’s more efficient for developers to do it themselves
  • Here, I strongly recommend Markman: a tool for designers to mark, mainly for size marking, font size marking, color marking, and easy to use. I highly recommend!

10. Summary

  • The basics of customizing a View have been explained
  • For more on Android custom Views, stay tuned: Carson takes you to Android

Welcome to attentionCarson takes you through Android blogs

Blog link: juejin.cn/user/252413…

Please give the top/comment a thumbs up! Because your encouragement is the biggest power that I write!