按照国际惯例先上效果图:
现在正式开始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>