Android Studio入门之常用布局的讲解以及实战（附源码超详细必看）（包括线性布局、权重布局、相对布局、网格布局、滚动视图）

快来打我* 2023-09-30 16:26 21阅读 0赞

> **运行有问题或需要源码请点赞关注收藏后评论区留言**

## 线性布局LinearLayout ##

顾名思义，线性布局像是用一根线把它的内部视图串起来，故而内部视图之间的排列顺序是固定的，要么从左到右，要么从上到下排列。通过属性android:orientation区分两种方向

下面通过一个实例讲解 效果如下

![14ca14e46f5e4045bf64c2b9761492a1.png][]

### LinearLayoutActivity类代码如下 ###

package com.example.chapter03;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    
    public class LinearLayoutActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_linear_layout);
        }
    }

activity\_linear\_layoutXML文件如下

## 权重布局 ##

指的是线性布局的下级视图各自拥有多大比例的宽高。通过属性android:layout\_weight来表达

效果如下

> layout\_width 为0dp时则表示水平方向的权重
> 
> layout\_height为0dp时则表示竖直方向的权重

![207ed6dfd8d04b85bd507cc925e1df6d.png][]

### LinearWeightActivity类代码如下 ###

package com.example.chapter03;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    
    public class LinearWeightActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_linear_weight);
        }
    }

activity\_linear\_weightXML文件代码如下

## 相对布局RelativeLayout ##

相对布局的下级视图位置由其他视图决定，所以得有具体的参照物才能确定最终位置，可以以和视图自身平级的视图作参照物，也可以以上级视图作为参照物 效果如下

![303d5c38f37448feb998b2a6731e542f.png][]

### RelativeLayoutActivity类代码如下 ###

package com.example.chapter03;
    
    import android.os.Bundle;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class RelativeLayoutActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_relative_layout);
        }
    
    }

activity\_relative\_layoutXML文件代码如下

## 网格布局GridLayout ##

若要实现类似表格那样的多行多列形式，可采用网格布局GridLayout，它默认从左往右，从上到下排列 效果如下

![0addbc4bfacb49e7900bbf16f5a1ba74.png][]

### GridLayoutActivity类代码如下 ###

package com.example.chapter03;
    
    import android.os.Bundle;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class GridLayoutActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_grid_layout);
        }
    }

### activity\_grid\_layoutXML文件代码如下 ###

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="2">
    
        <TextView
            android:layout_width="180dp"
            android:layout_height="60dp"
            android:gravity="center"
            android:background="#ffcccc"
            android:text="浅红色"
            android:textColor="#000000"
            android:textSize="17sp" />
    
        <TextView
            android:layout_width="180dp"
            android:layout_height="60dp"
            android:gravity="center"
            android:background="#ffaa00"
            android:text="橙色"
            android:textColor="#000000"
            android:textSize="17sp" />
    
        <TextView
            android:layout_width="180dp"
            android:layout_height="60dp"
            android:gravity="center"
            android:background="#00ff00"
            android:text="绿色"
            android:textColor="#000000"
            android:textSize="17sp" />
    
        <TextView
            android:layout_width="180dp"
            android:layout_height="60dp"
            android:gravity="center"
            android:background="#660066"
            android:text="深紫色"
            android:textColor="#000000"
            android:textSize="17sp" />
    
    </GridLayout>

## 滚动视图ScrollView ##

手机屏幕的显示空间有限，常常需要上下滑动或左右滑动才能拉出其余页面内容，这时候就要借助滚动视图了。其中垂直滚动视图名为ScrollView，水平滚动视图名为HorizontalScrollView

原始效果如下

![9c902eb17f0c442babbff93828de2b6b.png][]

滚动后效果如下

![3582e56bd50e4211b75abf9021b0f093.png][]

> 垂直方向滚动时 layout\_width属性值设置为match\_parent layout\_height属性值设置为wrap\_content
> 
> 水平方向滚动时 layout\_width属性值设置为wrap\_content layout\_height属性值设置为match\_parent

### ScrollViewActivity类代码如下 ###

package com.example.chapter03;
    
    import android.os.Bundle;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class ScrollViewActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_scroll_view);
        }
    }

### activity\_scroll\_viewXML文件代码如下 ###

**创作不易 决定有帮助请点赞关注收藏**

[14ca14e46f5e4045bf64c2b9761492a1.png]: https://img-blog.csdnimg.cn/14ca14e46f5e4045bf64c2b9761492a1.png
[207ed6dfd8d04b85bd507cc925e1df6d.png]: https://img-blog.csdnimg.cn/207ed6dfd8d04b85bd507cc925e1df6d.png
[303d5c38f37448feb998b2a6731e542f.png]: https://img-blog.csdnimg.cn/303d5c38f37448feb998b2a6731e542f.png
[0addbc4bfacb49e7900bbf16f5a1ba74.png]: https://img-blog.csdnimg.cn/0addbc4bfacb49e7900bbf16f5a1ba74.png
[9c902eb17f0c442babbff93828de2b6b.png]: https://img-blog.csdnimg.cn/9c902eb17f0c442babbff93828de2b6b.png
[3582e56bd50e4211b75abf9021b0f093.png]: https://img-blog.csdnimg.cn/3582e56bd50e4211b75abf9021b0f093.png