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

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

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

设置视图的宽高

手机屏幕是快长方形区域,较短的为宽,较长的为边,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方法 填入修改后的布局参数使之生效

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

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文件代码如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="视图宽度采用wrap_content定义"
        android:textColor="#000000"
        android:textSize="17sp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="视图宽度采用match_parent定义"
        android:textColor="#000000"
        android:textSize="17sp" />
    <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="视图宽度采用固定大小"
        android:textColor="#000000"
        android:textSize="17sp" />
    <TextView
        android:id="@+id/tv_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="通过代码指定视图宽度"
        android:textColor="#000000"
        android:textSize="17sp" />
    <TextView
        android:id="@+id/tv_hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello"/>
</LinearLayout>

设置视图的间距

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

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

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

layout_margin指的是当前图层与外部图层的距离,而padding指的是当前图层与内部图层的距离

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决定了下级视图位于当前视图的哪个方位

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">
        <!-- 内部视图的宽度和高度都是100dp,且背景色为青色 -->
        <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">
        <!-- 内部视图的宽度和高度都是100dp,且背景色为青色 -->
        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#00ffff" />
    </LinearLayout>
</LinearLayout>
相关文章
|
8天前
|
JSON 编译器 开发工具
VS Code阅读Android源码
VS Code阅读Android源码
12 1
|
7天前
|
Java Android开发
Android系统 修改无源码普通应用为默认Launcher和隐藏Settings中应用信息图标
Android系统 修改无源码普通应用为默认Launcher和隐藏Settings中应用信息图标
22 0
|
7天前
|
存储 Java Android开发
Android系统 设置第三方应用为默认Launcher实现和原理分析
Android系统 设置第三方应用为默认Launcher实现和原理分析
21 0
|
1天前
|
移动开发 API Android开发
Android应用性能优化实战
【4月更文挑战第28天】在移动开发领域,一个流畅的用户体验是至关重要的。对于Android开发者而言,应用的性能优化是一项既挑战性也极其重要的工作。本文将深入探讨Android应用性能优化的多个方面,包括内存管理、UI渲染、多线程处理以及电池效率等,旨在为开发者提供实用的性能提升策略和具体的实施步骤。通过分析常见的性能瓶颈,并结合最新的Android系统特性和工具,我们的目标是帮助读者打造更加高效、响应迅速的Android应用。
|
3天前
|
缓存 监控 Android开发
Android 应用性能优化实战
【4月更文挑战第27天】 在竞争激烈的移动应用市场中,性能优越的应用更能吸引和保留用户。针对Android平台,本文将深入探讨影响应用性能的关键因素,并提供一系列实用的优化策略。我们将从内存管理、UI渲染、多线程处理以及电池使用效率等方面入手,通过具体案例分析如何诊断常见问题,并给出相应的解决方案。文中所提技巧旨在帮助开发者构建更加流畅、高效的Android应用。
15 2
|
5天前
|
缓存 移动开发 Android开发
构建高效Android应用:内存优化实战指南
【4月更文挑战第25天】 在移动开发领域,应用程序的性能至关重要。特别是对于Android设备,由于硬件配置的多样性,合理的内存管理与优化是提升应用流畅度、减少卡顿和崩溃的关键。本文将深入探讨Android应用的内存优化技巧,通过分析内存泄漏的原因、诊断工具的运用以及实际代码层面的改进措施,帮助开发者构建更加高效的Android应用。
|
7天前
|
Linux 开发工具 Android开发
Docker系列(1)安装Linux系统编译Android源码
Docker系列(1)安装Linux系统编译Android源码
14 0
|
7天前
|
安全 Java Shell
Android13 adb input 调试命令使用和源码解析
Android13 adb input 调试命令使用和源码解析
12 0
|
8天前
|
传感器 Java 开发工具
[NDK/JNI系列03] Android Studio集成NDK开发环境
[NDK/JNI系列03] Android Studio集成NDK开发环境
14 0
|
14天前
|
数据采集 小程序 数据可视化
Java Android原生智慧校园管理系统源码
对班牌的考试模式、班牌模式上课模式进行设置及管理,设置成功后,班牌端将同步应用。
21 0