移动应用开发之路 05 Android Studio 简单登录界面制作

铖铖的花嫁

已于 2023-04-21 20:20:58 修改

阅读量5.3k

点赞数 9

分类专栏：移动应用开发 # Android Studio 文章标签： android android studio java

于 2022-10-22 19:34:42 首次发布

本文链接：https://blog.csdn.net/Hjh1906008151/article/details/127405250

版权

移动应用开发同时被 2 个专栏收录

21 篇文章 7 订阅

订阅专栏

Android Studio

5 篇文章 1 订阅

订阅专栏

本文记录了使用Android Studio创建登录界面的过程，包括输入验证、显示加载进度条的功能实现。通过线性布局管理UI元素，自定义Java代码控制进度条动画，展示了Android应用开发的基础技能。

摘要由CSDN通过智能技术生成

学校开了一门移动应用开发课程，我一开始兴趣盎然，但是看到使用的环境是 Java 8 的时候心就凉了一半，在询问老师的意见之后决定使用现在比较常用的Android Studio完成学习，特此记录自学之路。

这篇是一个总结性质的文章，主要为了熟练运用之前讲过的几个UI控件。小项目主要包括完成登录界面，校验输入是否为空，判断输入是否为正确用户名密码，输入成功后出现加载进度条。

效果图

效果先行

在这里插入图片描述

代码

代码如下，注释比较详细了，文案解释就不太多。

AndroidManifest.xml

这个主要为配置文件，里面主要包括app桌面图标生成，app刘海等等。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.myapplication">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MyApplication"
        tools:targetApi="31">
        <activity
            android:name=".ProgressBarActivity"
            android:exported="false" />
        <activity
            android:name=".ButtonActivity"
            android:exported="false" />
        <activity
            android:name=".TextActivity"
            android:exported="false" />
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>

                <!-- 启动界面 -->
                <action android:name="android.intent.action.MAIN" />
                <!-- 在应用列表形成图标 -->
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

unviews_test.xml

这个几句是各种控件，主体思路就是线性布局全局水平居中，一点一点往下叠。其实没用到什么操作，如果对各个控件的功能还不太了解，移步这里

我们这里用的是最传统的线性布局，相当于一条竖着的线从上到下把所有的控件（包括TextView、ImageView、ProgressBar、EditText、ImageButton等等）都穿起来。

unviews_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/bg"
    android:gravity="center_horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sign Up"
        android:textSize="40sp"
        android:textColor="#dddddd"
        android:layout_marginTop="40dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="It's a love story\nBaby just say yes"
        android:textSize="24sp"
        android:textColor="#dddddd"
        android:gravity="center"
        android:layout_marginTop="30dp"/>
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher"
        android:layout_margin="30dp"/>
    <ProgressBar
        android:id="@+id/pro_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:visibility="invisible"
        android:layout_margin="10dp"/>
    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:textColorHint="#000000"
        android:hint="User Name"
        android:textSize="20sp"
        android:inputType="text"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:hint="Email Address"
        android:textSize="20sp"
        android:gravity="center"
        android:textColorHint="#000000"
        android:inputType="numberSigned|numberDecimal"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:textColorHint="#000000"
        android:hint="Phone"
        android:textSize="20sp"
        android:inputType="phone"/>
    <EditText
        android:id="@+id/pwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:hint="Password"
        android:textSize="20sp"
        android:gravity="center_horizontal"
        android:textColorHint="#000000"
        android:inputType="textPassword"
        android:maxLength="15"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Register"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="30dp"
        android:src="@mipmap/button"
        android:onClick="register"/>


</LinearLayout>

MainActivity.java

这个就是判断下输入是否正确，然后再建立一个线程控制一下进度条的速度。

一般来说，涉及到动画的都会相对复杂一点。在安卓里面，动画需要利用相应的类中的不同方法才能跑起来。

另外，还需要注意手机触屏的焦点问题。

MainActivity.java

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.security.identity.PersonalizationData;
import android.util.Log;
import android.view.CollapsibleActionView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.Toast;

import java.util.Random;

public class MainActivity extends AppCompatActivity {
    // Activity: 是一个类，AppCompatActivity也是算是Activity类。类似于一个可视化界面
    @Override   // 表示这个是重写，只要打开窗口，指定先执行它，所以有点类似于初始化代码
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.uiviews_test);
    }

    public void register(View v){
        // 判空
        EditText name = findViewById(R.id.username);
        EditText pwd = findViewById(R.id.pwd);
        ProgressBar pro_bar = findViewById(R.id.pro_bar);
        // 记得toString
        String name_str = name.getText().toString();
        String pwd_str = pwd.getText().toString();
        if (name_str.equals("")||pwd_str.equals("")){
            // 无焦点提示
            // makeText(环境上下文, 提示性文本, 提示持续时间的长短)
            // 别忘了show
            Toast.makeText(this, "姓名或密码不能为空", Toast.LENGTH_LONG).show();
        }else if(!name_str.equals("Taylor")||!pwd_str.equals("1129")){
            Toast.makeText(this, "用户名密码错误，请重新输入", Toast.LENGTH_LONG).show();
            name.setText("");
            pwd.setText("");
        }else {
            pro_bar.setVisibility(View.VISIBLE);
            new Thread(){
                // 随机速度跑进度条
                public void run(){
                    Random ran = new Random();
                    for(int i=0; i<=100;i++){
                        pro_bar.setProgress(i);
//                        Log.e("TAG", String.valueOf(ran.nextInt(50)));
                        try {
                            // 这里小小调皮一下，随机数越到后面越慢，模仿最后99%一直到不了
                            Thread.sleep(ran.nextInt(5)*i);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }.start();
        }


    }
}