devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android Studio欢迎界面和登陆界面的设计（小白）

作者：运维做开发 | 2024-06-28 06:18:21

赞

踩

android studio欢迎界面

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

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

 欢迎界面

新建一个类，命名为Splash

 欢迎界面的页面布局

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

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

activity_splash.xml布局设计如下

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:orientation="vertical"
  5.     android:gravity="center"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent">
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:orientation="vertical"
  12.         android:background="@drawable/main_button_3"
  13.         >
  14.  
  15.         <TextView
  16.             android:id="@+id/textView"
  17.             android:layout_marginTop="20dp"
  18.             android:layout_marginLeft="80dp"
  19.             android:layout_width="210dp"
  20.             android:layout_height="wrap_content"
  21.             android:text="我们的征途是星辰大海"
  22.             android:textColor="@color/royalblue"
  23.             android:textSize="40sp"
  24.             android:textStyle="bold" />
  25.  
  26.  
  27.     </LinearLayout>
  28. </LinearLayout>

效果如图

 Splash.java中代码如下：

  1. package com.example.chwngyanan.qxapp.activity;
  2.  
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.support.annotation.Nullable;
  6. import android.support.v7.app.AppCompatActivity;
  7.  
  8. import com.example.chwngyanan.qxapp.MainActivity;
  9. import com.example.chwngyanan.qxapp.R;
  10.  
  11. import java.util.Timer;
  12. import java.util.TimerTask;
  13.  
  14. /**
  15.  * Created by CHWNGYANAN on 2021/9/20.
  16.  */
  17.  
  18. public class Splash extends AppCompatActivity{
  19.     @Override
  20.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  21.         super.onCreate(savedInstanceState);
  22.         setContentView(R.layout.activity_splash);  //快捷键alt+enter
  23.  
  24.         //延时操作
  25.         Timer timer = new Timer();
  26.         timer.schedule(timetast, 2000);
  27.     }
  28.         TimerTask timetast = new TimerTask() {
  29.             @Override
  30.             public void run() {
  31.            
  32.                 startActivity(new Intent(Splash.this,Login.class));//跳转登录界面
  33.             }
  34.         };
  35.  
  36.  
  37.  
  38. }

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

登陆界面

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

新建Login类以及activity_login.xml

