Android 制作登陆界面 （xml部分）

jenlong

回顾上一次的 Android 更换 Notification Bar 教学。
https://cn.cari.com.my/forum.php?mod=viewthread&tid=3972481



今天这篇肯定会很长，要教大家如何制作 login page (xml部分)
大概就是这样的东西，看下图：





再还没开始之前，先自行下载好背景图片和你的logo
(PS :
第一点，背景照片不要超过 1920*1080。
第二点，把你下载背景照片rename成bg。
第三点，把你下载logo照片rename成logo。
)





今天用到的Component有：
LinearLayout 线性布局 (http://www.runoob.com/w3cnote/android-tutorial-linearlayout.html)

RelativeLayout 相对布局 (http://www.runoob.com/w3cnote/android-tutorial-relativelayout.html)

ImageView - 放照片 - (Background & Logo) (http://www.runoob.com/w3cnote/android-tutorial-imageview.html)

Button - 按钮 - (Login) (http://www.runoob.com/w3cnote/android-tutorial-button-imagebutton.html)

TextView - 放字体 - (Name & Password) (http://www.runoob.com/w3cnote/android-tutorial-textview.html)

EditText - 打字的 - (Name & Password) (http://www.runoob.com/w3cnote/android-tutorial-edittext.html)




在这里分享这网站，中文教学应该不会看不懂。
奔跑吧noobnoob
http://www.runoob.com/w3cnote/android-tutorial-intro.html




第1步，把刚下好的背景和logo。Copy & Paste 进去你的drawable。
不然要怎么在Android Studio使用，你说是不是
不懂的可以看这里 (注意第2步 : https://cn.cari.com.my/forum.php?mod=viewthread&tid=3970629&fbshare=1)






第2步，Create新的一个xml。
在layout里面，右键 --> New --> Layout resource file



接下来就是命名了英文也就是naming。
我就叫它activity_login







第3步，到了这边我真是词穷了，不知道应该怎么教了。
在这边就要打真真的xml代码了。

想来想去，还是直接上代码吧。
有点代码底或有学过定点的，你们就自行体会 不会的也只能Copy & Paste慢慢学

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
androidrientation="vertical">
    <RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true">
        <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/bg" />
        <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center">
            <ImageView
android:id="@+id/img_Logo"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:padding="5dp"
android:src="@drawable/logo" />
            <TextView
android:id="@+id/tv_Logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img_Logo"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Android"
android:textColor="#FFFFFF"
android:textSize="30dp"
android:textStyle="bold" />
            <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_Logo"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp">
                <TextView
android:id="@+id/tv_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name : "
android:textColor="#ffffff"
android:textSize="20dp" />
                <EditText
android:id="@+id/et_Name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_Name"
android:layout_marginTop="3dp"
android:textColor="#ffffff"
android:textSize="16dp" />
                <TextView
android:id="@+id/tv_Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/et_Name"
android:layout_marginTop="10dp"
android:text="assword : "
android:textColor="#ffffff"
android:textSize="20dp" />
                <EditText
android:id="@+id/et_Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_Password"
android:layout_marginTop="3dp"
android:inputType="textPassword"
android:textColor="#ffffff"
android:textSize="16dp" />
                <Button
android:id="@+id/btn_Login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/et_Password"
android:layout_marginTop="16dp"
android:background="#FFEB3B"
android:elevation="6dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18dp"
android:textStyle="bold" />
            </RelativeLayout>
        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>


(PS :
Background颜色不喜欢可以自己更改。
不懂的可以看这里 (注意第2步 : https://cn.cari.com.my/forum.php?mod=viewthread&tid=3972481)

如果没有跟上面的naming的话，你的android:src="@drawable/bg"和android:src="@drawable/logo"肯定会变成红色。
这没关系，背景的部分你只要把bg换成你之前rename好的名字，logo也是一样换成你之前rename好的名字。
为什么会变红色(error)，因为你的AndroidStudio找不到bg还是logo这个照片
)






第4步，要来Create新的一个Java Class了
不懂的可以看这里 (注意第4&5步 : https://cn.cari.com.my/forum.php?mod=viewthread&tid=3970629&fbshare=1)

我们Create个Java Class叫它LoginActivity







第5步，看这边要看回这里（注意第6,7,8步 :https://cn.cari.com.my/forum.php?mod=viewthread&tid=3970629&fbshare=1）
每次Create新的Java Class都要这样的东西，不要Copy&aste就自己打，不要跟我打错就好


好了就你就会看到这样，当然要把activity_main换成我们刚刚create好的activity_login
setContentView(R.layout.activity_login);






第6步，开启我们的AndroidManifest.xml
还是不知道在哪里的人自行去看 ， 第18步 https://cn.cari.com.my/forum.php?mod=viewthread&tid=3970629&fbshare=1 你是欠打了那么久了还不知道在哪里
把这行加进去，这是注册LoginActivity的意思。
<activity android:name=".LoginActivity"></activity>
说个例子，你Create了一个Java Class(Activity)也就是说你生了个孩子。生了孩子肯定要去注册报生纸，AndroidManifest就是报生纸啦。
不知道放在哪里朋友可以看看下图:





第7步，回去之前的SplashActivity。
找到MainActivity.class把它换成LoginActivity.class
换好后应该就会这样。
Intent intent = new Intent(SplashActivity.this, LoginActivity.class);





到这边应该没问题了，你现在要做的事就是使劲点那个 按钮，然后就运行你的project吧。如果你真的不知道这按钮在哪里可以看看
( 第20步: https://cn.cari.com.my/forum.php?mod=viewthread&tid=3970629&fbshare=1 )



#越来越懒的节奏



谢谢程序狗万岁。

有什么不明白的，可以在下面留言，我尽量的回复，也可以在FB上Inbox我。

FB : https://www.facebook.com/Guitar.LonG

FB GROUP : https://www.facebook.com/groups/941792849229141/

jenlong

保留

edwin0117

请问登录界面该用什么database来给用户Register呢？

jenlong

edwin0117 发表于 26-5-2017 06:50 PM
请问登录界面该用什么database来给用户Register呢？

没有服务器，不能注册和登陆，只能模拟

cupid25

edwin0117 发表于 26-5-2017 06:50 PM
请问登录界面该用什么database来给用户Register呢？

你可以用 firebase 免费的 spark package，如果你的容量不多 google firebase 其实足够用在 app 。。。怎么 connect 和 create database 在 google firebase 那么看他们的 api 就可以了。

https://firebase.google.com/pricing/



如果你是 private hosting server 。。。那么可以和 website 一样的办法去 register 但通常一定用 POST然后 return json/xml status，在 android 也流行用 rest 的 retrofit 。。。我本身是用 custom java multipart + asynctask (自己写 class 因为很容易注入 custom header / private ssl cert 和控制)


ps: 如果你是 android developer 那么 firebase 是逃避不了假如需要用 google map , notification 等等目前都需要通过 firebase。