[Android学习] 1. 简易登录界面设计

通过对活动及控件的学习,今天制作一个简易登录界面。简要记录一下操作过程、遇到的问题及学到的经验,希望各位老师多多提出问题不吝赐教!

 预期设计效果图

 设计要求:

1.布局不限,参考上图;

2.利用EditText制作输入框,有语言提示;

3.登录注册忘记密码有跳转;

4.账号密码写死,登陆成功,密码错误用Toast or Dialog进行提示;

设计思路:

本次不使用Linear布局而采用更加可视化的Constraint布局,利用TextView作为标题文本框;两个EditText作为账号密码的输入框;三个Button按钮分别作为登录,注册,忘记密码;

设计代码:

//--------------------主活动布局段代码---------------------------//
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/background"                  
    tools:context=".MainActivity">
    //------------------TextView:welcome----------------//
    <TextView
        android:id="@+id/textView"
        android:layout_width="285dp"
        android:layout_height="64dp"
        android:gravity="center"
        android:text="W E L C O M E"
        android:textSize="35dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.124" />
    
    //-----------------EditText:UserName-------------------//
    <EditText
        android:id="@+id/Edit_account"
        android:layout_width="345dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@drawable/edit_background"
        android:gravity="center"
        android:hint="请输入账号"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.342" />
   
    //-----------------EditText:Password-------------------//
    <EditText
        android:id="@+id/Edit_password"
        android:layout_width="344dp"
        android:layout_height="52dp"
        android:layout_gravity="center"
        android:background="@drawable/edit_background"
        android:gravity="center"
        android:hint="请输入密码"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    //--------------------Button1:Login-------------------//
    <Button
        android:id="@+id/bn1"
        android:layout_width="283dp"
        android:layout_height="73dp"
        android:layout_gravity="center"
        android:background="@null"
        android:outlineProvider="none"
        android:text="登   录"
        android:textSize="25dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.745" />
 
    //--------------------Button2:Rollin-------------------//
    <Button
        android:id="@+id/bn2"
        android:layout_width="91dp"
        android:layout_height="33dp"
        android:background="@null"
        android:gravity="center"
        android:text="注册账号"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.294"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.939" />
    
    //--------------------Button3:ForgetPassWord-------------------//
    <Button
        android:id="@+id/bn3"
        android:layout_width="97dp"
        android:layout_height="34dp"
        android:background="@null"
        android:gravity="center"
        android:text="忘记密码"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.709"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

</androidx.constraintlayout.widget.ConstraintLayout>

在写整个布局文件时,遇到很多问题:

1.在Contraint布局中,设计布局没问题,一运行整个布局乱飞,直接报下列错误。

This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints

解决:原因并未对控件设置约束,对控件四个边设计约束,一个是用布局下方的魔术棒(“infer Constrains)自动约束,这会导致控件乱飞使用少控件,或者每次插入先infer;其次就是将每个控件四个边连接到整个parent四个边上;

2.设置EditText文本框的样式、背景:

解决:在drawable文件夹下新建edit_background布局,在其中设置形状,四角弯曲度、颜色..;


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

   <item>
       <shape
           android:shape="rectangle">
       <solid
           android:color="#efefef"/>
       <corners
           android:radius="8dp"/>
       <stroke
           android:width="2dp"
           android:color="#505050"/>
       </shape>
   </item>
</layer-list>

​

在布局文件中将自定义文本框布局引入:android:background="@drawable/edit_background"

3. 设置Button按钮背景不透明;

解决:

1.在res/values/中找到两个theme文件,将其中这一行:

    <style name="Theme.LoginInSystem" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

都改为:

    <style name="Theme.LoginInSystem" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">

 之后对Button按钮布局文件中引入  android:background="@null"

主活动代码

//-----------------主活动代码--------------------------------//
package com.example.logininsystem;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    //定义账号密码;
    private String setaccount="123";
    private String setpassword="123";
    //定义控件对象;
    private EditText username,password;
    Button bn1,bn2,bn3;
    Intent In1,In2,In3;
    AlertDialog.Builder dialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.bn1).setOnClickListener(this);
        findViewById(R.id.bn2).setOnClickListener(this);
        findViewById(R.id.bn3).setOnClickListener(this);
        username =  findViewById(R.id.Edit_account);
        password =  findViewById(R.id.Edit_password);
    }

    @Override
    public void onClick(View v) {
        switch(v.getId()){
            //登录成功跳转&&登陆失败警告!
            case(R.id.bn1):
                if(setaccount.equals(username.getText().toString())&&
                        setpassword.equals(password.getText().toString()))
                {
                   In1 = new Intent(MainActivity.this,LogInSuccess.class);
                   startActivity(In1);
                }
                else
                    {
                    dialog = new AlertDialog.Builder(MainActivity.this);
                    dialog.setTitle("Warning");
                    dialog.setMessage("用户名密码错误,请重试!");
                    dialog.setCancelable(false);
                    dialog.setPositiveButton("确认", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                        }
                    });dialog.show();
                    }
                break;
            case(R.id.bn2):
                In2 = new Intent(MainActivity.this,RollIn.class);
                startActivity(In2);break;
            case(R.id.bn3):
                In3= new Intent(MainActivity.this,Forget.class);
                startActivity(In3);break;
        }
    }
}

最终效果图:

                           

自己做的第一个登陆界面,虽然只是一些简单的控件组合,但最终自己能搞出来还是很有成就感的,也算找个地方记录一下自己出现的问题以便未来的工作学习。

望共勉!

谢谢!

 

 

 

 

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>