Android学习笔记（五）：设置视图宽高、间距、对齐方式

一、设置视图宽高

1、xml布局文件设置

// xml 
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_width="match_parent"

android:layout_width="300sp"

        在xml布局文件中，我们可以通过android:layout_width、android:layout_height分别设定视图的宽和高

wrap_content ： 表示匹配内容，根据内容的多少来确定该视图宽高大小；

 match_parent ： 表示匹配上一级视图的宽高大小，注意这里是上一级，并不是屏幕，如果没有上一级才是屏幕宽高；

最后是通过固定大小值设定。

2、java代码实现 

// java
TextView textView4 = findViewById(R.id.text4);
textView4.setBackgroundColor(Color.rgb(0,255,0));
ViewGroup.LayoutParams params = textView4.getLayoutParams();
params.width = 600; // px
params.height = 300; // px
textView4.setLayoutParams(params);

        在JAVA文件中，我们可以通过代码实现设置视图宽高。先通过findViewById函数获取到视图对象，然后通过getLayoutParams函数获取视图布局参数params，该参数是一个ViewGroup.LayoutParams对象。然后我们就可以设置该对象中的值，最后通过setLayoutParams函数，并将params对象传入设置视图宽高。其中，params.width、params.height视图宽高的单位是px（像素）。

二、设置视图的间距 

<?xml version="1.0" encoding="utf-8"?>
<!-- 最外层布局背景为蓝色 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="#0000ff">
    <!-- 中间层布局背景为绿色 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00ff00"
        android:layout_margin="30dp"
        android:padding="50dp">
        <!-- 最内层视图背景为红色 -->
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ff0000"/>

    </LinearLayout>

</LinearLayout>

         我们新建一个线性布局的Layout.xml文件，代码如上所示，效果如下所示

         我们创建了两个布局，一个View视图，其中，蓝色背景布局在最外层，其参数：宽匹配屏幕，高设置300dp，背景设置蓝色，在该布局中又定义了一个绿色布局。绿色布局宽高参数都是match_parent，按理来说应该完全覆盖掉上一级布局，但还是存在一圈蓝色，这是因为我们定义了绿色布局的外间距（layout_margin="30dp"），因此绿色布局在匹配上一级宽高时，上下左右都会间隔我们所设置的30dp的距离。

        而在绿色布局中，我们又定义了一个红色背景视图模块，其宽高同样匹配上一级宽高（match_parent），但是我们可以看到红色并没有覆盖绿色，与绿色布局同样有一定的间距。这是因为，在绿色布局中，我们设置了内间距（padding="50dp"），所以红色视图才会与绿色布局有50dp的间距。

        因此，设置视图的间距，可以通过外间距（layout_margin）或内间距（padding）设置，其中，外间距是设置当前模块外部与上一级的间距，内间距是当前模块内部与下一级的间距。此外，我们还可以通过layout_marginLeft、layout_marginTop、layout_marginRight、layout_marginBottom来分别设置左、上、右、下的外间距；同样，paddingLeft、paddingTop、paddingRight、paddingBottom可以分别设置左、上、右、下的内间距。

 三、设置视图的对齐方式

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="#00ff00"
        android:gravity="left|top"
        android:padding="20dp">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#0000ff" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_gravity="top"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="#00ff00"
        android:gravity="right|bottom"
        android:padding="20dp">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#0000ff" />

    </LinearLayout>

</LinearLayout>

        新建一个布局文件，代码如上，效果如下

        通过之前的学习，我们已经可以读懂大部分代码了，在这里我们随便温习一下：

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

    ....

</LinearLayout>

1、我们在这里构建了一个最外层的红色（android:background="#ff0000"）线性布局（LinearLayout），里面包含再包含了两个布局。其中，红色布局的参数，我们设定宽匹配屏幕（android:layout_width="match_parent"），高为指定大小（android:layout_height="400dp"），并设置了该布局的排布方式为水平排布（android:orientation="horizontal"），这样该布局中的模块就会先从左往右排满，再换行排布。相对的，如果设置android:orientation="vertical"垂直排布的话，就会从上往下排满，在换列排布。

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="#00ff00"
        android:gravity="left|top"
        android:padding="20dp">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#0000ff" />

    </LinearLayout>

2、第二个布局为绿色（"#00ff00"）背景，被定义在红色布局中。绿色布局我设置其宽高分别为0dp 和 200dp。你可能会好奇，0dp不就是没有宽吗，怎么显示呢。其实，我在这里加了一个参数（android:layout_weight="1"）来设置权重，即布局中有多个模块时，每个模块就可以根据权重来分配宽高。例如这里我们定义了两布局，且权重都是1，那么这两个布局就会平分宽度，即各为1/2屏幕宽。因为，系统会根据权重设置宽度，所以我们就默认设置宽为0dp。然后，我们定义了两种对齐方式：android:layout_gravity="bottom" 和 android:gravity="left|top"，前者layout_gravity表示当前视图在上一级中的对齐方式，我这里设置"bottom"则表示底部对齐，从效果图就可以看到这个布局靠在底部。而后者gravity表示当前视图中的下一级的对齐方式。我先在该布局中定义了一个蓝色背景的视图，因为gravity的值设置为"left|top"，可以看到它靠在绿色布局的左上方。此外，我还设置了绿色布局的外间距（android:layout_margin="10dp"）和内间距（android:padding="20dp"）。

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_gravity="top"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="#00ff00"
        android:gravity="right|bottom"
        android:padding="20dp">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#0000ff" />

    </LinearLayout>

3、从前面的学习，我猜你已经可以完全读懂这部分的代码了。因此，对于对齐方式，有两种：

layout_gravity 表示当前视图在上一级视图中的对齐方式，其值可以为left、right、top、bottom，也可以通过“ | ”这个符号实现左上、右下等这种对齐方式。

gravity  表示当前视图中的下一级视图的对齐方式，其值同上。

四、总结

        通过本章学习，可以掌握Android设置视图宽高、间距、以及对齐方式。