企业官网建设流程全解析

简介：一套基于安卓开发环境的仿微信登录、注册界面线性布局工程包，面向初学安卓布局与Java界面开发的读者，演示如何用线性布局组织登录页和注册页的输入框、按钮、链接跳转，并补充验证码、重复密码、登录状态持久化等典型交互。压缩包内共1289个文件，核心包括Java源码、XML布局、dex与class编译产物、Gradle构建脚本、APK安装包以及JSON等配置文件，整体约21.28MB，结构完整，便于导入项目后直接运行和对照修改。目前已有2732人学习浏览，适合课程设计、自学仿写或快速搭建同类型界面的参考。资源内从登录注册界面设计、线性布局属性配置到Java事件监听的实现层次分明，可结合源码查看布局权重分配、圆角输入框、状态选择器背景、错误提示和页面切换等细节，帮助理解微信风格界面的完整实现思路。

1. 仿微信登录注册界面的资源：能落地到什么程度？

刚学 Android 那阵子，我一度以为仿个微信登录页就是两个输入框加一个按钮的事，结果真正动手时才发现：输入框被软键盘顶得看不到焦点，注册页返回时整个应用跟着退出，手机转一下屏刚输的密码全没了。这套基于 Android Studio + Java 写的仿微信登录、注册界面资源，核心就一个字：把线性布局（LinearLayout）用透，并把最常见的四个问题一次性演示到位——登录布局、注册布局、页面跳转、登录态保存。适合刚补完 Java 基础、正拿课程设计练手的同学，也适合想快速搭出一套表单模板的一线开发。界面没有引入复杂架构，没用数据库，改用 SharedPreferences 保存一个模拟登录标记，方便把注意力放在布局和基础交互上。

2. 线性布局选型与仿微信界面拆解：orientation、weight 与嵌套边界的取舍

把仿微信登录界面拆开看，真正决定成败的不是控件多不多，而是布局容器的选择和嵌套深度控制。这套资源里的两张 XML 布局都是线性布局，登录页一个垂直容器，注册页在垂直容器里套了两个水平容器，整体结构非常透明。下面把三个关键设计逐一拆开。

2.1 为什么仿微信登录页的主布局是 LinearLayout 而不是 ConstraintLayout

现在很多教程上来就推 ConstraintLayout，但登录注册表单是典型的“从上到下堆叠”，线性布局是自然选择。LinearLayout 是 Android 中最基础的布局之一，按垂直（vertical）或水平（horizontal）方向线性排列，子视图依次排开，代码阅读顺序和界面显示顺序完全一致，新手排错时一眼能看出来问题在哪。

登录页的 XML 骨架大致是这样：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingStart="24dp" android:paddingEnd="24dp" android:paddingTop="80dp"> <ImageView android:layout_width="72dp" android:layout_height="72dp" android:layout_gravity="center_horizontal" android:src="@mipmap/ic_launcher" android:contentDescription="@string/app_logo" /> <EditText android:id="@+id/etUsername" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="微信号 / 手机号" android:padding="16dp" android:background="@drawable/bg_input_normal" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="16dp"> <EditText android:id="@+id/etPassword" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="密码" android:inputType="textPassword" android:padding="16dp" android:background="@drawable/bg_input_normal" /> <TextView android:id="@+id/tvTogglePwd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:text="显示" /> </LinearLayout> <Button android:id="@+id/btnLogin" android:layout_width="match_parent" android:layout_height="48dp" android:layout_marginTop="32dp" android:text="登录" android:textColor="#FFFFFF" android:background="@drawable/bg_btn_login" /> <TextView android:id="@+id/tvToRegister" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="注册新账号" android:gravity="center" android:textColor="#07C160" /> </LinearLayout>

这段代码的逻辑是：外层垂直 LinearLayout 把图标、账号输入框、密码行、登录按钮、注册入口依次排下来。密码框没有直接放在外层，而是先用一个水平 LinearLayout 包了一层，密码 EditText 设置layout_width="0dp"和layout_weight="1"，让密码框自动占满“显示”文案以外的剩余空间。这就是layout_weight的核心用法：按权重分配剩余区域。wrap_content的按钮不会被压缩，因为是按内容量取宽。

相比之下，ConstraintLayout 虽然能拖拽式完成同样界面，但新手容易拖出几十条约束关系，看着毫无头绪；而线性布局嵌套两层就能表达清楚。代价是性能，嵌套深就慢，这个在第 4 章会展开。

