安卓登录注册界面开发(附源码)

源码下载和博客访问:安卓登录注册界面开发(附源码)

前言

最近找安卓登录注册界面,找了好久也没找到比较满意的设计,最后想想其实登录和注册两个界面也不复杂,干脆花点时间自己弄。

界面预览

最后的效果如下:

Demo

界面开发

安卓静态布局使用XML语言描述,采用布局+控件的方式实现。

首先创建编辑框和按钮的样式文件,避免大量的重复代码,这样可以使用一行代码引用该样式。

编辑框样式:

在"app/res/drawable"文件夹下新建xml文件“translucent_edit.xml”

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#DCDCDC" />
    <stroke android:width="1dip" android:color="#fefefe" />
    <corners android:radius="20dp"/>
    <padding android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

按钮样式:

在"app/res/drawable"文件夹下新建xml文件“translucent_button.xml”

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#4682B4" />
    <stroke android:width="1dip" android:color="#fefefe" />
    <corners android:radius="20dp"/>
    <padding android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

这两个样式文件都是实现圆角和颜色效果,接下来就是登录和注册界面。

登录和注册界面两个界面的元素都是Logo、标题、编辑框和按钮四个,区别仅仅是数量不同。两个界面均采用线性布局嵌套的方式布局,并将属性“orientation”设置为"vertical",每一行均使用一个线性布局。

登录界面:

在"app/res/layout"文件夹下新建xml文件“activity_main.xml”

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--使用线性布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#F5F5F5">

        <!--Logo-->
        <ImageView
            android:id="@+id/LogoImage"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_marginTop="100dp"
            android:src="@drawable/logo"/>

        <!--标题-->
        <TextView
            android:id="@+id/TitleText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="25dp"
            android:text="爱零食•登录"
            android:gravity="center"
            android:textStyle="italic"
            android:textColor="#808080"
            android:textSize="30dp" />

        <!--嵌套线性布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/UserNameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <!--用户名输入-->
                <EditText
                    android:id="@+id/UserNameEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="15dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="输入用户名"
                    android:textSize="24dp"
                    android:singleLine="true" />

            </LinearLayout>

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/PassWordLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <!--密码输入-->
                <EditText
                    android:id="@+id/PassWordEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="15dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="输入用户密码"
                    android:textSize="24dp"
                    android:maxLength="16"
                    android:singleLine="true"
                    android:inputType="textPassword" />

            </LinearLayout>

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/LayoutButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--登录按钮-->
                <Button
                    android:id="@+id/LoginButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:textColor="@color/white"
                    android:background="@drawable/translucent_button"
                    android:text="登   录"
                    android:textSize="24dp" />

                <!--注册按钮-->
                <Button
                    android:id="@+id/SignUpButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:textColor="@color/white"
                    android:background="@drawable/translucent_button"
                    android:text="注   册"
                    android:textSize="24dp" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

注册界面:

在"app/res/layout"文件夹下新建xml文件“activity_sign_up.xml”

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SignUpActivity">

    <!--使用线性布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#F5F5F5">

        <!--Logo-->
        <ImageView
            android:id="@+id/LogoImage"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_marginTop="50dp"
            android:src="@drawable/logo"/>

        <!--标题-->
        <TextView
            android:id="@+id/TitleText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="爱零食•注册"
            android:gravity="center"
            android:textStyle="italic"
            android:textColor="#808080"
            android:textSize="30dp" />

        <!--嵌套线性布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/UserNameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <!--用户名输入-->
                <EditText
                    android:id="@+id/UserNameEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="输入用户名"
                    android:textSize="24dp"
                    android:singleLine="true" />

            </LinearLayout>

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/PassWordLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--密码输入-->
                <EditText
                    android:id="@+id/PassWordEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="输入密码"
                    android:textSize="24dp"
                    android:maxLength="16"
                    android:singleLine="true"
                    android:inputType="textPassword" />

            </LinearLayout>

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/PasswordAgainLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--二次密码输入-->
                <EditText
                    android:id="@+id/PassWordAgainEdit"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="再次输入密码"
                    android:maxLength="16"
                    android:textSize="24dp"
                    android:singleLine="true"
                    android:inputType="textPassword" />

            </LinearLayout>

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/EmailLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--邮箱输入-->
                <EditText
                    android:id="@+id/EmailEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="输入邮箱地址"
                    android:textSize="24dp"
                    android:maxLength="16"
                    android:singleLine="true" />

            </LinearLayout>

            <!--嵌套线性布局-->
            <LinearLayout
                android:id="@+id/ButtonLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--立即注册按钮-->
                <Button
                    android:id="@+id/SignUpButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:background="@drawable/translucent_button"
                    android:text="立即注册"
                    android:textColor="@color/white"
                    android:textSize="24dp" />

                <!--返回登录按钮-->
                <Button
                    android:id="@+id/BackLoginButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:textColor="@color/white"
                    android:background="@drawable/translucent_button"
                    android:text="返回登录"
                    android:textSize="24dp" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

