【学习笔记】Android简单登录界面详解——小白也能看懂

按照国际惯例先上效果图：

 

现在正式开始py:

1.首先Start a new Andriod Studio project

2Choose your project就选择Empty Activity，点击Next

.

3.设置好这些信息之后点击Finish，项目就创建好了

4.activity_main.xml页面布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/bg_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_1"
        android:scaleType="centerCrop"/>

    <ImageView
        android:id="@+id/user"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="#000"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:scaleType="fitCenter"/>

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome back!"
        android:textSize="40sp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
         />

    <TextView
        android:id="@+id/sign"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sign in to your acount"
        android:textSize="20sp"
        android:textColor="#b3b3b3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="300dp"
        />

    <EditText
        android:id="@+id/username"
        android:layout_marginTop="350dp"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:inputType = "number"
        android:paddingLeft="10dp"
        android:paddingTop="7dp"
        android:paddingBottom="7dp"
        android:maxLines="1"
        android:hint="Username:"
        android:drawableLeft="@drawable/icon_user"
        android:drawablePadding="5dp"
        android:layout_centerHorizontal="true"/>

    <EditText
        android:id="@+id/password"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="Password"
        android:layout_below="@id/username"
        android:paddingLeft="10dp"
        android:paddingTop="7dp"
        android:paddingBottom="7dp"
        android:maxLines="1"
        android:layout_marginTop="15dp"
        android:drawableLeft="@drawable/icon_password"
        android:drawablePadding="5dp"
        android:layout_centerHorizontal="true"/>

    <CheckBox
        android:id="@+id/re"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Remeber me?"
        android:textColor="#808080"
        android:paddingLeft="5dp"
        android:layout_below="@id/password"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="35dp"
        android:textSize="17sp"/>

    <Button
        android:id="@+id/signin"
        android:layout_below="@id/password"
        android:layout_marginTop="6dp"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_signin"
        android:text="SIGN IN"
        android:textColor="#ffffff"
        android:textSize="20sp"

        android:layout_marginLeft="255dp"/>





</RelativeLayout>

 

mainactivity.java代码如下：

package com.example.cloud;

import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.CompoundButton;
import android.widget.Toast;
import android.app.Activity;

import com.bumptech.glide.Glide;

public class MainActivity extends Activity {

    private ImageView mUser;
    private CheckBox mRe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mUser = findViewById(R.id.user);
        mRe = findViewById(R.id.re);

        mRe.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
                Toast.makeText(MainActivity.this,isChecked?"Remeber me":"Forget me",Toast.LENGTH_SHORT).show();
            }
        });

        Glide.with(this).load("https://i0.hdslb.com/bfs/bangumi/443295f14b859de64a5917122bd9e516673c689d.jpg@90w_90h.webp").into(mUser);
    }
}

其中注意头像用的网图，需要导入第三方库Glide，Glide使用说明链接：https://github.com/bumptech/glide。

主要在gradle中添加代码：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.1"
    defaultConfig {
        applicationId "com.example.cloud"
        minSdkVersion 21
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

        repositories {
            mavenCentral()
            google()
        }



dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

        implementation 'com.github.bumptech.glide:glide:4.9.0'
        annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

另外一定要注意在AndroidManifest.xml注册联网许可（可能是这么叫，不太清楚）：

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

    <uses-permission android:name="android.permission.INTERNET"/>

这里没有贴出完整代码，添加最后一句即可。

在checkbox控件中添加了toast提示，代码见mainactivity.java。效果如下：

SIGNIN键按压效果背景布局bg_signin.xml：

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

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#ff1a1a"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#ff4d4d"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</selector>