2.2 注册界面多出来的字段：验证码行与协议行的布局写法

注册页字段明显变多：手机号、验证码、密码、确认密码、协议勾选、注册按钮。这套资源里没有把所有控件一股脑塞进垂直布局，而是用水平容器分组。验证码行的写法很有代表性：

<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <EditText android:id="@+id/etVerifyCode" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="验证码" android:inputType="number" android:padding="16dp" android:background="@drawable/bg_input_normal" /> <Button android:id="@+id/btnGetCode" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="12dp" android:text="获取验证码" android:textSize="14sp" /> </LinearLayout>

这个水平容器里，“获取验证码”按钮用wrap_content，验证码输入框用0dp + weight=1，效果就是按钮永远保持自己该有的宽度，输入框吃掉剩余所有宽度。如果想三个控件等分，可以把三个都设成0dp且weight=1，此时剩余空间会被三等分。

协议文案也是注册页容易忽略的地方。微信风格里“注册即代表同意协议”是一整行灰色小字，我一般放一个 TextView，不单独加 CheckBox，因为后续用代码控制点击范围更灵活：

<TextView android:id="@+id/tvAgreement" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="我已阅读并同意《用户协议》和《隐私政策》" android:textSize="12sp" android:gravity="center" android:textColor="#999999" />

这里有一个细节：注册页顶部和一二级控件之间有较大layout_marginTop，目的不是为了好看，而是避开系统状态栏和键盘弹起后的视觉压迫。如果直接把控件顶到屏幕最上方，键盘弹出来时输入框就会被压缩到难以点击。

2.3 圆角输入框与微信绿按钮：drawable 与 styles 的一次定义、两处复用

微信界面给人“干净”的第一印象，来自三样东西：浅灰背景输入框、绿色主按钮、字体色系统统一。这套资源把这些都抽成了可复用 drawable 和主题色，不是每个页面单独写颜色值。

输入框圆角背景：

<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#F5F5F5" /> <corners android:radius="8dp" /> <stroke android:width="1dp" android:color="#E5E5E5" /> </shape>

登录按钮背景：

<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#07C160" /> <corners android:radius="6dp" /> </shape>

主题样式：

<resources> <style name="Theme.LoginDemo" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">#07C160</item> <item name="colorPrimaryDark">#058C4A</item> <item name="colorAccent">#07C160</item> </style> </resources>

两个背景文件放在res/drawable下，样式放在res/values/styles.xml下，然后在AndroidManifest.xml中给登录和注册两个 Activity 设置android:theme="@style/Theme.LoginDemo"。这样两页用的绿色完全一致，改主题色时只动一处。按钮、输入框的圆角值建议单独抽到dimens.xml，避免两处半径差 1dp 导致肉眼可见的不协调。

这里有个反直觉点：colorAccent不只会影响按钮和输入框选中态颜色，还会影响光标颜色和部分控件的默认背景着色。也就是说，如果你在 EditText 里发现“背景怎么不是我要的灰色”，多半是主题色在作怪。这个问题后面有一节专门讲。

3. 把 XML 变成可交互的登录注册流程：监听器、状态切换与登录态持久化

布局文件只是皮，真正的登录注册逻辑在 Java 代码里。这套资源里最值得抄作业的部分，是绑定监听、页面切换回传数据和登录态持久化三块的配合方式。

3.1 findViewById 绑定与点击监听：从按钮到输入框的完整链路

登录页 Java 代码的核心结构如下：

public class LoginActivity extends AppCompatActivity { private static final int REQUEST_CODE_REGISTER = 1001; private EditText etUsername, etPassword; private Button btnLogin; private TextView tvToRegister; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); etUsername = findViewById(R.id.etUsername); etPassword = findViewById(R.id.etPassword); btnLogin = findViewById(R.id.btnLogin); tvToRegister = findViewById(R.id.tvToRegister); btnLogin.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String username = etUsername.getText().toString().trim(); String password = etPassword.getText().toString().trim(); if (TextUtils.isEmpty(username)) { etUsername.setError("请输入微信号/手机号"); return; } if (TextUtils.isEmpty(password)) { etPassword.setError("请输入密码"); return; } // 这里只是本地模拟，替换成你的网络请求即可 saveLoginState(username); startActivity(new Intent(LoginActivity.this, MainActivity.class)); finish(); } }); tvToRegister.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(LoginActivity.this, RegisterActivity.class); startActivityForResult(intent, REQUEST_CODE_REGISTER); } }); } }