activity_login.xml布局文件如下

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:orientation="vertical"
  12.         android:background="@drawable/main_button_3_selected"
  13.         android:gravity="center">
  14.         <LinearLayout
  15.             android:layout_width="match_parent"
  16.             android:layout_height="wrap_content"
  17.             android:paddingBottom="30dp"
  18.             android:paddingTop="20dp"
  19.             android:background="#99404348"
  20.             android:gravity="center">
  21.             <TextView
  22.                 android:layout_width="wrap_content"
  23.                 android:layout_height="wrap_content"
  24.                 android:layout_gravity="center"
  25.                 android:text="Welcome"
  26.                 android:textColor="#FFFFFF"
  27.                 android:textSize="18sp"/>
  28.         </LinearLayout>
  29.         <LinearLayout
  30.             android:layout_width="match_parent"
  31.             android:layout_height="wrap_content"
  32.             android:orientation="vertical"
  33.             android:paddingBottom="20dp"
  34.             android:paddingTop="20dp"
  35.             android:background="#99000000">
  36.             <EditText
  37.                 android:layout_width="match_parent"
  38.                 android:layout_height="wrap_content"
  39.                 android:background="@null"
  40.                 android:layout_gravity="center"
  41.                 android:layout_marginRight="50dp"
  42.                 android:layout_marginLeft="50dp"
  43.                 android:textColor="#9F9FA0"
  44.                 android:textColorHint="#9F9FA0"
  45.                 android:hint="your username"/>
  46.  
  47.             <View
  48.                 android:layout_width="match_parent"
  49.                 android:layout_height="1dip"
  50.                 android:background="#83738F"
  51.                 android:layout_marginRight="40dp"
  52.                 android:layout_marginLeft="40dp"
  53.                 android:layout_marginTop="10dp"
  54.                 android:layout_marginBottom="5dp"></View>
  55.  
  56.             <EditText
  57.                 android:layout_width="match_parent"
  58.                 android:layout_height="wrap_content"
  59.                 android:background="@null"
  60.                 android:layout_gravity="center"
  61.                 android:hint="your password"
  62.                 android:textColor="#9F9FA0"
  63.                 android:textColorHint="#9F9FA0"
  64.                 android:layout_marginLeft="50dp"
  65.                 android:layout_marginRight="50dp"/>
  66.         </LinearLayout>
  67.         <LinearLayout
  68.             android:layout_width="match_parent"
  69.             android:layout_height="wrap_content"
  70.             android:paddingBottom="30dp"
  71.             android:paddingTop="20dp"
  72.             android:background="#99404348"
  73.             android:gravity="center"
  74.             android:orientation="horizontal">
  75.             <TextView
  76.                 android:layout_width="wrap_content"
  77.                 android:layout_height="wrap_content"
  78.                 android:layout_gravity="center"
  79.                 android:text="Forget Password?"
  80.                 android:textColor="#DDDDDD"
  81.                 android:textSize="15sp"/>
  82.             <TextView
  83.                 android:layout_width="wrap_content"
  84.                 android:layout_height="wrap_content"
  85.                 android:layout_gravity="center"
  86.                 android:text="Tap Here"
  87.                 android:textColor="#FFFFFF"
  88.                 android:textSize="15sp"/>
  89.         </LinearLayout>
  90.  
  91.         <LinearLayout
  92.             android:layout_width="match_parent"
  93.             android:layout_height="wrap_content"
  94.             android:orientation="horizontal">
  95.             <Button
  96.                 android:id="@+id/login"
  97.                 android:layout_width="wrap_content"
  98.                 android:layout_height="wrap_content"
  99.                 android:layout_marginLeft="40dp"
  100.                 android:layout_marginRight="10dp"
  101.                 android:layout_weight="1"
  102.                 android:background="@color/royalblue"
  103.                 android:text="Login"/>
  104.             <Button
  105.                 android:id="@+id/zhuce"
  106.                 android:layout_width="wrap_content"
  107.                 android:layout_height="wrap_content"
  108.                 android:layout_marginRight="40dp"
  109.                 android:layout_marginLeft="10dp"
  110.                 android:background="@color/royalblue"
  111.                 android:layout_weight="1"
  112.                 android:text="Sign in"/>
  113.         </LinearLayout>
  114.  
  115.     </LinearLayout>
  116.  
  117. </LinearLayout>

效果如图：

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

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

新建Register类以及activity_register.xml文件

activity_register.xml布局文件如下

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:orientation="vertical"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent">
  8.     <LinearLayout
  9.         android:layout_margin="10dp"
  10.         android:orientation="vertical"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content">
  13.  
  14.         <LinearLayout
  15.             android:layout_marginTop="20dp"
  16.             android:gravity="center"
  17.             android:orientation="horizontal"
  18.             android:layout_width="match_parent"
  19.             android:layout_height="wrap_content">
  20.             tools:ignore="UselessParent">
  21.  
  22.             <TextView
  23.                 android:textStyle="bold"
  24.                 android:textSize="24sp"
  25.                 android:text="@string/数字账号"
  26.                 android:layout_width="wrap_content"
  27.                 android:layout_height="wrap_content" />
  28.  
  29.             <EditText
  30.                 android:layout_width="match_parent"
  31.                 android:layout_height="wrap_content"
  32.                 android:hint="@string/输入账号"/>
  33.         </LinearLayout>
  34.  
  35.         <LinearLayout
  36.             android:layout_marginTop="20dp"
  37.             android:gravity="center"
  38.             android:orientation="horizontal"
  39.             android:layout_width="match_parent"
  40.             android:layout_height="wrap_content">
  41.             tools:ignore="UselessParent">
  42.  
  43.             <TextView
  44.                 android:textStyle="bold"
  45.                 android:textSize="24sp"
  46.                 android:text="@string/数字密码"
  47.                 android:layout_width="wrap_content"
  48.                 android:layout_height="wrap_content" />
  49.  
  50.             <EditText
  51.  
  52.                 android:layout_width="match_parent"
  53.                 android:layout_height="wrap_content"
  54.                 android:hint="@string/请输入您的密码"/>
  55.  
  56.         </LinearLayout>
  57.         <LinearLayout
  58.             android:layout_marginTop="20dp"
  59.             android:gravity="center"
  60.             android:orientation="horizontal"
  61.             android:layout_width="match_parent"
  62.             android:layout_height="wrap_content">
  63.  
  64.             <TextView
  65.                 android:textStyle="bold"
  66.                 android:textSize="24sp"
  67.                 android:text="@string/具体昵称"
  68.                 android:layout_width="wrap_content"
  69.                 android:layout_height="wrap_content" />
  70.  
  71.             <EditText
  72.  
  73.                 android:layout_width="match_parent"
  74.                 android:layout_height="wrap_content"
  75.                 android:hint="@string/请输入您的昵称"/>
  76.         </LinearLayout>
  77.     </LinearLayout>
  78.     <Button
  79.         android:id="@+id/register"
  80.         android:layout_margin="10dp"
  81.         android:background="@color/colorPrimaryDark"
  82.         android:textSize="20sp"
  83.         android:layout_width="match_parent"
  84.         android:layout_height="wrap_content"
  85.         android:text="@string/注册账号"/>
  86.  
  87. </LinearLayout>