如果按钮显示为紫色,解决方法参考Android Studio设置Button样式无效(为默认蓝紫色)

可以看到两个界面布局并不复杂,美观性也算合格,接下来实现两个界面交互就行了。

界面交互

完成界面交互需要实现的功能:

1.登录界面点击“注册”按钮会跳转到注册界面

2.注册界面填写完信息后点击“立即注册”按钮会跳转到登录界面

3.注册界面点击“返回登录”按钮会跳转到登录界面

可选的附加功能:

1.检查输入的用户名和密码与预设的是否匹配

2.检查注册的信息基本格式是否正确

接下来实现上述功能。

登录界面的Activity类:

在"app/java/项目包名"目录下新建Class"MainActivity"

package 项目包名;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;


public class MainActivity extends Activity {
    // 调用Actvity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 关联activity.xml
        setContentView(R.layout.activity_main);
        // 关联用户名、密码和登录、注册按钮
        EditText userName = (EditText) this.findViewById(R.id.UserNameEdit);
        EditText passWord = (EditText) this.findViewById(R.id.PassWordEdit);
        Button loginButton = (Button) this.findViewById(R.id.LoginButton);
        Button signUpButton = (Button) this.findViewById(R.id.SignUpButton);
        // 登录按钮监听器
        loginButton.setOnClickListener(
                new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 获取用户名和密码
                        String strUserName = userName.getText().toString().trim();
                        String strPassWord = passWord.getText().toString().trim();
                        // 判断如果用户名为"123456"密码为"123456"则登录成功
                        if (strUserName.equals("123456") && strPassWord.equals("123456")) {
                            Toast.makeText(MainActivity.this, "登录成功!", Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(MainActivity.this, "请输入正确的用户名或密码!", Toast.LENGTH_SHORT).show();
                        }
                    }
                }
        );
        // 注册按钮监听器
        signUpButton.setOnClickListener(
                new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 跳转到注册界面
                        Intent intent = new Intent(MainActivity.this, SignUpActivity.class);
                        startActivity(intent);
                    }
                }
        );

    }
}

其中的“项目包名”需要替换为自己的项目包名。

注册界面Activity类:

在"app/java/项目包名"目录下新建Class"SignUpActivity"

