A list,

In Android, View stands for View. It is a very important concept in Android, no less important than the four components. Users are dealing with View all the time, including displaying data and event transmission. Therefore, master the application and principle of View is the only way to advance Android. Recently, I am learning the View knowledge in Android Development Art Exploration written by Ren Yugang. I will record my learning experience and summary for exchange and learning with you.

2. Definition of View

A View will formally introduce A rectangular area on the screen and is responsible for drawing and event handling. A View occupies a rectangular area and is responsible for drawing and event handling. So a View represents a control that we usually contact TextView EditView, Button, ListView is inherited from the View. In addition, in addition to View, there is a ViewGroup, the so-called ViewGroup is “control group”, meaning that there are other views in the ViewGroup, and the ViewGroup is also inherited from the View. In general, a View can be a single control or a group of controls. In order to illustrate the hierarchy of views, the author created a Demo, whose hierarchy is as follows: The author customized three views. First, viewGroupA inherits from ViewGroup and contains a viewGroupB. ViewGroupB inherits from ViewGroup and contains a viewA, which inherits from View.

3. Several important parameters of View

One of the most important parameters for a View is the position parameter, because it identifies where the View is and how wide and tall the View is. This is also important for drawing a View. The position of a View is determined by its four vertices: top, left, bottom, and right. Note: The above coordinates are relative and represent the View’s coordinates relative to the parent layout. Also, in Android, the positive x and y axes are to the right and down, respectively. So how do we get these parameters? Let’s look at the View source:

public class View implements Drawable.Callback.KeyEvent.Callback.AccessibilityEventSource {...protected int mLeft;
    protected int mRight;
    protected int mTop;
    protected intmBottom; . }Copy the code

As you can see, there are four member variables in the View. The table represents the values of Top, Left, Right and Bottm, so we can use the View’s get method to get these values, for example:

    int left = MyView.getLeft();
    int top = MyView.getTop();
    int right = MyView.getRight();
    int bottom = MyView.getBottom()
Copy the code

In addition to the above four basic parameters, there are x, y, translationX, translationY, and similarly, Android provides corresponding get/set methods. Here is a picture to illustrate the differences between these parameters:

The figure above can be summarized as follows: TranslationX | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | So translation represents the pixel value of horizontal translation, and translationY represents the pixel value of vertical translation. ③ X and y represent the coordinates of the upper left corner of the current View relative to the parent container, namely real-time relative coordinates. ④ The relationship between the above parameters can be expressed by the following two formulas: x = left + translationX and y = top+ translationY.

Four, notes

GetTop (), view.getx (), etc., should not be fetched directly from onCreate() because the View is not yet drawn, so all arguments will be 0. (1) First look at the layout and layout file:

<RelativeLayout 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" >
    <com.chenyu.viewbase.ViewGroupA    
        android:layout_width="400dp"    
        android:layout_height="400dp"    
        android:background="#4bd2c8"    
        android:layout_marginTop="50px"    
        android:layout_marginLeft="50px"    
        android:id="@+id/viewgroupA">
    <com.chenyu.viewbase.ViewGroupB    
       android:id="@+id/viewgroupB"    
       android:layout_width="250dp"    
       android:layout_height="250dp"    
       android:background="#a07cf44e"    
       android:layout_marginTop="40px"    
       android:layout_marginLeft="40px">
    <com.chenyu.viewbase.ViewA    android:id="@+id/viewA"  
       android:layout_width="150dp"    
       android:layout_height="150dp"    
       android:background="#cdd1d2"    
       android:layout_marginTop="30px"    
       android:layout_marginLeft="30px"/>
    </com.chenyu.viewbase.ViewGroupB>
    </com.chenyu.viewbase.ViewGroupA>

<Button    
       android:layout_width="wrap_content"    
       android:layout_height="wrap_content" 
       android:text="Get parameters"    
       android:id="@+id/button"    
       android:layout_below="@+id/viewgroupA"    
       android:layout_centerHorizontal="true" />
</RelativeLayout>
Copy the code

(2) The code of ViewGroupA, ViewGroupB, ViewA is basically the same, but ViewGroupA and ViewGroupB inherit the LinearLayout while ViewA inherit the View, so only the code of ViewGroupA is given as follows:

public class ViewGroupA extends LinearLayout {
   public ViewGroupA(Context context) {
      super(context);
   }
   public ViewGroupA(Context context, AttributeSet attrs) {   
      super(context, attrs);
   }
   public ViewGroupA(Context context, AttributeSet attrs, int defStyleAttr) {    
      super(context, attrs, defStyleAttr); }}Copy the code

(3) MainActivity: we get the coordinates of the ViewGroupA in onCreate() and then get all the coordinates in the listener event:

public class MainActivity extends Activity {
    private LinearLayout viewGroupA;
    private LinearLayout viewGroupB;
    private View viewA;
    private Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewGroupA = (LinearLayout) findViewById(R.id.viewgroupA);
        viewGroupB = (LinearLayout) findViewById(R.id.viewgroupB);
        viewA = findViewById(R.id.viewA);
        button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int viewGroupA_top = viewGroupA.getTop();
                int viewGroupA_left = viewGroupA.getLeft();
                Log.d("cylog"."The upper-left coordinate of viewGroupA is :("+viewGroupA_left+","+viewGroupA_top+")");
                int viewGroupB_top = viewGroupB.getTop();
                int viewGroupB_left = viewGroupB.getLeft();
                Log.d("cylog"."The upper-left coordinate of viewGroupB is :("+viewGroupB_left+","+viewGroupB_top+")");
                int viewA_top = viewA.getTop();
                int viewA_left = viewA.getLeft();
                Log.d("cylog"."The upper-left coordinate of viewA is :("+viewA_left+","+viewA_top+")"); }});int viewGroupA_top = viewGroupA.getTop();
        int viewGroupA_left = viewGroupA.getLeft();
        Log.d("cylog"."The upper-left coordinate of viewGroupA is :("+viewGroupA_left+","+viewGroupA_top+")"); }}Copy the code

Run the program and click the Button to view the log:

In the onCreate() method, the coordinate parameters of the View cannot be obtained, because the View has not been drawn at this point, so all coordinate parameters are 0, because the View has been drawn at the time of listening button events, so the parameters can be obtained at this time.

** This is especially important. ** You can also see that the coordinates printed are relative to the parent layout. For example, in the layout file, we set viewGroupA’s margin_Top and margin_Left to 50px and 50px, so the upper left corner of viewGroupA is (50,50), which is the desired result. Similarly, ViewGroupB (40,40) and viewA(30,30) are as expected.