设计效果如图

 Register.java文件代码如下：

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

  1. package com.example.chwngyanan.qxapp.activity;
  2.  
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.support.annotation.Nullable;
  6. import android.support.v7.app.AppCompatActivity;
  7. import android.view.View;
  8. import android.widget.Button;
  9. import android.widget.Toast;
  10.  
  11. import com.example.chwngyanan.qxapp.MainActivity;
  12. import com.example.chwngyanan.qxapp.R;
  13.  
  14. /**
  15.  * Created by CHWNGYANAN on 2021/9/23.
  16.  */
  17.  
  18. public class Register extends AppCompatActivity {
  19.     private Button register;
  20.  
  21.     @Override
  22.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  23.         super.onCreate(savedInstanceState);
  24.         setContentView(R.layout.activity_register);
  25.  
  26.         //绑定按钮
  27.         register = (Button)findViewById(R.id.register);
  28.         register.setOnClickListener(new View.OnClickListener() {
  29.             @Override
  30.             public void onClick(View v) {
  31.                 Toast.makeText(Register.this, "注册成功，请重新登录", Toast.LENGTH_SHORT).show();
  32.                 startActivity(new Intent(Register.this,Login.class));
  33.             }
  34.         });
  35.     }
  36. }

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

Login.java中代码如下

  1. package com.example.chwngyanan.qxapp.activity;
  2.  
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.support.annotation.Nullable;
  6. import android.support.v7.app.AppCompatActivity;
  7. import android.view.View;
  8. import android.widget.Button;
  9. import android.widget.EditText;
  10. import android.widget.Toast;
  11.  
  12. import com.example.chwngyanan.qxapp.MainActivity;
  13. import com.example.chwngyanan.qxapp.R;
  14.  
  15. /**
  16.  * Created by CHWNGYANAN on 2021/9/22.
  17.  */
  18.  
  19. public class Login extends AppCompatActivity {
  20.     private Button login;
  21.     private Button zhuce;
  22.  
  23.     @Override
  24.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  25.         super.onCreate(savedInstanceState);
  26.         setContentView(R.layout.activity_login);
  27.         //绑定控件
  28.         login = (Button)findViewById(R.id.login);
  29.         zhuce = (Button)findViewById(R.id.zhuce);
  30.  
  31.         login.setOnClickListener(new View.OnClickListener() {
  32.             @Override
  33.             public void onClick(View v) {
  34.                 Toast.makeText(Login.this, "登陆成功",Toast.LENGTH_SHORT).show();
  35.                 startActivity(new Intent(Login.this, MainActivity.class));
  36.             }
  37.         });
  38.         //注册界面
  39.         zhuce.setOnClickListener(new View.OnClickListener() {
  40.             @Override
  41.             public void onClick(View v) {
  42.                 startActivity(new Intent(Login.this,Register.class));
  43.             }
  44.         });
  45.  
  46.     }
  47. }

最后实现的效果如下：

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/765126
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号