简介：面向 Android 初学者的仿微信登录注册界面完整工程包，采用 Java 与 Android Studio 实现，重点演示线性布局 LinearLayout 的垂直/水平排列、layout_weight 权重分配、EditText 与 Button 样式定制，并涵盖登录与注册页间的 Intent 跳转、错误提示及状态选择器交互。登录界面包含用户名/手机号输入框、密码框（可显示/隐藏）与登录按钮，注册界面则包含验证码、重复密码等字段，适合正在练习界面搭建和基础事件处理的开发者。压缩包内共 1289 个文件，以 java、xml 源码、class/dex 编译产物、json 配置和 png 图片为主，整体仅 21.28MB，可直接导入 Android Studio 查看工程结构、布局写法和资源组织方式。已有 2732 人学习，说明其在仿微信界面开发话题下有一定参考价值。配套说明梳理了从 XML 布局、Java 逻辑到简单数据持久化（SharedPreferences）的完整设计思路，可帮助快速理解登录注册模块的实现脉络，并在此基础上扩展自己的项目。

1. 仿微信登录注册界面用线性布局：为什么这个方案值得动手

日常开发里最常被问到的问题不是"怎么写一个登录页"，而是"怎么用最简单的方式快速搭出一个结构清楚、后续好改的登录注册界面"。很多人一上来就用约束布局或者自定义 View，结果在约束、链、屏障这些概念里绕了一圈，页面还没跑起来。其实像微信登录页这种上下堆叠、左右内嵌的结构，用 Android Studio 仿微信登录、注册界面——线性布局 这一套方案，几层嵌套就能还原九成视觉效果，代码量小、参数直白、换机型也不容易出问题。这篇文章就从线性布局的视角出发，把这个方案讲透：微信登录页的层级是怎么拆的、布局代码怎么写、参数怎么调、压缩包工程打开后有哪些坑。适合刚接触 Android Studio 布局的初学者，也适合要快速交付原型页的开发者。

2. 线性布局为什么适合仿微信登录页：层级模型与核心参数

2.1 微信登录页的本质：上下线性堆叠与左右线性组合

微信登录页在视觉上可以拆成几个模块：顶部 Logo、账号输入框、密码输入框、主按钮、底部辅助文字。这些模块在屏幕上的排列方向只有两种——垂直方向的整体堆叠，以及水平方向的输入框内部组合。垂直堆叠对应线性布局的 vertical 方向，水平组合对应 horizontal 方向。所谓仿微信，不是像素级复制，而是用最少的布局层级把这种上下结构还原出来。

线性布局最核心的两个参数是 orientation（方向）和 weight（权重）。orientation 决定子控件是竖着排还是横着排，weight 决定剩余空间怎么分配。微信登录页里，输入框之间要固定间距、按钮要占满宽度、辅助文字要贴到底部，这些诉求分别对应 layout_margin、layout_width="match_parent"、weight 这几个参数的组合。相比约束布局需要给每个控件写左右上下约束，线性布局只需要关心方向和权重，思维负担小很多。

2.2 三层嵌套结构：为什么根布局用垂直线性布局

我一般会把仿微信登录页拆成三层。第一层是根布局，垂直方向，背景色设为微信登录页常见的浅灰；第二层是内容区，用垂直线性布局包住 Logo、输入框组和登录按钮；第三层是输入框内部，用水平线性布局把 EditText 单独包一层，方便以后在左侧加图标或右侧加清除按钮。

三层嵌套的直观好处是：改某一层不会影响另一层的测量结果。如果所有控件平铺在同一个垂直线性布局里，就没法实现输入框内部的水平组合；如果根布局用相对布局，代码量会立刻翻倍，而且布局运行时的测量开销更大。嵌套层级不是越多越好，三层对这个场景来说是刚好。

2.3 必须理解的四个参数：layout_width、layout_height、weight、gravity

这里列一张常用参数表，直接对应仿微信界面里的典型用法：

这里最容易翻车的是把 layout_weight 误以为"占屏幕比例"。weight 分配的是剩余空间，不是总空间。比如两个输入框都设 layout_height="0dp"、weight=1，它们才会各占一半；如果其中一个 wrap_content，weight 分配的是减去这个 wrap_content 高度之后的剩余空间，结果和你预期的完全不一样。

我在实际项目里的习惯是：需要 weight 的控件把对应方向的尺寸设为 0dp（垂直布局里设 layout_height="0dp"），这样系统不会先量一遍 wrap_content 再算剩余空间，减少一次布局测量，嵌套层数多时布局更稳定。

3. 用 Android Studio 把仿微信登录注册页面跑起来：完整代码与步骤

3.1 从 .rar 解压到工程打开：项目结构与准备事项