这段代码的逻辑链路很直白：findViewById把 XML 里定义好的控件引用拿过来，然后给登录按钮注册点击监听器。点击时先从两个 EditText 取出文本，trim()去掉首尾空格，再用TextUtils.isEmpty判空。判空失败时setError会在输入框下方显示一行红色提示文字，并且输入框右侧会出现一个感叹号图标，这是 Android TextView 自带的交互反馈，不需要额外引入控件。

这里有一个容易被忽略的参数：inputType。XML 里密码框设置的是textPassword，所以 Java 代码不用关心是否转成密文点阵，系统会处理。如果写成text，密码就会明文显示，等于是自己给自己埋雷。

点击“登录”后先调saveLoginState(username)，再跳转MainActivity并finish()登录页。finish()的作用是让登录页从返回栈中移除，这样用户在主界面按返回键不会退回到登录页。这种“登录后销毁登录页”的习惯，能避免很多返回栈混乱问题。

3.2 Intent 在登录页与注册页之间切换：返回栈与数据回传

登录页点击“注册新账号”时，代码没有用普通的startActivity后finish()，而是startActivityForResult。原因是产品上的一个常见诉求：用户在注册页输完手机号并注册成功后，回到登录页时应该自动把手机号回填到账号输入框，再顺手把光标放到密码框。用老接口startActivityForResult在 Java 工程里最直观。

注册页的提交按钮处理如下：

// RegisterActivity 内部 String phone = etPhone.getText().toString().trim(); String password = etPassword.getText().toString().trim(); String confirmPassword = etConfirmPassword.getText().toString().trim(); if (TextUtils.isEmpty(phone)) { etPhone.setError("请输入手机号"); return; } if (password.length() < 6) { etPassword.setError("密码至少 6 位"); return; } if (!password.equals(confirmPassword)) { etConfirmPassword.setError("两次密码不一致"); return; } Intent result = new Intent(); result.putExtra("registered_phone", phone); setResult(RESULT_OK, result); finish();

登录页接收返回数据：

@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == REQUEST_CODE_REGISTER && resultCode == RESULT_OK && data != null) { String phone = data.getStringExtra("registered_phone"); if (!TextUtils.isEmpty(phone)) { etUsername.setText(phone); etPassword.requestFocus(); } } }

setResult+finish是 Android 老一套的数据回传方式。setResult只负责把结果暂存，真正返回动作由finish触发，系统再把结果交给前面等待的onActivityResult。

这里的关键点是：登录页跳转注册页时千万不能finish()登录页，否则注册页 finish 后返回栈里已经没有登录页，用户会直接回到桌面或者退出应用。如果你用的是新版 Android Studio 模板，startActivityForResult可能被标为废弃，官方推荐 Activity Result API。但资源包做得比较保守，老接口依赖最低版本更小，对于课程设计和初学理解仍然够用，我在自己的老项目里也一直保留这种写法。

3.3 SharedPreferences 持久化登录态：自动登录与退出登录

登录成功的状态需要跨 Activity 甚至跨启动存在。这套资源用 SharedPreferences 存一个布尔标记，够用且直观。

public void saveLoginState(String username) { SharedPreferences sp = getSharedPreferences("login_pref", MODE_PRIVATE); sp.edit() .putBoolean("is_login", true) .putString("username", username) .apply(); }

主界面启动时检查：

SharedPreferences sp = getSharedPreferences("login_pref", MODE_PRIVATE); boolean isLogin = sp.getBoolean("is_login", false); if (!isLogin) { startActivity(new Intent(this, LoginActivity.class)); finish(); return; }

退出登录：

public void logout() { SharedPreferences sp = getSharedPreferences("login_pref", MODE_PRIVATE); sp.edit().clear().apply(); startActivity(new Intent(this, LoginActivity.class)); finish(); }

三个参数值得单独说明：MODE_PRIVATE表示这个 SharedPreferences 文件只允许当前应用读写；apply()是异步落盘，不会卡 UI 线程，commit()是同步落盘，返回值表示是否成功，日常 UI 线程里别用commit()；clear().apply()会清空整个文件里该应用的所有键值，适合退出登录这种“一刀切”场景。

