学习Android的第四天

语言: CN / TW / HK

theme: condensed-night-purple

「这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

前言

第一天我们学习TextView,第二天我们学习了ImageView,第三天我们学习了EditText,这三种控件我们已经足够写出一个登陆页面了,今天我们就来实现一下吧.

逻辑

首先写代码之前我们要捋一下我们需要的一些逻辑判断

  1. 没有输入账号和密码点击登录会提示相关弹框
  2. 账号密码的判断
  3. 密码属于不可见输入
  4. 账号属于数字输入

好了,大概逻辑就是这么多,今天就抄QQ的登录吧

image.png

首先我们先设置一下背景颜色

```

```

颜色值是 #F5F7FB 这是我用取色工具取出来的,大家随便百度一个就有.

可以看到两个输入框都是一个白色,我们来设置一下相应位置吧

image.png

我们先定义一个线性布局,他可以让我们的控件按照横着或者竖着进行排列

```

```

布局设置完毕,就开始写我们重要的控件吧

```

<LinearLayout
    android:id="@+id/linear_edit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:background="@color/white"
    android:orientation="vertical"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <EditText
        android:id="@+id/et_account"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        //将输入框的下划线去除
        android:background="@null"
        //没有文本时展示的文案
        android:hint="QQ号/邮箱/手机号"
        //最大可以输入几个
        android:maxLength="18"
        //内部距离左侧的位置
        android:paddingLeft="10dp" />

    <EditText
        android:id="@+id/et_pwd"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@null"
        android:hint="密码"
        //表示输入的文本都将是密码形式
        android:inputType="textPassword"
        android:maxLength="16"
        android:paddingLeft="10dp" />
</LinearLayout>

<TextView
    android:id="@+id/tv_login"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    //距离左侧多远
    android:layout_marginLeft="15dp"
    //距离上面
    android:layout_marginTop="20dp"
    //距离右边
    android:layout_marginRight="15dp"
    //文本所在位置
    android:gravity="center"
    android:text="登录"
    android:textColor="@color/white"
    android:textSize="18dp"
    app:layout_constraintTop_toBottomOf="@id/linear_edit" />

``可以看到蓝色框线的是啥呀看不见,不用着急,我们在Activity处理一下`

image.png

``` private LinearLayout mLinearEdit; private EditText mEtAccount; private EditText mEtPwd; private TextView mTvLogin;

private void initView() { //隐藏标题 getSupportActionBar().hide(); //初始化控件 mLinearEdit = findViewById(R.id.linear_edit); mEtAccount = findViewById(R.id.et_account); mEtPwd = findViewById(R.id.et_pwd); mTvLogin = findViewById(R.id.tv_login); //为登录按钮设置圆角及颜色 GradientDrawable drawable = new GradientDrawable(); //设置圆角角度 drawable.setCornerRadius(20); //设置颜色 drawable.setColor(Color.parseColor("#00CEFF")); //将其设置到登录按钮的Background上 mTvLogin.setBackground(drawable);

} ```

image.png

来看一下效果吧

登录1.gif

效果还行,我们来处理一下逻辑吧

mTvLogin.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //获取账号输入框内的数据 String accoutn = mEtAccount.getText().toString(); //获取密码输入框内的数据 String pwd = mEtPwd.getText().toString(); //判断账号输入框是否为空 if(accoutn.isEmpty()){ //弹框提示 Toast.makeText(LoginActivity.this, "请输入账号", Toast.LENGTH_SHORT).show(); //结束代码,不会走下面了 return; } //判断密码输入框是否为空 if(pwd.isEmpty()){ Toast.makeText(LoginActivity.this, "请输入密码", Toast.LENGTH_SHORT).show(); return; } //判断账号和密码是否正确 if(accoutn.equals("147258369")&&pwd.equals("123456")){ //提示成功 Toast.makeText(LoginActivity.this, "登录成功", Toast.LENGTH_SHORT).show(); }else{ //提示失败 Toast.makeText(LoginActivity.this, "账号或密码错误", Toast.LENGTH_SHORT).show(); } } });

看下效果

登录2.gif

完美的效果,今天你学废了吗