拿到类似"Android Studio仿微信登录、注册界面——线性布局.rar"的压缩包，第一步先解压。注意解压路径不要带中文和空格，Android Studio 对中文路径偶尔会出现资源链接报错，这是老问题了。解压后应该能看到一个完整的 Android 工程目录，包含 app、build.gradle、settings.gradle、gradle.properties 这层结构。

打开工程的方式是：File -> Open，选中解压出来的根目录（里面有 settings.gradle 的那一层），等 Gradle Sync 完成。如果 Sync 报错，优先检查 Gradle 版本和 JDK 版本是否匹配。很多压缩包工程打开失败的原因是本机 Android Studio 版本比工程要求的 Gradle 版本新，打开 gradle/wrapper/gradle-wrapper.properties，把 distributionUrl 里的版本号调整成兼容版本即可。这里给一个参考：AGP 7.x 配 Gradle 7.x，AGP 8.x 配 Gradle 8.x，版本差太远基本都会挂。

3.2 登录界面 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:background="#F7F7F7" android:paddingLeft="32dp" android:paddingRight="32dp"> <!-- 顶部 Logo 区 --> <ImageView android:id="@+id/iv_logo" android:layout_width="80dp" android:layout_height="80dp" android:layout_gravity="center_horizontal" android:layout_marginTop="80dp" android:src="@mipmap/ic_launcher" android:contentDescription="Logo" /> <!-- 账号输入框组：水平线性布局内嵌 EditText --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="40dp" android:orientation="horizontal" android:background="@drawable/bg_input_border"> <EditText android:id="@+id/et_account" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="请输入账号" android:background="@null" android:padding="12dp" android:inputType="text" android:maxLines="1" /> </LinearLayout> <!-- 密码输入框组 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:orientation="horizontal" android:background="@drawable/bg_input_border"> <EditText android:id="@+id/et_password" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="请输入密码" android:background="@null" android:padding="12dp" android:inputType="textPassword" android:maxLines="1" /> </LinearLayout> <!-- 登录按钮 --> <Button android:id="@+id/btn_login" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:text="登录" android:textColor="#FFFFFF" android:background="#07C160" /> <!-- 底部辅助操作区：用 weight 把这块顶到底部 --> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical" android:gravity="bottom"> <TextView android:id="@+id/tv_register" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="注册新账号" android:textColor="#576B95" android:gravity="center" android:padding="8dp" /> </LinearLayout> </LinearLayout>

代码逻辑说明：根布局是垂直 LinearLayout，背景色接近微信登录页的浅灰。Logo 的 layout_gravity="center_horizontal" 实现水平居中，marginTop 控制离顶部的距离。两个输入框各自包了一层水平 LinearLayout，以后要加图标或清除按钮，直接在水平布局里插入控件即可，不需要改 EditText。输入框 EditText 的 background="@null" 是去掉默认下划线，让外层 shape 背景完全接管视觉。底部"注册新账号"用 weight=1 的空白中间层顶到底部，这是线性布局实现贴底最常用的手段，比手动计算 marginTop 更不容易出错。

参数说明：EditText 的 inputType 必须区分场景，账号用 text，密码用 textPassword，后者会触发掩码。maxLines="1" 限制单行输入，避免高度跳动导致的布局位移。按钮颜色用 #07C160 是微信绿的参考值，但 Button 的默认样式在不同主题下可能覆盖 android:background，这个问题在避坑章节会详细展开。

3.3 注册界面 activity_register.xml：字段扩展与页面复用

注册界面和登录界面共用同一套骨架，差异在于多了昵称和确认密码两个字段。我通常的做法是复制 activity_login.xml 后增量修改，而不是新建完全不相关的布局。下面是注册页插入昵称输入框的代码：

<!-- 注册页：在账号输入框之前插入昵称输入框 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="40dp" android:orientation="horizontal" android:background="@drawable/bg_input_border"> <EditText android:id="@+id/et_nickname" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="请输入昵称" android:background="@null" android:padding="12dp" android:maxLines="1" /> </LinearLayout>

这段代码插在账号输入框之前，同时把账号输入框的 marginTop 从 40dp 改成 16dp，整体视觉就变成了昵称、账号、密码三行输入。注册页的按钮文案改成"注册"，底部辅助文字改成"已有账号？去登录"，点击事件跳回登录页。这样复用的好处不只是省代码，更重要的是控件 ID 可以沿用，登录和注册两个 Activity 的 findViewById 逻辑基本不用改。

3.4 Activity 跳转与输入校验：让两个页面联通

布局只是静态界面，真正的登录注册体验需要 Activity 跳转和输入校验。下面是登录页的 Java 代码：