提示：SharedPreferences 只适合存“是否登录”“用户名展示”这类非敏感数据。密码和真实 token 不要这样明文存，要用加密存储或系统级 Keystore。资源里存明文是为了演示流程，生产环境必须替换。

另外，退出登录后跳转登录页需要finish()主界面，再把登录页作为栈顶。如果主界面还有别的上级页面，建议补一个Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK把这些历史页面全部清掉，这也是我在实际项目里常用的“后悔药”。

4. 避坑指南：线性布局仿微信界面最常见的五个翻车现场

这套资源我前前后后帮三个同学调试过，翻车点高度集中，几乎都跟软键盘、主题色覆盖、返回栈和状态丢失有关。下面按现象到原因到解决的思路，整理成五条可复用的排查记录。

4.1 输入框被软键盘遮挡：windowSoftInputMode 配置的一个隐藏前提

现象：在AndroidManifest.xml里给登录页配了android:windowSoftInputMode="stateHidden|adjustResize"，运行时点击底部输入框，输入框仍然被弹出的软键盘盖住，登录按钮完全看不到。

原因：adjustResize并不总是生效。如果 Activity 的主题是 Fullscreen 或 Immersive 类型，系统窗口会因为全屏逻辑吞掉这次 resize；另外，如果软键盘模式在 styles 和 Manifest 两处都配了，Manifest 会覆盖 style，但覆盖后的值可能与预期不符。更隐蔽的坑是根布局外层如果不加 ScrollView，内容区没有可滚动空间，resize 后系统只能压缩布局，压缩到一定程度输入框照样被顶出可视区。

解决：统一在 Manifest 的 Activity 节点配一次软键盘模式，去掉 styles 里的重复配置；布局根部包一层 ScrollView，并给 ScrollView 设置android:fillViewport="true"。

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

做完这两步，键盘弹起时整个页面会被顶上去，而不是遮住输入框。判断是否修复成功的方法是：点击验证码输入框，看“获取验证码”按钮是否完整可见。如果按钮仍然被挡，多半是沉浸式状态栏和fitsSystemWindows属性冲突，需要给根布局加android:fitsSystemWindows="true"，但注意这个属性和 adjustResize 要配合测试，容易顾此失彼。

4.2 EditText 的背景被主题覆盖：backgroundTint 的颜色叠加

现象：在 XML 里给 EditText 设置了android:background="@drawable/bg_input_normal"，运行后并不是想象中的浅灰圆角框，而是带了一条默认的下划线或者紫蓝色调。

原因：Android 5.0 之后，EditText 默认会使用主题里的colorAccent和colorControlNormal绘制背景着色层，backgroundTint体系会叠加在自定义背景之上，把 drawable 原本的颜色“染”掉。很多新手只改了android:background，不知道还有个隐藏的 tint 在作怪。

解决：给 EditText 显式关闭背景着色：

<EditText android:id="@+id/etUsername" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/bg_input_normal" android:backgroundTint="@null" android:hint="微信号 / 手机号" />

如果不想每处都写backgroundTint，可以在应用的styles.xml里把colorControlNormal置为透明：

<item name="colorControlNormal">@android:color/transparent</item>

但这会影响整个主题下所有 EditText、CheckBox 等控件的默认着色，改动面较大，我一般只在单个页面用第一种方案，减少副作用。

4.3 注册成功返回登录页却“退出了应用”：Activity 堆栈混乱

现象：在注册页点击“注册并登录”，注册页关闭后没有回到登录页，而是直接回到桌面；或者退出登录页再进来，按返回键时把整个应用关掉了。

原因：大多是跳转时把不该销毁的页面销毁了。常见错误是点击“注册”时写了startActivity(registerIntent); finish();，把登录页也移出了返回栈。注册页再finish()时，返回栈里已经没有登录页，系统只能去找更底层的其它 Activity，找不到就退回桌面。另一种情况是把两个页面都设置为singleTask或singleTop，互相覆盖导致状态混乱。

解决：登录页跳注册页时不要finish()，等注册页通过setResult返回后继续处理。如果确实需要清掉登录页上面的残留页面，用标志位：

Intent loginIntent = new Intent(this, LoginActivity.class); loginIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP); startActivity(loginIntent); finish();

