簡介本資源是一份面向計算機專業(yè)本科生的Android畢業(yè)設(shè)計實戰(zhàn)源碼聚焦移動端登錄界面開發(fā)核心能力訓練幫助學習者掌握UI設(shè)計、用戶交互與基礎(chǔ)網(wǎng)絡(luò)通信全流程。壓縮包共52個文件含24張PNG圖標資源、9個XML布局文件如activity_login.xml、8個編譯后class文件、3個Java業(yè)務(wù)邏輯文件以及APK安裝包、配置文件和IDE工程元數(shù)據(jù)整體僅169KB輕量易導入Android Studio。已有467人學習下載適合作為課程設(shè)計、畢設(shè)選題或Android入門進階實踐項目。讀者可直接運行查看仿QQ/微信風格的響應(yīng)式登錄頁效果深入理解EditText輸入驗證、按鈕事件綁定、SharedPreferences記住密碼實現(xiàn)以及項目標準結(jié)構(gòu)res、src、AndroidManifest.xml等模塊組織方式快速建立Android應(yīng)用開發(fā)的系統(tǒng)性認知。1. 這不是套殼UI而是畢業(yè)設(shè)計里最常被低估的「登錄頁工程」Android仿QQ/微信登錄頁的本質(zhì)是狀態(tài)驅(qū)動安全邊界可維護性驗證很多計算機專業(yè)學生拿到“Android仿QQ微信登錄頁面”這個畢設(shè)題目時第一反應(yīng)是打開Figma扒UI、復(fù)制幾段Material Design控件代碼——結(jié)果跑起來按鈕能點、輸入框能輸?shù)唤尤胝鎸嵸~號體系就崩密碼明文傳輸、驗證碼邏輯錯亂、第三方登錄回調(diào)丟失、深色模式下圖標消失、無障礙服務(wù)無法聚焦輸入框。這根本不是界面還原問題而是對Android登錄鏈路完整性的系統(tǒng)性缺失。它要求你同時處理用戶憑證生命周期管理含Token刷新、多因素認證狀態(tài)機短信/圖形碼/生物識別切換、OAuth2.0授權(quán)流程嵌套、以及Gradle構(gòu)建時資源混淆與簽名配置的協(xié)同。適合大三下學期已掌握Activity生命周期、熟悉RetrofitOkHttp網(wǎng)絡(luò)層、能獨立配置AndroidManifest.xml權(quán)限聲明的學生。如果你還在用findViewById()寫登錄頁說明還沒真正進入Android工程實踐門檻。2. 用Android Studio 2023.3.1 Material 3 實現(xiàn)最小可運行登錄頁從布局結(jié)構(gòu)到狀態(tài)綁定的四步閉環(huán)2.1 創(chuàng)建兼容Android 8.0的項目并啟用ViewBinding與Material 3主題新建項目時選擇“Empty Activity”Minimum SDK設(shè)為API 26Android 8.0這是QQ與微信當前生產(chǎn)環(huán)境最低支持版本。在app/build.gradle中強制啟用ViewBinding并引入Material 3依賴android { buildFeatures { viewBinding true } } dependencies { implementation androidx.core:core-ktx:1.12.0 implementation com.google.android.material:material:1.10.0 implementation androidx.constraintlayout:constraintlayout:2.3.0 }提示Material 3的TextInputLayout默認啟用boxStrokeColor動態(tài)變色但QQ/微信登錄頁的輸入框邊框在聚焦時需保持純色非漸變必須在res/values/themes.xml中覆蓋colorOnSurface值否則視覺還原度不足。在res/values/themes.xml中定義主題style nameTheme.LoginApp parentTheme.Material3.DayNight.NoActionBar item namecolorPrimarycolor/md_theme_light_primary/item item namecolorOnSurfacecolor/md_theme_light_onSurface/item !-- 關(guān)鍵禁用Material 3默認的輸入框邊框動畫 -- item nametextInputStylestyle/Widget.Material3.TextInputLayout.OutlinedBox/item /style2.2 構(gòu)建符合QQ/微信交互邏輯的登錄表單布局QQ與微信登錄頁共性在于頂部Logo區(qū)固定高度48dp、賬號輸入?yún)^(qū)帶郵箱/手機號格式校驗提示、密碼區(qū)含可見/隱藏切換圖標、底部“忘記密碼”與“注冊新賬號”文字鏈、第三方登錄按鈕組橫向居中排列。使用ConstraintLayout實現(xiàn)響應(yīng)式約束!-- activity_login.xml -- androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:layout_widthmatch_parent android:layout_heightmatch_parent !-- Logo -- ImageView android:idid/logo android:layout_width80dp android:layout_height80dp android:srcdrawable/ic_qq_logo app:layout_constraintTop_toTopOfparent app:layout_constraintStart_toStartOfparent app:layout_constraintEnd_toEndOfparent app:layout_constraintVertical_bias0.15 / !-- 賬號輸入框 -- com.google.android.material.textfield.TextInputLayout android:idid/til_account stylestyle/Widget.Material3.TextInputLayout.OutlinedBox android:layout_width0dp android:layout_heightwrap_content android:layout_marginHorizontal32dp android:hintQQ號/手機號/郵箱 app:layout_constraintTop_toBottomOfid/logo app:layout_constraintStart_toStartOfparent app:layout_constraintEnd_toEndOfparent app:layout_constraintVertical_chainStylepacked com.google.android.material.textfield.TextInputEditText android:idid/et_account android:layout_widthmatch_parent android:layout_heightwrap_content android:inputTypetextEmailAddress|number android:importantForAutofillno / /com.google.android.material.textfield.TextInputLayout !-- 密碼輸入框 -- com.google.android.material.textfield.TextInputLayout android:idid/til_password stylestyle/Widget.Material3.TextInputLayout.OutlinedBox android:layout_width0dp android:layout_heightwrap_content android:layout_marginTop16dp android:hint密碼 app:passwordToggleEnabledtrue app:passwordToggleTintcolor/black app:layout_constraintTop_toBottomOfid/til_account app:layout_constraintStart_toStartOfid/til_account app:layout_constraintEnd_toEndOfid/til_account com.google.android.material.textfield.TextInputEditText android:idid/et_password android:layout_widthmatch_parent android:layout_heightwrap_content android:inputTypetextPassword / /com.google.android.material.textfield.TextInputLayout !-- 忘記密碼鏈接 -- TextView android:idid/tv_forget android:layout_widthwrap_content android:layout_heightwrap_content android:text忘記密碼 android:textColor?attr/colorPrimary android:textSize14sp app:layout_constraintTop_toBottomOfid/til_password app:layout_constraintEnd_toEndOfid/til_password app:layout_constraintHorizontal_bias1.0 app:layout_constraintVertical_bias0.0 / !-- 登錄按鈕 -- com.google.android.material.button.MaterialButton android:idid/btn_login android:layout_width0dp android:layout_heightwrap_content android:layout_marginTop32dp android:text登錄 app:layout_constraintTop_toBottomOfid/tv_forget app:layout_constraintStart_toStartOfid/til_account app:layout_constraintEnd_toEndOfid/til_account / !-- 第三方登錄分割線 -- View android:idid/divider android:layout_width0dp android:layout_height1dp android:background?android:attr/listDivider app:layout_constraintTop_toBottomOfid/btn_login app:layout_constraintStart_toStartOfid/til_account app:layout_constraintEnd_toEndOfid/til_account app:layout_constraintVertical_bias0.5 / !-- QQ/微信圖標按鈕組 -- LinearLayout android:idid/ll_social_login android:layout_widthwrap_content android:layout_heightwrap_content android:orientationhorizontal android:layout_marginTop24dp app:layout_constraintTop_toBottomOfid/divider app:layout_constraintStart_toStartOfparent app:layout_constraintEnd_toEndOfparent com.google.android.material.button.MaterialButton stylestyle/Widget.Material3.Button.IconButton.Filled.Tonal android:layout_width48dp android:layout_height48dp android:layout_marginEnd12dp app:icondrawable/ic_qq app:iconGravitytext_start / com.google.android.material.button.MaterialButton stylestyle/Widget.Material3.Button.IconButton.Filled.Tonal android:layout_width48dp android:layout_height48dp app:icondrawable/ic_wechat app:iconGravitytext_start / /LinearLayout /androidx.constraintlayout.widget.ConstraintLayout參數(shù)說明app:passwordToggleTintcolor/black強制將眼睛圖標設(shè)為黑色避免Material 3默認的藍色在深色模式下不可見android:importantForAutofillno禁用自動填充防止測試時被系統(tǒng)密碼管理器干擾app:layout_constraintVertical_bias0.0確?！巴浢艽a”文字緊貼密碼框底部而非居中。2.3 在LoginActivity中完成ViewBinding綁定與基礎(chǔ)事件監(jiān)聽LoginActivity.kt需完成ViewBinding初始化、輸入校驗、按鈕點擊響應(yīng)三件事不涉及任何網(wǎng)絡(luò)請求那是下一章的事class LoginActivity : AppCompatActivity() { private lateinit var binding: ActivityLoginBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding ActivityLoginBinding.inflate(layoutInflater) setContentView(binding.root) // 初始化輸入框監(jiān)聽器 setupInputListeners() // 綁定登錄按鈕點擊 binding.btnLogin.setOnClickListener { performLogin() } // 綁定第三方登錄點擊 binding.llSocialLogin.getChildAt(0).setOnClickListener { Toast.makeText(this, QQ登錄啟動中..., Toast.LENGTH_SHORT).show() } binding.llSocialLogin.getChildAt(1).setOnClickListener { Toast.makeText(this, 微信登錄啟動中..., Toast.LENGTH_SHORT).show() } } private fun setupInputListeners() { binding.etAccount.addTextChangedListener(object : TextWatcher { override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {} override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {} override fun afterTextChanged(s: Editable?) { // 實時校驗郵箱/手機號格式 val account s.toString().trim() if (account.isNotEmpty()) { if (isValidEmail(account) || isValidPhone(account)) { binding.tilAccount.isErrorEnabled false } else { binding.tilAccount.error 請輸入有效的QQ號、手機號或郵箱 } } } }) } private fun performLogin() { val account binding.etAccount.text.toString().trim() val password binding.etPassword.text.toString() if (account.isEmpty() || password.isEmpty()) { Toast.makeText(this, 賬號和密碼不能為空, Toast.LENGTH_SHORT).show() return } // 此處僅做前端校驗真實登錄需調(diào)用ViewModel發(fā)起網(wǎng)絡(luò)請求 Toast.makeText(this, 前端校驗通過準備發(fā)起登錄請求, Toast.LENGTH_SHORT).show() } private fun isValidEmail(email: String): Boolean { return Patterns.EMAIL_ADDRESS.matcher(email).matches() } private fun isValidPhone(phone: String): Boolean { return phone.length in 11..12 phone.startsWith(1) phone.all { it.isDigit() } } }邏輯說明TextWatcher在onTextChanged中不做耗時操作只觸發(fā)格式校驗performLogin()函數(shù)內(nèi)不直接調(diào)用Retrofit而是應(yīng)交由LoginViewModel處理此處僅作流程占位isValidPhone()校驗11-12位數(shù)字且以1開頭覆蓋國內(nèi)主流手機號段及部分港澳臺號碼。2.4 驗證登錄頁在不同設(shè)備與系統(tǒng)版本下的渲染一致性畢業(yè)設(shè)計答辯時評委常會現(xiàn)場切換深色模式或縮放字體測試兼容性。需在AndroidManifest.xml中聲明適配配置activity android:name.LoginActivity android:exportedtrue android:configChangesuiMode|fontScale|screenLayout|smallestScreenSize android:themestyle/Theme.LoginApp /并在LoginActivity中重寫onConfigurationChanged()override fun onConfigurationChanged(newConfig: Configuration) { super.onConfigurationChanged(newConfig) // 深色模式切換時重新加載資源 if (newConfig.uiMode and Configuration.UI_MODE_NIGHT_MASK Configuration.UI_MODE_NIGHT_YES) { binding.logo.setImageResource(R.drawable.ic_qq_logo_dark) } else { binding.logo.setImageResource(R.drawable.ic_qq_logo_light) } }注意ic_qq_logo_dark與ic_qq_logo_light需提前放入res/drawable-night/與res/drawable/目錄否則深色模式下圖標會顯示為灰色方塊。這是QQ/微信登錄頁在Android 12系統(tǒng)上必須處理的細節(jié)。3. 接入真實登錄流程用Retrofit 2.9.0 OkHttp 4.12.0 實現(xiàn)賬號密碼登錄與Token持久化3.1 定義符合QQ/微信后端規(guī)范的API接口與數(shù)據(jù)模型QQ與微信登錄接口均采用RESTful風格返回JSON格式響應(yīng)。典型成功響應(yīng)體如下{ code: 0, msg: success, data: { token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..., expires_in: 7200, user_info: { uid: 123456789, nickname: 張三, avatar_url: https://q.qlogo.cn/headimg_dl?... } } }創(chuàng)建對應(yīng)Kotlin數(shù)據(jù)類data class LoginResponse( val code: Int, val msg: String, val data: LoginData? ) data class LoginData( val token: String, val expires_in: Int, val user_info: UserInfo ) data class UserInfo( val uid: String, val nickname: String, val avatar_url: String )定義Retrofit接口interface AuthService { FormUrlEncoded POST(auth/login) suspend fun login( Field(account) account: String, Field(password) password: String, Field(device_id) deviceId: String getDeviceId() ): ResponseLoginResponse } object ApiClient { private const val BASE_URL https://api.example.com/ val authService: AuthService by lazy { Retrofit.Builder() .baseUrl(BASE_URL) .addConverterFactory(GsonConverterFactory.create()) .client(OkHttpClient.Builder() .connectTimeout(10, TimeUnit.SECONDS) .readTimeout(15, TimeUnit.SECONDS) .build()) .build() .create(AuthService::class.java) } }參數(shù)說明FormUrlEncoded表明使用application/x-www-form-urlencoded編碼這是QQ/微信Web端登錄接口標準Field(device_id)必須傳入唯一設(shè)備標識否則后端會拒絕請求getDeviceId()需調(diào)用Settings.Secure.getString(contentResolver, Settings.Secure.ANDROID_ID)獲取該ID在設(shè)備重置前不變。3.2 使用ViewModel封裝登錄狀態(tài)與網(wǎng)絡(luò)請求生命周期LoginViewModel.kt需繼承ViewModel并持有CoroutineScope避免Activity重建導致請求中斷class LoginViewModel : ViewModel() { private val _loginState MutableLiveDataLoginState() val loginState: LiveDataLoginState _loginState fun login(account: String, password: String) { viewModelScope.launch { _loginState.value LoginState.Loading try { val response ApiClient.authService.login(account, password) if (response.isSuccessful response.body()?.code 0) { val token response.body()!!.data!!.token val expiresIn response.body()!!.data!!.expires_in // 持久化Token到SharedPreferences saveTokenToPrefs(token, expiresIn) _loginState.value LoginState.Success(response.body()!!.data!!) } else { _loginState.value LoginState.Error(response.body()?.msg ?: 登錄失敗) } } catch (e: Exception) { _loginState.value LoginState.Error(e.message ?: 網(wǎng)絡(luò)異常) } } } private fun saveTokenToPrefs(token: String, expiresIn: Int) { val prefs App.instance.getSharedPreferences(auth, Context.MODE_PRIVATE) with(prefs.edit()) { putString(access_token, token) putLong(token_expires_at, System.currentTimeMillis() expiresIn * 1000L) apply() } } } sealed class LoginState { object Loading : LoginState() data class Success(val userInfo: LoginData) : LoginState() data class Error(val message: String) : LoginState() }關(guān)鍵點saveTokenToPrefs()中expires_in單位為秒需轉(zhuǎn)為毫秒后與當前時間相加得到過期時間戳App.instance需在Application類中初始化確保Context全局可用viewModelScope.launch自動綁定ViewModel生命周期Activity銷毀時協(xié)程自動取消。3.3 在LoginActivity中觀察ViewModel狀態(tài)并更新UI修改LoginActivity.kt中的performLogin()方法接入ViewModelprivate lateinit var loginViewModel: LoginViewModel override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding ActivityLoginBinding.inflate(layoutInflater) setContentView(binding.root) loginViewModel ViewModelProvider(this)[LoginViewModel::class.java] // 觀察登錄狀態(tài) loginViewModel.loginState.observe(this) { state - when (state) { is LoginState.Loading - { binding.btnLogin.isEnabled false binding.btnLogin.text 登錄中... } is LoginState.Success - { Toast.makeText(this, 歡迎回來${state.userInfo.user_info.nickname}, Toast.LENGTH_LONG).show() // 跳轉(zhuǎn)至主頁面 startActivity(Intent(this, MainActivity::class.java)) finish() } is LoginState.Error - { binding.btnLogin.isEnabled true binding.btnLogin.text 登錄 Toast.makeText(this, 錯誤${state.message}, Toast.LENGTH_SHORT).show() } } } binding.btnLogin.setOnClickListener { val account binding.etAccount.text.toString().trim() val password binding.etPassword.text.toString() if (account.isNotEmpty() password.isNotEmpty()) { loginViewModel.login(account, password) } } }邏輯說明observe(this)中的this指Activity確保LifecycleOwner綁定正確binding.btnLogin.isEnabled false防止重復(fù)點擊跳轉(zhuǎn)MainActivity前必須調(diào)用finish()避免用戶按返回鍵回到登錄頁造成Token泄露風險。3.4 配置OkHttp攔截器處理Token自動注入與過期刷新QQ/微信客戶端在后續(xù)所有API請求頭中攜帶Authorization: Bearer token。需添加攔截器自動注入val client OkHttpClient.Builder() .addInterceptor { chain - val request chain.request().newBuilder() .header(Authorization, Bearer ${getTokenFromPrefs()}) .build() chain.proceed(request) } .build()getTokenFromPrefs()需判斷Token是否過期fun getTokenFromPrefs(): String { val prefs App.instance.getSharedPreferences(auth, Context.MODE_PRIVATE) val token prefs.getString(access_token, null) val expiresAt prefs.getLong(token_expires_at, 0) return if (token ! null System.currentTimeMillis() expiresAt) { token } else { // Token已過期清空并返回空字符串 prefs.edit().clear().apply() } }注意此方案適用于短期Token如2小時若需長期有效Token如7天必須實現(xiàn)Refresh Token機制在攔截器中捕獲401響應(yīng)后自動調(diào)用刷新接口否則用戶頻繁掉線將影響畢設(shè)演示效果。4. 畢業(yè)設(shè)計答辯必答的三個技術(shù)細節(jié)深色模式適配、無障礙服務(wù)支持、APK簽名配置4.1 深色模式下輸入框光標與文字顏色的精準控制Material 3默認在深色模式下將TextInputEditText的光標設(shè)為colorPrimary但QQ/微信登錄頁在深色模式下光標為白色#FFFFFF文字為淺灰#E0E0E0。需在res/values-night/colors.xml中覆蓋color namemd_theme_dark_onSurface#E0E0E0/color color namemd_theme_dark_primary#FFFFFF/color并在TextInputEditText中顯式設(shè)置com.google.android.material.textfield.TextInputEditText ... android:textColor?attr/colorOnSurface android:textCursorDrawabledrawable/cursor_drawable /res/drawable/cursor_drawable.xmlshape xmlns:androidhttp://schemas.android.com/apk/res/android size android:width2dp / solid android:color?attr/colorPrimary / /shape驗證方法在Settings Display Dark Theme中切換檢查光標是否始終為純白、輸入文字是否清晰可讀、Hint文字是否為半透明灰色android:textColorHint?android:attr/textColorHint。4.2 為視障用戶啟用TalkBack無障礙服務(wù)支持QQ/微信登錄頁所有交互元素必須聲明contentDescription否則TalkBack無法朗讀。在XML中補充ImageView android:idid/logo android:contentDescriptionQQ登錄Logo ... / com.google.android.material.textfield.TextInputLayout android:contentDescription請輸入QQ號、手機號或郵箱 ... / com.google.android.material.button.MaterialButton android:contentDescription點擊登錄 ... /并在Java/Kotlin中動態(tài)設(shè)置binding.etAccount.importantForAccessibility View.IMPORTANT_FOR_ACCESSIBILITY_YES binding.etPassword.importantForAccessibility View.IMPORTANT_FOR_ACCESSIBILITY_YES提示importantForAccessibility設(shè)為YES確保TalkBack聚焦輸入框時能正確播報Hint文本contentDescription不可為空字符串否則TalkBack會跳過該元素。4.3 Gradle簽名配置與APK發(fā)布包生成規(guī)范畢業(yè)設(shè)計提交的APK必須使用正式簽名不能用debug.keystore。在app/build.gradle中配置android { signingConfigs { release { storeFile file(../keystore/release.jks) storePassword your_store_password keyAlias key0 keyPassword your_key_password } } buildTypes { release { signingConfig signingConfigs.release minifyEnabled true proguardFiles getDefaultProguardFile(proguard-android-optimize.txt), proguard-rules.pro } } }proguard-rules.pro中保留關(guān)鍵類-keep class com.google.gson.** { *; } -keep class androidx.lifecycle.** { *; } -keep class retrofit2.** { *; } -keep class okhttp3.** { *; }參數(shù)說明storeFile路徑為相對路徑需將release.jks放在項目根目錄外的keystore/文件夾minifyEnabled true啟用代碼混淆防止反編譯暴露API密鑰proguard-rules.pro必須保留Gson與Retrofit反射所需類否則JSON解析失敗。5. 真實場景下的登錄頁性能優(yōu)化冷啟動耗時壓測與內(nèi)存泄漏檢測5.1 使用Android Profiler測量LoginActivity冷啟動時間QQ/微信登錄頁從Launcher圖標點擊到首幀渲染必須控制在500ms內(nèi)。在Android Studio中啟動Profiler → CPU → Record → 點擊APP圖標觀察LoginActivity.onCreate()執(zhí)行時間階段典型耗時優(yōu)化手段setContentView()80~120ms將activity_login.xml中ImageView的android:src替換為app:srcCompat避免Bitmap同步解碼ViewBinding.inflate()10ms確保未在onCreate()中執(zhí)行耗時IO如讀取SharedPreferencesbinding.root.post{}延遲操作30~50ms將非必要UI初始化如第三方SDK初始化移至post{}中實操命令在終端執(zhí)行adb shell am start -W com.example.login/.LoginActivity查看ThisTime字段目標值≤450ms。5.2 用LeakCanary 2.12檢測登錄頁內(nèi)存泄漏在app/build.gradle中添加debugImplementation com.squareup.leakcanary:leakcanary-android:2.12啟動APP后觸發(fā)登錄流程退出LoginActivityLeakCanary會自動檢測LoginActivity實例是否被靜態(tài)變量或Handler引用。常見泄漏點LoginViewModel中viewModelScope未及時取消協(xié)程已由ViewModel自動處理TextWatcher未在onDestroy()中移除需在LoginActivity.onDestroy()中調(diào)用binding.etAccount.removeTextChangedListener()OkHttpClient單例持有Activity Context必須使用Application Context初始化修復(fù)示例在LoginActivity.onDestroy()中override fun onDestroy() { super.onDestroy() binding.etAccount.removeTextChangedListener(textWatcher) }其中textWatcher為成員變量避免匿名內(nèi)部類持有Activity引用。5.3 APK體積壓縮從22MB降至8MB的關(guān)鍵三步畢業(yè)設(shè)計提交的APK需控制在10MB以內(nèi)。使用./gradlew app:assembleRelease生成后執(zhí)行# 查看APK內(nèi)容分布 unzip -l app/build/outputs/apk/release/app-release.apk | head -20 # 移除未使用的ABI android { ndk { abiFilters armeabi-v7a, arm64-v8a } } # 啟用資源壓縮 android { buildTypes { release { shrinkResources true } } }效果對比啟用shrinkResources true可移除未引用的drawable、layout資源限定ABI后移除x86/x86_64.so庫最終APK體積下降62%符合高校畢設(shè)平臺上傳限制。本文還有配套的精品資源點擊獲取