Android开发--实现Android登录注册页面（上）

Posted 2023-04-06 糖心荷包蛋°

简单的android开发登录注册，这个是没有连数据库的

首先，新建项目，新建一个登录页面LoginActivity和注册页面RegisterActivity。

下面是登录页面的代码:activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".LoginActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="账号："
            android:textSize="25sp" />

        <EditText
            android:id="@+id/et_account"
            android:layout_width="match_parent"
            android:hint="请输入用户名或手机号"
            style="@style/MyEditStyle"
            android:layout_marginLeft="10dp"
            android:inputType="text"></EditText>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码："
            android:textSize="25sp" />

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:hint="请输入密码"
            style="@style/MyEditStyle"
            android:layout_marginLeft="10dp"
            android:inputType="numberPassword"></EditText>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        >
        <CheckBox
            android:id="@+id/cb_remember"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="记住密码"></CheckBox>
    </LinearLayout>
    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        style="@style/MyBtnStyle"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"></Button>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimary"
        android:text="还没有账号？"
        android:layout_gravity="right"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:onClick="toRegister"
        ></TextView>

</LinearLayout>

效果如图：

下面是注册页面的代码：activity_register.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RegisterActivity"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="账&#12288;&#12288;号："
            android:textSize="25sp" />

        <EditText
            android:id="@+id/et_account"
            android:layout_width="match_parent"
            android:hint="请输入用户名或手机号"
            style="@style/MyEditStyle"
            android:layout_marginLeft="10dp"
            android:inputType="text"></EditText>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密&#12288;&#12288;码："
            android:textSize="25sp" />

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:hint="请输入密码"
            style="@style/MyEditStyle"
            android:layout_marginLeft="10dp"
            android:inputType="numberPassword"></EditText>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="确认密码："
            android:textSize="25sp" />

        <EditText
            android:id="@+id/et_password_Confirm"
            android:layout_width="match_parent"
            android:hint="请再次输入密码"
            style="@style/MyEditStyle"
            android:layout_marginLeft="10dp"
            android:inputType="numberPassword"></EditText>
    </LinearLayout>

    <Button
        android:id="@+id/btn_register"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="注册"
        style="@style/MyBtnStyle"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"></Button>

    <CheckBox
        android:id="@+id/cb_agree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimary"
        android:text="还没有账号？"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"></CheckBox>

</LinearLayout>

效果如图：

最后，在LoginActivity.java中，加入一串代码：getSupportActionBar().setTitle("登录");

在RegisterActivity.java中，加入一串代码：getSupportActionBar().setTitle("注册");

public class LoginActivity extends AppCompatActivity 

    public static final int REQUEST_CODE_REGISTER = 1;
    private static final String TAG="tag";
    private Button btnLogin;
    private EditText etAccount,etPassword;
    private CheckBox cbRemember;
    private String userName="a";
    private String pass="123";

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        getSupportActionBar().setTitle("登录");
     

 上面的代码是LoginActivity.java中的代码，其实要添加的只有一句，其他都写出来是为了让读者能看懂，具体写在哪里。这段代码的作用是： 使标题栏那边显示的文字是登录/注册，而不是一串默认的英文

下面两张图片，左边是未添加代码的效果，右边是添加代码后的效果

写到这里，页面整体布局大致完成了，下面，你们需要添加部分细节，来使得颜色和样式跟我一致。我在上面的xml文件代码中，有下面这个代码：

style="@style/MyEditStyle"和style="@style/MyBtnStyle"

你们在前面写的时候，可能会报错，很正常，因为这是引用控件样式的代码，你们需要设置一下这个样式，然后引用，就不会报错啦。

这是设置EditText和Button控件的样式，首先新建style.xml文件。在values中右键，New--Values Resource File，文件名为style。在style.xml文件中，写如下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyBtnStyle">
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">25sp</item>
        <item name="android:background">@drawable/btn_bg_selector</item>
        <item name="android:layout_marginTop">20dp</item>
        <item name="android:layout_marginRight">20dp</item>
        <item name="android:layout_marginLeft">20dp</item>
    </style>

    <style name="MyEditStyle">
        <item name="android:textSize">18sp</item>
        <item name="android:background">@drawable/edit_text_bg</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:layout_height">50dp</item>
    </style>