FLAG_ACTIVITY_CLEAR_TOP会清除目标 Activity 之上的所有页面，SINGLE_TOP则让栈顶已存在的登录页直接复用，而不是新建实例。这两招合起来，能解决绝大多数“返回键退出应用”的玄学问题。

4.4 横竖屏一翻转，输入内容全没了：Activity 重建与状态保存

现象：在注册页输到一半，手机从竖屏转横屏，界面是重新显示了，但刚输入的手机号、验证码全部清空，用户只能从头填。

原因：默认情况下，配置变更（orientation、screenSize）会触发 Activity 销毁重建。你不主动保存输入框内容，系统不会替你保留。

解决：有两种路线。路线一是在 Manifest 里给该 Activity 配置：

android:configChanges="orientation|screenSize"

这样转屏时 Activity 不重建，而是回调onConfigurationChanged，输入内容自然还在。这种做法省事，但不够通用。路线二更推荐：保存和恢复输入状态。

@Override protected void onSaveInstanceState(Bundle outState) { outState.putString("username", etUsername.getText().toString()); outState.putString("password", etPassword.getText().toString()); super.onSaveInstanceState(outState); } @Override protected void onRestoreInstanceState(Bundle savedInstanceState) { super.onRestoreInstanceState(savedInstanceState); if (savedInstanceState != null) { etUsername.setText(savedInstanceState.getString("username")); etPassword.setText(savedInstanceState.getString("password")); } }

注意：onRestoreInstanceState的调用时机在onStart之后，此时控件已经初始化完成，所以可以直接setText。密码框恢复明文在演示项目里无所谓，但真实项目出于安全考虑，最好让用户重新输入，只在账号框做恢复。

4.5 多重 layout_weight 导致界面加载变慢：嵌套层级的隐性开销

现象：注册页字段多，垂直 LinearLayout 里嵌了三个水平 LinearLayout，每个里面的输入框都设置了layout_weight，低端机上打开页面明显卡顿，点击输入框时响应也有延迟。

原因：layout_weight不是免费的。系统在测量阶段会先按wrap_content或0dp测量一遍各子视图，再计算剩余空间按权重重新分配，嵌套层数越深，测量次数成倍增加。如果每个水平容器里都有两个以上的weight控件，整个页面的测量开销会在低端机上暴露出来。

解决：控制嵌套深度，只在真正需要“按比例分配剩余空间”的地方使用weight。像验证码行这种“输入框 + 按钮”的固定组合，只有一个weight是合理的；但如果一排有四个等宽控件还要用四个weight去分，不如换成GridLayout或者局部引入ConstraintLayout。线性布局适合纵向表单堆叠，遇到复杂网格就换工具，别硬撑。

5. 进阶技巧：从“能看”打磨到“能上线”

资源里给出的界面能运行，但离“像一个正式产品”还差几层细节。这里说三个我自己常用的打磨手法，每个改动都不大，效果却很明显。

5.1 输入框聚焦变色：selector 状态选择器的用法

把输入框背景从静态 drawable 换成状态选择器，实现“点击后边框变绿”的微信风格反馈：

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:drawable="@drawable/bg_input_focused" /> <item android:state_enabled="false" android:drawable="@drawable/bg_input_disabled" /> <item android:drawable="@drawable/bg_input_normal" /> </selector>

bg_input_focused只需改stroke颜色为#07C160。EditText 的background引用这个 selector 后，获得焦点时系统自动切换 drawable，不需要写setOnFocusChangeListener。

5.2 登录按钮的加载态与禁用态

防止用户重复点击登录按钮，常见做法是点击后立即禁用按钮并显示加载文案：

btnLogin.setEnabled(false); btnLogin.setText("登录中..."); btnLogin.postDelayed(() -> { btnLogin.setEnabled(true); btnLogin.setText("登录"); }, 2000);

按钮的背景也要改成 selector，让state_enabled="false"时显示灰色圆角背景，否则按钮禁用后颜色不变，用户会以为还能点。

5.3 我自己的回归检查清单

下面这份清单是我后来每次写登录注册都会跑一遍的检查项：

这套资源里的 LinearLayout 布局思路、SharedPreferences 登录态、Activity 回传代码，正好覆盖了我工作里最常碰到的几处。从那以后我每次写完登录注册，都强制走一遍上面的检查清单，再也不敢在没验证软键盘和返回键之前就说“界面写完了”。希望帮到你。

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