Android Studio欢迎界面和登陆界面的设计(小白)

        最近学校开设了Android Studio的开发课程,跟着书上的例子和小破站的视频开启了安卓小白之旅,今天主要整理了一下"欢迎界面"和"登陆界面"的相关内容。

        首先新建一个项目,按照自己的需求命名项目

 欢迎界面

新建一个类,命名为Splash

 欢迎界面的页面布局

在layout中新建一个activity_splash.xml文件,

需要首先在drawable文件夹下导入main_button_3图片,字体颜色可以自己按照喜好设计

activity_splash.xml布局设计如下

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

        <TextView
            android:id="@+id/textView"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="80dp"
            android:layout_width="210dp"
            android:layout_height="wrap_content"
            android:text="我们的征途是星辰大海"
            android:textColor="@color/royalblue"
            android:textSize="40sp"
            android:textStyle="bold" />


    </LinearLayout>
</LinearLayout>

效果如图

 Splash.java中代码如下:

package com.example.chwngyanan.qxapp.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

import com.example.chwngyanan.qxapp.MainActivity;
import com.example.chwngyanan.qxapp.R;

import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by CHWNGYANAN on 2021/9/20.
 */

public class Splash extends AppCompatActivity{
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);  //快捷键alt+enter

        //延时操作
        Timer timer = new Timer();
        timer.schedule(timetast, 2000);
    }
        TimerTask timetast = new TimerTask() {
            @Override
            public void run() {
           
                startActivity(new Intent(Splash.this,Login.class));//跳转登录界面
            }
        };



}

 Splash中要实现的功能是在欢迎界面停留两秒后跳转登陆界面

登陆界面

由于作者是小白,设计的登陆界面比较简单

新建Login类以及activity_login.xml

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"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/main_button_3_selected"
        android:gravity="center">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="30dp"
            android:paddingTop="20dp"
            android:background="#99404348"
            android:gravity="center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Welcome"
                android:textColor="#FFFFFF"
                android:textSize="18sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="20dp"
            android:paddingTop="20dp"
            android:background="#99000000">
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:layout_gravity="center"
                android:layout_marginRight="50dp"
                android:layout_marginLeft="50dp"
                android:textColor="#9F9FA0"
                android:textColorHint="#9F9FA0"
                android:hint="your username"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dip"
                android:background="#83738F"
                android:layout_marginRight="40dp"
                android:layout_marginLeft="40dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="5dp"></View>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:layout_gravity="center"
                android:hint="your password"
                android:textColor="#9F9FA0"
                android:textColorHint="#9F9FA0"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="30dp"
            android:paddingTop="20dp"
            android:background="#99404348"
            android:gravity="center"
            android:orientation="horizontal">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Forget Password?"
                android:textColor="#DDDDDD"
                android:textSize="15sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Tap Here"
                android:textColor="#FFFFFF"
                android:textSize="15sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <Button
                android:id="@+id/login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@color/royalblue"
                android:text="Login"/>
            <Button
                android:id="@+id/zhuce"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="40dp"
                android:layout_marginLeft="10dp"
                android:background="@color/royalblue"
                android:layout_weight="1"
                android:text="Sign in"/>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

效果如图:

同样需要注意在drawable中导入名为main_button_3_selected的图片(图片名称可以自己命名,和xml文件中对应即可)

接下来要实现的功能是点击登录注册跳转注册界面

新建Register类以及activity_register.xml文件

activity_register.xml布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_margin="10dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            tools:ignore="UselessParent">

            <TextView
                android:textStyle="bold"
                android:textSize="24sp"
                android:text="@string/数字账号"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/输入账号"/>
        </LinearLayout>

        <LinearLayout
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            tools:ignore="UselessParent">

            <TextView
                android:textStyle="bold"
                android:textSize="24sp"
                android:text="@string/数字密码"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <EditText

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/请输入您的密码"/>

        </LinearLayout>
        <LinearLayout
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:textStyle="bold"
                android:textSize="24sp"
                android:text="@string/具体昵称"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <EditText

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/请输入您的昵称"/>
        </LinearLayout>
    </LinearLayout>
    <Button
        android:id="@+id/register"
        android:layout_margin="10dp"
        android:background="@color/colorPrimaryDark"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/注册账号"/>

</LinearLayout>

设计效果如图

 Register.java文件代码如下:

 实现的功能是当点击"注册账号"按钮时,跳转登录界面,并且显示“注册成功,请重新登录”字样

package com.example.chwngyanan.qxapp.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.example.chwngyanan.qxapp.MainActivity;
import com.example.chwngyanan.qxapp.R;

/**
 * Created by CHWNGYANAN on 2021/9/23.
 */

public class Register extends AppCompatActivity {
    private Button register;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);

        //绑定按钮
        register = (Button)findViewById(R.id.register);
        register.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(Register.this, "注册成功,请重新登录", Toast.LENGTH_SHORT).show();
                startActivity(new Intent(Register.this,Login.class));
            }
        });
    }
}

Login.java要实现的功能是 :点击登录,跳转主界面,并显示“登录成功”字样

Login.java中代码如下

package com.example.chwngyanan.qxapp.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.example.chwngyanan.qxapp.MainActivity;
import com.example.chwngyanan.qxapp.R;

/**
 * Created by CHWNGYANAN on 2021/9/22.
 */

public class Login extends AppCompatActivity {
    private Button login;
    private Button zhuce;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        //绑定控件
        login = (Button)findViewById(R.id.login);
        zhuce = (Button)findViewById(R.id.zhuce);

        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(Login.this, "登陆成功",Toast.LENGTH_SHORT).show();
                startActivity(new Intent(Login.this, MainActivity.class));
            }
        });
        //注册界面
        zhuce.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(Login.this,Register.class));
            }
        });

    }
}

最后实现的效果如下: