Android LinearLayout横排和竖排布局

深藏阁楼爱情的钟 2022-05-20 07:53 221阅读 0赞

如果在layout中要不重叠地显示多个子LinearLayout，则必须在orientation中明确是vertical 还是horizontal。

下面这个例子，在LinearLayout中，两个子Layout是竖直排布的，代码和显示结果分别如下，

<?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.spacesoftwares.myapplication2.MainActivity">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp">
            <TextView
                android:layout_width="300dp"
                android:layout_height="47dp"
                android:fontFamily="serif"
                android:text="I just want to write something here, don't do any thing first 支持中国汉字 显示 "
                android:textColor="#ff00ff" />
            <TextView
                android:layout_width="105dp"
                android:layout_height="30dp"
                android:text="Hello my World!"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp">
            <TextView
            android:layout_width="300dp"
            android:layout_height="47dp"
            android:fontFamily="serif"
            android:text="I just want to write something here, don't do any thing first 支持中国汉字 显示 "
            android:textColor="#ff00ff" />
        </LinearLayout>
    
    </LinearLayout>

显示结果：

![70][]

如果要横排显示，代码就有所不同，主要有两个地方，一个是主LinearLayout的orientation要写成horizontal, 子LinearLayout的宽度就不能再是match\_parent了，此时可以选择适当的比例。我这里通过调节权重layout\_weight = “1”，让两个子LinearLayout等宽，当然也你可以加入第3个或第4个再尝试一下，具体实例可参考【1】，很简单

源码和效果如下，

<?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="horizontal"
        tools:context="com.spacesoftwares.myapplication2.MainActivity">
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_weight="1"
            >
            <TextView
                android:layout_width="300dp"
                android:layout_height="47dp"
                android:fontFamily="serif"
                android:text="<span style="" font-size:9.0pt;"="">支持中国汉字 显示 "
                android:textColor="#ff00ff"
                android:background="#555555"
                />
        </LinearLayout>
    
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_weight="1"
            >
            <TextView
                android:layout_width="300dp"
                android:layout_height="47dp"
                android:fontFamily="serif"
                android:text="<span style="" font-size:9.0pt;"="">支持中国汉字 显示 "
                android:textColor="#ff00ff"
                android:background="#000055"
                />
        </LinearLayout>
    </LinearLayout>

显示结果：

![70 1][]

另外一种不使用weight，主LinearLayout也不使用orientation的方式，如下

显示效果如下

![70 2][]

参考

【1】      [https://blog.csdn.net/zhulichen/article/details/54313576][https_blog.csdn.net_zhulichen_article_details_54313576]

【2】     开发环境adroid studio 3.0, JRE1.8.0;  屏幕截图采用软件SpaceCapture v1.07a.

[70]: /images/20220520/fcef15ee67f94ba99a53fbbd0111ede3.png
[70 1]: /images/20220520/190a4ce48866458fbc5c68e420226bb1.png
[70 2]: /images/20220520/463cb4aa575c496d95ea399c4e136b1c.png
[https_blog.csdn.net_zhulichen_article_details_54313576]: https://blog.csdn.net/zhulichen/article/details/54313576