小米Mix2莫名其妙的布局错乱问题的解决

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/y505772146/article/details/86767679

今天在做一个demo，无意中发现了一个特别奇怪的问题，特意在这里记录下来以备以后查阅。
首先，我写了一个非常简单的Activity代码和相应的布局文件。
相应的代码如下：

package client.cp.application;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_parent">

    <Button
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:textAllCaps="false"
        android:layout_marginLeft="13dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2" />

    <Button
        android:textAllCaps="false"
        android:layout_marginLeft="13dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3" />

    <Button
        android:textAllCaps="false"
        android:layout_marginLeft="13dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4" />

</LinearLayout>

可以见代码和布局都是最最简单的，但是在我的小米mix2上会出现了如下图的问题：

很奇怪，这种问题在我的三星S8上则没有出现。这是为什么呢？
经过控制变量法的尝试，我发现设置背景可以解决这个奇怪的bug：
如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:background="#000000"
    android:layout_height="match_parent">

    <Button
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:textAllCaps="false"
        android:layout_marginLeft="13dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2" />

    <Button
        android:textAllCaps="false"
        android:layout_marginLeft="13dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3" />

    <Button
        android:textAllCaps="false"
        android:layout_marginLeft="13dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4" />

</LinearLayout>

其实只是给最外层的布局增加了一个背景，这个问题在小米mix2上就消失了，如下图：

这个问题其实解决起来不是很难，但是当时我花了一番功夫才找到解决，所以特意在这里记录一下~