package 项目包名;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class SignUpActivity extends Activity {
    // 调用Actvity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //关联activity_register.xml
        setContentView(R.layout.activity_sign_up);
        // 关联用户名、密码、确认密码、邮箱和注册、返回登录按钮
        EditText userName = (EditText) this.findViewById(R.id.UserNameEdit);
        EditText passWord = (EditText) this.findViewById(R.id.PassWordEdit);
        EditText passWordAgain = (EditText) this.findViewById(R.id.PassWordAgainEdit);
        EditText email = (EditText) this.findViewById(R.id.EmailEdit);
        Button signUpButton = (Button) this.findViewById(R.id.SignUpButton);
        Button backLoginButton = (Button) this.findViewById(R.id.BackLoginButton);

        // 立即注册按钮监听器
        signUpButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        String strUserName = userName.getText().toString().trim();
                        String strPassWord = passWord.getText().toString().trim();
                        String strPassWordAgain = passWordAgain.getText().toString().trim();
                        String strPhoneNumber = email.getText().toString().trim();
                        //注册格式粗检
                        if (strUserName.length() > 10) {
                            Toast.makeText(SignUpActivity.this, "用户名长度必须小于10!", Toast.LENGTH_SHORT).show();
                        } else if (strUserName.length() < 4) {
                            Toast.makeText(SignUpActivity.this, "用户名长度必须大于4!", Toast.LENGTH_SHORT).show();
                        } else if (strPassWord.length() > 16) {
                            Toast.makeText(SignUpActivity.this, "密码长度必须小于16!", Toast.LENGTH_SHORT).show();
                        } else if (strPassWord.length() < 6) {
                            Toast.makeText(SignUpActivity.this, "密码长度必须大于6!", Toast.LENGTH_SHORT).show();
                        } else if (!strPassWord.equals(strPassWordAgain)) {
                            Toast.makeText(SignUpActivity.this, "两次密码输入不一致!", Toast.LENGTH_SHORT).show();
                        } else if (!strPhoneNumber.contains("@")) {
                            Toast.makeText(SignUpActivity.this, "邮箱格式不正确!", Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(SignUpActivity.this, "注册成功!", Toast.LENGTH_SHORT).show();
                            // 跳转到登录界面
                            Intent intent = new Intent(SignUpActivity.this, MainActivity.class);
                            startActivity(intent);
                        }
                    }
                }
        );
        // 返回登录按钮监听器
        backLoginButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 跳转到登录界面
                        Intent intent = new Intent(SignUpActivity.this, MainActivity.class);
                        startActivity(intent);
                    }
                }
        );

    }
}

其中的“项目包名”需要替换为自己的项目包名。

最后向AndroidManifest注册界面:

编辑"app/manifests"目录下的"AndroidManifest.xml"

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="项目包名">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.项目名">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SignUpActivity" />
    </application>

</manifest>

其中的“项目包名”和“项目名”需要替换为自己的项目包名和项目名。

大功告成!这样所有功能都实现了!

源码

源码下载和博客访问:安卓登录注册界面开发(附源码)

最后

登录注册界面使用到的布局和控件都比较简单,Activity类实现的功能也很基础,但万丈高楼皆从平地起,有了根基,高楼只是时间问题。

  • 85
    点赞
  • 613
    收藏
    觉得还不错? 一键收藏
  • 33
    评论
Android系统的登陆和注册界面App开发中常见的页面,可以根据自己的需求和设计风格进行设计。以下是一个简单但漂亮好看的登陆和注册界面的程序源码示例: 首先,在布局文件中创建一个用于显示登陆和注册界面的XML布局文件,包含一个包裹登陆和注册界面的外层容器,以及内部包含用户名输入框、密码输入框、登陆按钮和注册按钮等控件。 接下来,在Java代码中实现登陆和注册功能。创建一个主活动类,继承自AppCompatActivity类,并在onCreate()方法中设置布局文件。然后,在对应的活动类中定义登陆和注册的方法,分别处理用户输入的用户名和密码,进行合法性验证,比如验证用户名是否已存在、密码是否符合规则等。如果验证通过,则可以进行相应的登陆或注册操作。 对于界面美化,可以使用框架如Material Design来设计界面,使用合适的颜色和字体来增加界面的美感。可以设置背景图片或者背景色,添加适当的动画效果,让界面看起来更加动感、时尚。同时,可以调整字体、按钮样式、布局等元素的大小、颜色和位置等,以提升用户体验。 此外,还可以添加图片、logo等元素,增加界面的视觉效果,并且可以使用贝塞尔曲线、图标库等方式来增加一些小的细节和装饰,使得界面更加精致。 总结起来,要设计一款漂亮好看的Android登陆和注册界面,需要在布局设计和代码实现上进行努力。合理运用颜色、布局、动画和视觉元素等方面的设计,使得界面能够符合用户的审美需求,并且操作便捷、功能齐全。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 33
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值