</resources>

 这里面又引用了样式，是设置输入框的边框和按钮的背景颜色。继续下面的步骤：drawable右键--New--Drawable Resource File，文件名为：btn_bg_selector，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/colorPrimary"></item>
    <item android:state_pressed="false" android:drawable="@color/colorPrimaryDark"></item>

</selector>

 drawable右键--New--Drawable Resource File，文件名为：edit_text_bg，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <stroke android:width="2dp" android:color="@color/colorPrimary"></stroke>
    <corners android:radius="10dp"></corners>

</shape>

最后，再调整一下导航栏和标题栏的颜色，就OK啦

colors.xml文件中，添加绿色这个颜色，如下代码，

    <color name="colorPrimary">@color/green_500</color>
    <color name="colorPrimaryDark">@color/green_700</color>
    <color name="colorAccent">#E64A19</color>

    <color name="green_200">#A5D6A7</color>
    <color name="green_500">#4CAF50</color>
    <color name="green_700">#4CAF50</color>

themes.xml文件中，只需要修改前两个item的内容，其他代码是为了你们参照一下位置，别改错了。代码如下：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TraditionalCulture" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

到这里，你的登录注册页面部分就完成啦！恭喜你！

以上代码，都是我自己一个个敲的，也运行过，运行结果是没问题的。当然如果你有什么意见建议，请不吝赐教❥(^_-)

具体的跳转实现看下一篇笔记哦，下一篇笔记结尾也有源码分享。

四登录注册页功能实现《iVX低代码/无代码个人博客制作》

一、登录页功能实现

上一节中已经完成了登录页的页面制作，那么这一节就开始对应的完成登录页的功能实现。

登录页的功能实现主要是对用户登录后进行昵称获取等操作（在本项目中）。那么必然需要一个数据库进行用户的存储；在ivx 中用户存储需要一个组件“用户”，用户组件点击后台后选择私有用户组件即可进行增加：

增加完毕后可以对其进行重命名使整个项目更加清晰：

我们给登录设置事件：

此时选择刚刚添加的用户组件进行对应的登录动作，需要将手机号、验证码作为参数，接着给予一个回调，判断用户是否登录成功：

在回调中直接判断当前的登录结果，是否成功如果是是，那么就是登录成功，将会进行弹出提示登录成功，其余情况就是登录失败，直接给予对应弹窗文本为登录失败的原因即可。

二、验证码获取

那么此时我们的验证码获取还未制作，那么此时给予对应的发送按钮事件：

此时直接在发起触发触发器时进行验证码获取，需要传入手机号作为对应的参数，还需要注意，类型需要选择为登录验证，否则将会出现 bug，在此处还需要选择无须图片验证码，否则将会获取不到手机短信。

在这里编写了短信获取动作之后，也解释了为什么需要判断登录倒计时为 60 才发起服务，这样才可以限制发起短信验证码动作次数，否则只要点击当前的按钮就会发起获取验证码服务，并且过多发起将会限制 ip。

三、注册页制作

注册页与当前的登录页制作类似，直接复制整个登录块：

接着重命名为注册块，并且对应的把提示的文本更改问注册：

此时还需要更改对应的事件和新建两个组件，一个是新建一个倒计时变量命名为注册倒计时，用于存储注册的验证码倒计时描述存储，另一个是创建一个触发器命名为注册验证码倒计时触发器：

接着更改对应的事件对象，不然的话你将会调用到登录框部分的组件内容：

接着把提示以及对应所需要的参数内容重新进行选择，防止调用错误的内容值：

此时我们发现少了昵称内容，只需要重新创建一个一个行，命名为昵称输入框即可：

接着再把这个昵称内容给予到对应的参数之中：

接着我们再修改触发器的选择组件即可，在此一定要注意，选择正确的组件，否则会出现你意想不到的错误，并且也不好排查：

此时我们测试数据：

成功后我们点击用户数据可以查看注册的用户：

我们再尝试登陆内容：

此时你可以选择注册成功后显示登录框：

直接隐藏登录框即可：

四、优化

接下来我们还可以优化一下登录和注册的操作，例如直接点击发送验证码时，点击条件 + 号，直接判断手机号是否等于 11 位，否则就不是正确的手机号：

还可以给予一个其余条件，给予提示输入的不是正确的手机号：

注册时也可以给予对应的信息判断，判断验证码、手机号、昵称是否输入正确，否则就弹出提示：

登录页也可以做判断，内容重复不再赘述。