佳礼资讯网

 找回密码
 注册

ADVERTISEMENT

查看: 1338|回复: 4

Android 制作登陆界面 (xml部分)

[复制链接]
发表于 21-5-2017 11:09 AM | 显示全部楼层 |阅读模式
本帖最后由 jenlong 于 26-7-2017 10:54 PM 编辑

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



今天这篇肯定会很长,要教大家如何制作 login page (xml部分)
大概就是这样的东西,看下图:
Screenshot_20170521-095714.png



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




今天用到的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
1.png


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






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
4.PNG






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);
5.PNG





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




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




到这边应该没问题了,你现在要做的事就是使劲点那个 play.PNG 按钮,然后就运行你的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/







回复

使用道具 举报


ADVERTISEMENT

 楼主| 发表于 21-5-2017 12:10 PM | 显示全部楼层
保留
回复

使用道具 举报

发表于 26-5-2017 06:50 PM | 显示全部楼层
请问登录界面该用什么database来给用户Register呢?
回复

使用道具 举报

 楼主| 发表于 27-5-2017 11:00 PM | 显示全部楼层
edwin0117 发表于 26-5-2017 06:50 PM
请问登录界面该用什么database来给用户Register呢?

没有服务器,不能注册和登陆,只能模拟
回复

使用道具 举报

发表于 30-5-2017 08:33 PM | 显示全部楼层
本帖最后由 cupid25 于 30-5-2017 08:36 PM 编辑
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。

评分

参与人数 1人气 +5 收起 理由
jenlong + 5 我很赞同

查看全部评分

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

 

ADVERTISEMENT



ADVERTISEMENT



ADVERTISEMENT

ADVERTISEMENT


版权所有 © 1996-2023 Cari Internet Sdn Bhd (483575-W)|IPSERVERONE 提供云主机|广告刊登|关于我们|私隐权|免控|投诉|联络|脸书|佳礼资讯网

GMT+8, 28-3-2024 10:20 PM , Processed in 0.226532 second(s), 34 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表