Android开发者必须要了解的View布局过程(View的工作之Layout过程)

View的工作原理之layout过程

目录

• 1. 详细布局过程
  
  • 1.1 布局过程到底要做什么?
  • 1.2 布局相关的属性Frame
• 2. 自定义onLayout,简单实现FloatingButton
  
  • 2.1 效果图
  • 2.2 avtivity.xml
  • 2.3 CustomFloatingView.java

---

1. 详细布局过程

1.1 布局过程到底要做什么？

1. 确定View的位置
2. 如果是ViewGroup，则回调子节点布局过程

只有布局过程执行完毕，获取View的宽高才是准确的

1.2 布局相关的属性Frame

布局过程需要确定出View的位置与宽高属性，那么整个这些属性通过Frame来描述。

一个View(ViewGroup)的宽高和位置信息到底是怎么描述的呢？在Android的位置系统中，通过Frame来表示：

也就是说，一个Frame包含了四个对应的属性：

left (mLeft)
top (mTop)
right (mRight)
bottom (mBottom)

根据这四个属性，就可以确定出View的位置信息与View的宽高信息。

view的高 = bottom - top
view的宽 = right - left
view的位置 = (left, top)

在View中上面的说到的属性都是hide标记的，也就是说子类是看不到的，那么如何获取这些值呢？

view.getLeft();
view.getTop();
view.getRight();
view.getBottom();
// 注意以下值是以px为单位的，如果设置的是dp，需要作出转换。
view.setLeft(xxx);
view.setTop(xxx);
view.setRight(xxx);
view.setBottom(xxx);

2. 自定义onLayout,简单实现FloatingButton

此为简易版，仅仅是为了探讨layout过程的，最好不要用于实际开发。

实现原理：

在onLayout时，将View的位置固定在一个固定的位置，不随布局改变而改变

2.1 效果图

2.2 avtivity.xml

<?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-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ung8023.androidbase.view.define.LayoutActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@color/colorPrimary"
        />

    <com.ung8023.androidbase.view.define.CustomFloatingView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="20dp"
        android:background="@color/colorAccent"
        />

</LinearLayout>

2.3 CustomFloatingView.java

public class CustomFloatingView extends View {
    public CustomFloatingView(Context context) {
        super(context);
    }

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

    public CustomFloatingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        int width = getWidth();
        int height = getHeight();
        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) getLayoutParams();
        setLeft(layoutParams.leftMargin);
        setTop(400);
        setRight(width + layoutParams.leftMargin);
        setBottom(400 + layoutParams.topMargin + height);
    }
}

---

我的个人网站

• Android模块
• 开发知识分享

推荐视频教程：

Android从整体到局部系列视频教程戳我

广告：

我使用的装备：程序员必备 | 不伤关节 | 手感好 | 静电容 | Plum键盘|Niz键盘 戳我

---