Android Studio中视图基础之设置视图的宽高、间距、对齐方式的讲解与实战（附源码超详细必看）

柔光的暖阳◎ 2023-09-30 16:26 24阅读 0赞

> **觉得有帮助或运行有问题请点赞关注收藏后评论区留言**

## 设置视图的宽高 ##

手机屏幕是快长方形区域，较短的为宽，较长的为边，App控件也通常是长方形状，控件宽度通过android:layout\_width表达，控件高度通过android:layout\_height表达 宽高的取值主要有以下三种

> 1：match\_parent 表示与上级视图保持一直 上级视图尺寸多大，它就多大
> 
> 2：wrap\_content 表示与内容自适应，对于文本视图来说，内部文字需要多大的空间，当前视图就要占据多大的尺寸
> 
> 3：以dp为单位的具体尺寸

在XML文件中采用以上任一方式均可设置视图的宽高，但在Java代码中设置宽高就有点复杂，首先确保XML文件中的宽高属性值为wrap\_content，这样才允许在代码中修改宽高 在Java中依次执行以下三个步骤

> 1：调用控件对象的getLayoutParams方法 获取该控件的布局参数
> 
> 2：修改布局参数的width和height参数
> 
> 3：调用控件对象的setLayoutParams方法 填入修改后的布局参数使之生效

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

![49338a67aedc4805ae048e583bac3a4a.png][]

### ViewBorderActivity类代码如下 ###

package com.example.chapter03;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    import com.example.chapter03.util.Utils;
    
    public class ViewBorderActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_view_border);
            // 获取名叫tv_code的文本视图
            TextView tv_code = findViewById(R.id.tv_code);
            // 获取tv_code的布局参数（含宽度和高度）
            ViewGroup.LayoutParams params = tv_code.getLayoutParams();
            // 修改布局参数中的宽度数值，注意默认px单位，需要把dp数值转成px数值
            params.width = Utils.dip2px(this, 300);
            tv_code.setLayoutParams(params); // 设置tv_code的布局参数
        }
    }

### activity\_view\_borderXML文件代码如下 ###

## 设置视图的间距 ##

android:layout\_margin用于设置视图的间距，它们通通由视图基类View派生而来，而layout\_margin正是View的一个通用属性。

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

可以看出视图里面有嵌套，第一个是蓝色里面嵌套黄色，第二个是黄色里面嵌套红色

> layout\_margin指的是当前图层与外部图层的距离，而padding指的是当前图层与内部图层的距离

![07b0610b761a431589f4d37be0d42599.png][]

### ViewMarginActivity类代码如下 ###

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

### activity\_view\_marginXML文件代码如下 ###

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#00aaff"
        android:orientation="vertical">
    
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:background="#ffff99"
            android:padding="60dp">
    
            
            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ff0000" />
        </LinearLayout>
    </LinearLayout>

## 设置视图的对齐方式 ##

App界面上的视图排列，默认靠左朝上对齐，这也符合日常的书写格式，然而页面的排版不是一成不变的，所以通过属性**android:layout\_gravity**可以指定当前视图的对齐方向

当属性值为top|left的时候意味着既朝上又靠左，其他以此类推即可

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

可以看出第一个子布局朝下，并且它的内部视图靠左，而第二个子布局朝上，并且它的内部视图靠右，对比XML文件中的layout\_gravity和gravity可以得出以下结论

> layout\_gravity决定当前视图位于上级视图的哪个方位
> 
> gravity决定了下级视图位于当前视图的哪个方位

![abc8a44ad9734d2883fe516d6cc1b69f.png][]

### ViewGravityActivity类代码如下 ###

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

### activity\_view\_gravityXML文件代码如下 ###

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#ffff99"
        android:padding="5dp">
    
        
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:gravity="left"
            android:background="#ff0000"
            android:layout_margin="10dp"
            android:padding="10dp">
    
            
            <View
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="#00ffff" />
        </LinearLayout>
    
        
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:layout_weight="1"
            android:layout_gravity="top"
            android:gravity="right"
            android:background="#ff0000"
            android:layout_margin="10dp"
            android:padding="10dp">
    
            
            <View
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="#00ffff" />
        </LinearLayout>
    </LinearLayout>

[49338a67aedc4805ae048e583bac3a4a.png]: https://img-blog.csdnimg.cn/49338a67aedc4805ae048e583bac3a4a.png
[07b0610b761a431589f4d37be0d42599.png]: https://img-blog.csdnimg.cn/07b0610b761a431589f4d37be0d42599.png
[abc8a44ad9734d2883fe516d6cc1b69f.png]: https://img-blog.csdnimg.cn/abc8a44ad9734d2883fe516d6cc1b69f.png