public class LoginActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); EditText etAccount = findViewById(R.id.et_account); EditText etPassword = findViewById(R.id.et_password); Button btnLogin = findViewById(R.id.btn_login); TextView tvRegister = findViewById(R.id.tv_register); btnLogin.setOnClickListener(v -> { String account = etAccount.getText().toString().trim(); String password = etPassword.getText().toString().trim(); if (account.isEmpty() || password.isEmpty()) { Toast.makeText(this, "账号和密码不能为空", Toast.LENGTH_SHORT).show(); return; } // 对接真实登录接口；demo 阶段先跳转主页 Toast.makeText(this, "登录成功", Toast.LENGTH_SHORT).show(); }); tvRegister.setOnClickListener(v -> { Intent intent = new Intent(LoginActivity.this, RegisterActivity.class); startActivity(intent); }); } }

逻辑说明：按钮点击先做本地非空校验，这是所有仿微信登录页的通用前置逻辑。真实项目中这里应换成网络请求，但布局 demo 阶段用 Toast 和 Intent 验证页面联通即可。tvRegister 的点击事件承载注册页入口，跳转用显式 Intent。注意 findViewById 之前不需要 findViewById 空判断，因为布局里已声明对应 ID，如果 R 文件报错，优先检查布局文件是否被正确编译。

4. 控件适配与参数调优：让仿微信页面在不同机型上不翻车

4.1 用 0dp + weight 控制输入框均分高度

登录页里如果希望两个输入框高度完全一致，正确做法是给两个输入框的外层 LinearLayout 都设置 layout_height="0dp"，再各设 layout_weight="1"。系统先扣掉固定高度控件（Logo、按钮、底部文字）占用的空间，剩余空间按 1:1 分配，两个输入框高度必然一致。

很多新手在这里写成 wrap_content，以为内容一样高所以看起来一样高。结果系统字体缩放一改、输入法弹出一触发，两个框高度就出现一两像素偏差，视觉上能看出来接缝不对齐。用 0dp + weight 是从根上避免这个偏差的手段，也是线性布局里最值得养成的习惯。

4.2 圆角输入框的 shape drawable：配置能复用的背景资源

仿微信登录页的输入框普遍带浅灰圆角边框。需要新建 drawable 资源，而不是给 EditText 直接设置背景色。下面是 bg_input_border.xml 的完整内容：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#FFFFFF" /> <stroke android:width="1dp" android:color="#E5E5E5" /> <corners android:radius="6dp" /> </shape>

参数说明：solid 是填充色，stroke 是描边宽度和颜色，corners 控制圆角半径。这段文件放在 res/drawable 目录后，在输入框外层 LinearLayout 的 android:background="@drawable/bg_input_border" 引用。两个输入框共用一个 drawable，修改一次圆角半径全局生效。

这里有个细节：EditText 的 background 必须设为 @null，否则系统默认的下划线会和 shape 背景叠加，视觉上出现两条线。这个叠加问题在真机上尤其明显，模拟器上反而不容易发现。

4.3 按钮按下效果的 selector：给登录按钮加状态反馈

微信登录按钮按下去颜色会变深，这个效果用 selector 实现。在 res/drawable 下新建 btn_login_bg.xml：

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="rectangle"> <solid android:color="#05A85C" /> <corners android:radius="6dp" /> </shape> </item> <item> <shape android:shape="rectangle"> <solid android:color="#07C160" /> <corners android:radius="6dp" /> </shape> </item> </selector>

selector 的作用是给控件不同状态提供不同背景。state_pressed 为 true 表示手指按下，显示深一级的绿色；默认状态显示正常绿。把按钮的 background 改为 @drawable/btn_login_bg 后，按下反馈就有了。

没有这一步，很多模拟器或定制 ROM 上 Button 会沿用系统主题的默认颜色，紫色、灰色、甚至带阴影的 Material 风格都可能出现，仿微信的效果直接破功。这也是压缩包工程里"看起来颜色不对"最常见的原因之一。

5. 仿微信登录注册界面必踩的坑：五个高频问题与排查思路

5.1 输入框被键盘顶飞：软键盘挤压布局

现象：在模拟器或真机上点击输入框，整个布局被输入法顶上去，登录按钮被遮挡甚至完全看不见。

原因：Android 默认的 adjustResize 行为在某些机型上会让 Activity 的根布局重新测量，线性布局没有滚动能力，内容只能整体上移。

解决：在 AndroidManifest.xml 中给对应 Activity 配置：

<activity android:name=".LoginActivity" android:windowSoftInputMode="adjustPan|stateHidden" />

登录页字段少，用 adjustPan 让窗口平移而不是压缩，输入框始终可见。注册页字段多，建议用 adjustResize 并让根布局外层包一层 ScrollView，给内容滚动逃生的空间。

5.2 按钮背景色被系统主题覆盖：主题与控件的冲突

现象：明明在 Button 里写了 android:background="#07C160"，运行后按钮还是灰色的，或者带了奇怪阴影。

原因：Material 组件库的 Button 在 Android 5.0 之后默认使用主题里的 colorButtonNormal 或 MaterialButton 样式，xml 里直接写 background 会被样式覆盖。

解决：两个方向。一是改用 selector drawable，见 4.3 的 btn_login_bg.xml，确保所有状态都有自定义背景；二是把 Button 换成 TextView，设置 background 和点击效果，这是很多仿微信项目避开主题干扰的常见做法。TextView 没有 Material 样式加持，背景色完全由自己控制。

5.3 解压 .rar 后工程无法直接运行：SDK 版本与 Gradle 版本错配

现象：解压打开后一直卡在 Gradle Sync，或者报 app 模块 No matching variant 之类的错误。

原因：压缩包里配置的 Gradle、AGP 版本和本机 Android Studio 自带的 JDK 版本不一致，常见于工程打包时间较早，本机 Studio 版本较新。

解决：打开 gradle/wrapper/gradle-wrapper.properties，看 distributionUrl 里的 Gradle 版本；再打开 app/build.gradle 看 compileSdk。把 compileSdk 调低到本机 SDK Manager 已安装的版本，Gradle 版本调到和 AGP 匹配的区间，然后 File -> Sync Project with Gradle Files。一般这样操作后就能正常构建，不用重新创建工程。

5.4 注册页复制登录页导致 R 文件找不到 id

现象：复制 activity_login.xml 后改成 activity_register.xml，回到 Java 代码里 findViewById(R.id.et_nickname) 报错，提示找不到符号。

原因：复制时只改文件名，文件内部控件 ID 还是登录页的，或者新旧 ID 混用，R 文件没有重新生成。

解决：在注册布局文件里查找替换，把所有 login 相关前缀替换成 register 前缀，然后 Build -> Clean Project 一次，让 R 文件从零生成。检查清单是：et_account、et_password、btn_login 这几个 ID 在注册页里不能出现；如果出现了但 Java 里没引用，编译不会报错，但运行时可能拿到错误控件。

5.5 沉浸式状态栏和线性布局底部重叠

现象：开了沉浸式状态栏效果，登录页底部"注册新账号"文字被导航栏遮住。

原因：根布局用了 match_parent 高度，但没有处理系统栏 inset，底部内容延伸到导航区之下。

解决：给根 LinearLayout 设置 android:fitsSystemWindows="true"，让它自动把 padding 扩展到系统栏区域。注意 fitsSystemWindows 和 windowTranslucentStatus 同时使用时行为会变，建议先用 fitsSystemWindows 跑通，再考虑自定义 inset 处理。这个方法对线性布局特别友好，因为根布局是单一容器，fitsSystemWindows 只会作用一次，不会像嵌套多布局时出现重复计算。

6. 把仿微信界面封装成模板：可复用表单组件与验证清单

到这里，仿微信登录注册界面已经从布局代码跑通到了跳转逻辑。最后一个值得做的提升工作是把这套线性布局方案封装成可复用模板，下一个项目直接使用。

常见做法是做一个自定义组合控件，比如 LoginFormView，它继承垂直 LinearLayout，构造函数里 inflate 登录页的布局文件，对外暴露 getAccount()、getPassword() 方法，以及 setLoginClickListener() 接口。封装之后，任何页面要放登录表单只需要三行代码：

<com.yourpackage.view.LoginFormView android:id="@+id/login_form" android:layout_width="match_parent" android:layout_height="wrap_content" />

我在自己的项目里会在这个模板里额外放一个密码可见性切换的 ImageView，在输入框水平线性布局的 EditText 右侧插入图标，点击时在 textPassword 和 textVisiblePassword 两个 inputType 之间切换。这个功能不属于微信登录页的视觉还原，但属于登录场景的刚需，放在模板里比每个页面重写要省时间，也比在 Activity 里反复写 setTransformationMethod 要清爽。

验证自己是否真正掌握这套方案的检查清单也很简单：

• 删掉项目里的 drawable 资源，能否重新画出圆角输入框和按钮按下效果；
• 把登录页改成注册页时，能否只靠复制粘贴和 ID 替换在十分钟内完成；
• 在系统设置里开启超大字体，布局是否仍然保持上下结构不溢出。

最后说一个经验：我在做模拟项目X时，一开始觉得仿微信界面用约束布局更"高级"，结果在约束、屏障、链的调试上花的时间远多于直接写线性布局。后来想明白，仿一个界面不是面试炫技，稳定、清晰、能快速改才是核心诉求。线性布局在这个场景下就是最顺手的工具，把它的 weight 和 gravity 用透，比追新布局架子更实在。希望帮到你。

本文还有配套的精品资源，点击获取