Android 开发 | 视图基础

1. 设置视图的宽高

• 宽：android:layout_width
• 高：android:layout_height

宽高的取值主要有下列 3 种：

1. match_parent: 表示与上级视图保持一致。
2. wrap_content: 表示内容自适应。
3. 以 dp 为单位的具体尺寸，比如 100dp，那么宽或高就固定这么大。

<?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="match_parent"
    android:gravity="left"
    android:orientation="vertical">

    <TextView
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="@color/orange"
        android:text="宽度采用match_parent"
        />
    <TextView
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:background="@color/orange"
        android:text="宽度采用wrap_content"
        />
    <TextView
        android:layout_marginTop="10dp"
        android:layout_width="200dp"
        android:layout_height="30dp"
        android:background="@color/orange"
        android:text="固定宽度200dp"
        />
</LinearLayout>

在代码中修改视图宽高

如果要在 Java 代码中设置宽高，XML 中的宽高属性必须是 wrap_content。

代码中修改宽高，需要三步：

1. 调用控件对象的 getLayoutParams 方法，获取该控件的布局参数，参数类型为 ViewGroup.LayoutParams。
2. 布局参数的 width 属性表示宽度，height 属性表示高度，修改这两个属性值，就可以调整控件的宽高。
3. 调用控件对象的 setLayoutParams 方法，填入修改后的布局参数使之生效。

注：布局参数的 width 和 height 两个数值默认是 px 单位，需要将 dp 单位的数值转换为 px 单位的数值，然后才能赋值给 width 和 height。封装一个 dp 转 px 的方法：

public class Utils {
    public  static  int dip2px(Context context, float dpValue) {
        // 获取当前手机的像素密度（1个dp对应几个px）
        float scale = context.getResources().getDisplayMetrics().density;
        // 四舍五入取整
        return  (int)(dpValue * scale + 0.5f);
    }
}

接下来我要在代码中修改一个红色 TextView 的宽高：

<TextView
	android:id="@+id/red_text_view"
	android:layout_marginTop="30dp"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@color/red"
	android:text="红色TextView"
	/>

在代码中修改：

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_linear_layout_demo);
	// 拿到红色TextView
	TextView redTextView = findViewById(R.id.red_text_view);
	// 获取布局参数
	ViewGroup.LayoutParams params = redTextView.getLayoutParams();
	// 修改布局参数宽高，注意 pd 转 px
	params.width = Utils.dip2px(this, 200);
	params.height = Utils.dip2px(this, 200);
	// 重新设置布局参数
	redTextView.setLayoutParams(params);
}

最终效果：

2. 设置视图的间距

• 外间距：layout_margin
• 内间距：padding

包括上、下、左、右、水平方向、垂直方向。

<TextView
    android:layout_margin="50dp"
    android:padding="20dp"
    android:background="@color/yellow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="一个黄色textView\n外间距50\n内间距20"
    />
<TextView
    android:paddingTop="10dp"
    android:background="@color/orange"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="上内间距10"
    />
<TextView
    android:layout_marginTop="20dp"
    android:background="@color/orange"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="上外间距20"
    />
<TextView
    android:layout_marginHorizontal="20dp"
    android:background="@color/orange"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="水平方向外间距20"
    />
<TextView
    android:paddingHorizontal="20dp"
    android:background="@color/yellow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="水平方向内间距20"
    />
<TextView
    android:paddingVertical="20dp"
    android:background="@color/orange"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="垂直方向内间距20"
    />

3. 设置视图的对齐方式

• layout_gravity: 参照上级视图的哪个方向对齐。
• gravity: 内部视图的对齐方向。

默认左上对齐。

既靠右，又居中：

android:layout_gravity="right|center"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/orange"
    tools:context=".gravity.GravityDemoActivity">

    <!-- 蓝色view -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/blue"
        android:layout_gravity="bottom"
        android:gravity="right">

        <View
            android:layout_gravity="bottom"
            android:background="@color/red"
            android:layout_width="100dp"
            android:layout_height="100dp"/>

    </LinearLayout>

	<!-- 绿色view -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/green"
        android:layout_gravity="right|center"
        android:gravity="left">

        <View
            android:layout_gravity="bottom"
            android:background="@color/yellow"
            android:layout_width="100dp"
            android:layout_height="100dp"/>

    </LinearLayout>

</LinearLayout>