View的padding和margin负值测试

前言

View的padding和margin在开发过程中经常使用到，padding指的是View内部的补白，margin则是View和父控件或者其他兄弟控件之间的间距，通常它们的设置值都是正数，不过如果把它们的值设置成为负数会怎么样呢，这里写一个简单的小Demo来测试一下。

Demo编写

首先在一个新建的布局里添加两个FrameLayout，并且每个FrameLayout布局里有一个ImageView，每个FrameLayout布局下面有两个按钮分别负责增加和减少padding和margin值。

<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:orientation="vertical"
    android:padding="15dp"
    android:layout_height="match_parent"
    tools:context=".RefreshActivity">

    <FrameLayout
        android:layout_gravity="center_horizontal"
        android:background="@drawable/border_bg"
        android:layout_width="300dp"
        android:layout_height="100dp">

        <ImageView
            android:id="@+id/moon"
            android:layout_gravity="center"
            android:src="@drawable/moon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </FrameLayout>

    <LinearLayout
        android:gravity="center"
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/inc_margin_button"
            android:text="增加margin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/dec_margin_button"
            android:text="减少margin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <FrameLayout
        android:layout_marginTop="15dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/border_bg"
        android:layout_width="300dp"
        android:layout_height="100dp">

        <ImageView
            android:id="@+id/pool"
            android:layout_gravity="center"
            android:src="@drawable/pool"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </FrameLayout>

    <LinearLayout
        android:gravity="center"
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/inc_padding_button"
            android:text="增加padding"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/dec_padding_button"
            android:text="减少padding"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

接下来为这些按钮添加点击回调事件，并且在回调中重新设置ImageView的padding和margin值，方便观察它们执行效果。

@Override
public void onClick(View v) {
    if (v == incPadding) {
        paddingTop += 10;
        pool.setPadding(0, paddingTop, 0, 0);
    } else if (v == decPadding) {
        paddingTop -= 10;
        pool.setPadding(0, paddingTop, 0, 0);
    } else if (v == incMargin) {
        marginTop += 10;
        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) moon.getLayoutParams();
        layoutParams.topMargin = marginTop;
        moon.setLayoutParams(layoutParams);
    } else if (v == decMargin) {
        marginTop -= 10;
        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) moon.getLayoutParams();
        layoutParams.topMargin = marginTop;
        moon.setLayoutParams(layoutParams);
    }
}

执行测试

代码编写完成之后还需要在开发这选项中打开“显示布局边界”的选项方便观察每个控件元素的布局边界。首先点击不停的增加margin，可以看到图像控件不断的向下移动并且最后消失在父布局的底部边界。

接下来测试不断减少margin，可以看到图像不断的向上移动并且最后消失在父布局的顶部边界。

测试不断增加padding，会发现图片控件的布局不断增大并且最终高度增大到和父布局一样高度，最后会压缩图片内容部分直至内容消失。

测试不断减小padding，会发现图片控件的布局不断减小并且不断压缩图片内容部分，最后整个图片布局和内容都消失了。

总结

margin如果设置为负值它会不断地向父布局靠近减小它们之间的距离，如果一直减小会消失在父布局的边界处；padding如果设置为负值控件会不断缩小并且最终缩小到不可见。