Android语言基础教程（38）Android用户界面设计中的控制UI界面之使用XML布局文件控制UI界面：别再硬编码了！用XML给你的APP界面“相亲”才是正经事

最新推荐文章于 2025-11-25 12:12:57 发布

原创最新推荐文章于 2025-11-25 12:12:57 发布 · 414 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#android #ui #xml

Android基础教程专栏收录该内容

256 篇文章

订阅专栏

一、从前有个界面，它活得像个“代码孤儿”

还记得我刚学Android开发时，老师在台上激情洋溢地说：“用Java代码动态创建视图，才是真正的编程！”于是我们埋头苦写，一个个TextView、Button在Java文件里拔地而起，代码长得能当围巾用。结果呢？想调整一个按钮位置，得在茫茫代码海里捞针；设计师说要改个颜色，程序员差点把键盘摔了。

直到某天，我发现了藏在res/layout文件夹里的XML文件——好家伙，这哪是文件啊，这分明是UI界的“婚恋中介”！它把硬核的代码匹配变成了优雅的“相亲协议”，让界面设计和业务逻辑从此过上了分居不互扰的幸福生活。

二、XML布局：你的UI“专业媒人”

1. 为啥说XML是“最佳媒人”？

专业事专业办：XML只管描述界面长啥样（“身高体重”），Java/Kotlin负责逻辑行为（“性格人品”），分工明确不打架
颜值调整不费劲：改布局不用重新编译，在Android Studio里实时预览，设计师在旁边指手画脚也不怕
跨国相亲无压力：用资源限定符轻松实现多语言、多屏幕适配，同一个界面在美国显示英语，在日本显示日语
家族遗传很靠谱：样式和主题可以继承复用，改个全局颜色就像统一家族审美观

2. XML的“相亲资料表”怎么写？
每个控件在XML里都有一份详尽的“征友资料”：

<!-- 这是一个按钮的完整自我介绍 -->
<Button
    android:id="@+id/btn_confess"  <!-- 身份证号，唯一标识 -->
    android:layout_width="wrap_content"  <!-- 宽度：根据内容自适应 -->
    android:layout_height="48dp"  <!-- 高度：固定48像素 -->
    android:text="@string/i_love_you"  <!-- 显示文本：引用字符串资源 -->
    android:textColor="@color/pink"  <!-- 文字颜色：粉嫩嫩 -->
    android:background="@drawable/btn_heart"  <!-- 背景：心形形状 -->
    android:layout_marginTop="20dp"  <!-- 和上一个控件保持距离 -->
    android:layout_centerInParent="true"/>  <!-- 位置：在父容器里居中 -->

看看这结构，是不是比简历还清晰？想要什么样的控件，就把条件明明白白写出来。

三、实战！搭建一个会“脸红”的登录界面

现在我们来做个完整示例——一个登录界面，输入密码时按钮会“脸红”（变色），点击后跳转到主页。

第一步：创建“相亲档案”（activity_login.xml）

<?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:orientation="vertical"
    android:padding="32dp"
    android:gravity="center">

    <!-- 头像 -->
    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:src="@drawable/avatar_default"
        android:layout_marginBottom="40dp"/>

    <!-- 用户名输入框 -->
    <EditText
        android:id="@+id/et_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/input_username"
        android:drawableStart="@drawable/icon_user"
        android:drawablePadding="8dp"
        android:background="@drawable/edittext_bg"/>

    <!-- 密码输入框 -->
    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/input_password"
        android:inputType="textPassword"
        android:drawableStart="@drawable/icon_lock"
        android:drawablePadding="8dp"
        android:background="@drawable/edittext_bg"
        android:layout_marginTop="16dp"/>

    <!-- 那个会“脸红”的登录按钮 -->
    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:text="@string/login"
        android:textColor="@color/white"
        android:background="@drawable/btn_normal"
        android:layout_marginTop="32dp"
        android:enabled="false"/>  <!-- 初始状态不可点击 -->

</LinearLayout>

配套资源文件也要安排：

在res/values/strings.xml里：

<string name="input_username">请输入用户名</string>
<string name="input_password">请输入密码</string>
<string name="login">立即登录</string>

在res/drawable/里创建btn_normal.xml和btn_pressed.xml实现点击效果：

<!-- btn_normal.xml - 正常状态 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFB6C1" />  <!-- 浅粉色 -->
    <corners android:radius="24dp" />  <!-- 圆角 -->
</shape>
<!-- btn_pressed.xml - 点击状态 -->  
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF69B4" />  <!-- 深粉色 -->
    <corners android:radius="24dp" />
</shape>

第二步：Java代码来“牵线搭桥”（LoginActivity.java）

public class LoginActivity extends AppCompatActivity {
    private EditText etUsername, etPassword;
    private Button btnLogin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);  // 重要！加载XML布局
        
        // 通过ID找到XML里定义的控件
        etUsername = findViewById(R.id.et_username);
        etPassword = findViewById(R.id.et_password);
        btnLogin = findViewById(R.id.btn_login);
        
        // 给按钮设置“脸红”效果
        btnLogin.setBackgroundResource(R.drawable.btn_selector);
        
        // 监听密码输入，有内容时按钮才可点击
        etPassword.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                boolean hasText = !TextUtils.isEmpty(s);
                btnLogin.setEnabled(hasText);  // 有密码时按钮“解锁”
            }
            // ... 其他重写方法
        });
        
        // 登录按钮点击事件
        btnLogin.setOnClickListener(v -> {
            String username = etUsername.getText().toString();
            String password = etPassword.getText().toString();
            
            // 模拟登录验证
            if (!TextUtils.isEmpty(username) && !TextUtils.isEmpty(password)) {
                Toast.makeText(this, "登录成功！", Toast.LENGTH_SHORT).show();
                startActivity(new Intent(this, MainActivity.class));
            }
        });
    }
}