初识Android二之小试牛刀模仿实现qq登陆界面
2017-03-19 22:30
507 查看
俗话说得好,老师踢开门,修行在自己。勉勉强强学完生命周期,然后悠悠闲闲听了两节课后,老师就布置了一个登陆界面的实现,于是,磕磕绊绊的修行之路开始了。先不去管初用android studio带来的各种问题,反正最后东搞西搞我还是给整出来了。话不多说,先上效果图。
![](https://img-blog.csdn.net/20170319221131802?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FybDQyNTQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170319221446496?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FybDQyNTQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170319221601163?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FybDQyNTQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
ok,效果图展示完毕,再来简单说说实现的东西,ImageView、EditText、TextView这些基本的使用就不多说了,来说说我觉得这个界面中实现的难点:
每个控件弧度角的实现
账号和密码文字放在编辑框中的实现
仿按钮按下的效果
难点提完了,接下来就是怎么解决它们,话还是不多说,一切皆在代码中,好了,上代码。
弧度角的关键fillet_shape.xml放在drawable文件夹下(ps:别看代码长,其实都一样)
在content_main.xml中实现大局!!
好了,还剩下登陆按钮按下的效果,设计一个login_btn.xml,当然还是放在drawable文件夹下面。
呼,终于把我这一阶段干的事儿写完了,仿佛心中突然通透了些许,夜又深了,是时候看一波小说了,最近在看《择天记》,啧啧啧,推荐一下,我不怎么看小说的,但是,就要推荐一下Zzzzz
4000
ok,效果图展示完毕,再来简单说说实现的东西,ImageView、EditText、TextView这些基本的使用就不多说了,来说说我觉得这个界面中实现的难点:
每个控件弧度角的实现
账号和密码文字放在编辑框中的实现
仿按钮按下的效果
难点提完了,接下来就是怎么解决它们,话还是不多说,一切皆在代码中,好了,上代码。
弧度角的关键fillet_shape.xml放在drawable文件夹下(ps:别看代码长,其实都一样)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#FFFFFF"/>//背景颜色 <corners android:radius="44px"/>//角的弧度 <stroke android:width="1dp" android:color="#D1EEEE"/>//边框的宽度和颜色 <padding android:left="10dip" android:top="10dip" android:right="10dip" android:bottom="10dip"/>//内边距,也是超过控件的大小
在content_main.xml中实现大局!!
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_main" tools:context="com.zfp.login.MainActivity" android:background="#EDEDED" > //qq头像图片 <ImageView android:id="@+id/myImage" android:layout_width="110dip" android:layout_height="110dip" android:layout_marginTop="25dip"//离上边界的距离 android:layout_centerHorizontal="true"//是否居中 android:background="@drawable/fillet_shape"//弧角的实现 android:src="@drawable/qqhead" />//图片的引入 //账号编辑框 <EditText android:id="@+id/qqNum" android:layout_width="match_parent" android:layout_height="60dip" android:layout_marginLeft="20dip"//离左边界的距离 android:layout_marginRight="20dip" android:layout_marginTop="35dip" android:paddingLeft="90dip"//离左内边的距离 android:layout_below="@id/myImage"//设置上边界在头像下面 android:inputType="number"//设定只能输入数字 android:textSize="35dp"//输入字的大小 android:background="@drawable/fillet_shape" />//弧角的设定 //账号两个字内置到编辑框 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="账号:" android:textSize="35dp" android:textColor="@android:color/darker_gray"//字体颜色 android:layout_alignLeft="@id/qqNum" android:layout_alignTop="@id/qqNum" android:layout_marginTop="10dp" android:layout_marginLeft="6dp" /> //密码编辑框 <EditText android:id="@+id/qqPaw" android:layout_width="match_parent" android:layout_height="60dip" android:layout_below="@id/qqNum" android:layout_alignLeft="@id/qqNum" android:layout_alignRight="@id/qqNum" android:paddingLeft="90dp" android:textSize="35dp" android:inputType="textPassword" android:background="@drawable/fillet_shape" /> //密码两个字内置密码编辑框 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密码:" android:textSize="35dp" android:textColor="@android:color/darker_gray" android:layout_alignLeft="@id/qqPaw" android:layout_alignTop="@id/qqPaw" android:layout_marginLeft="6dp" android:layout_marginTop="10dp" /> //登陆按钮 <Button android:id="@+id/loginBtn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/qqPaw" android:layout_alignLeft="@id/qqPaw" android:layout_alignRight="@id/qqPaw" android:layout_marginTop="20dp" android:text="登陆" android:textSize="35dp" android:textColor="@android:color/white" android:background="@drawable/login_btn"//设置弧角和按下效果的实现 /> //找回密码字的部署 <TextView android:id="@+id/fetchPsw" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="找回密码" android:textSize="25dp" android:textColor="#6E6E6E" android:layout_below="@id/loginBtn" android:layout_alignLeft="@id/loginBtn" android:layout_marginTop="10dp" /> //注册账号字的部署 <TextView android:id="@+id/register" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="注册账号" android:textSize="25dp" android:textColor="#6E6E6E" android:layout_below="@id/loginBtn" android:layout_alignRight="@id/loginBtn" android:layout_marginTop="10dp" />
好了,还剩下登陆按钮按下的效果,设计一个login_btn.xml,当然还是放在drawable文件夹下面。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">//选择器 <item android:state_pressed="true">//按钮按下时 <shape xmlns:android="http://schemas.android.com/apk/res/android" >//按下的形状设计 <solid android:color="#87CEEB"/> <corners android:radius="44px"/> <stroke android:width="1dp" android:color="#8968CD"/> <padding android:left="10dip" android:top="10dip" android:right="10dip" android:bottom="10dip"/> </shape> </item> <item>//按钮没按下时 <shape xmlns:android="http://schemas.android.com/apk/res/android" >//按钮没按下的形状 <solid android:color="#1E90FF"/> <corners android:radius="44px"/> <stroke android:width="1dp" android:color="#8968CD"/> <padding android:left="10dip" android:top="10dip" android:right="10dip" android:bottom="10dip"/> </shape> </item>
呼,终于把我这一阶段干的事儿写完了,仿佛心中突然通透了些许,夜又深了,是时候看一波小说了,最近在看《择天记》,啧啧啧,推荐一下,我不怎么看小说的,但是,就要推荐一下Zzzzz
4000
相关文章推荐
- 使用层级观察器HierarchyViewer综合各种布局实现Android QQ2012登陆界面和注册界面
- android实现仿QQ登陆界面的多账号保存
- 使用层级观察器hierarchyviewer综合各种布局实现Android QQ2012登陆界面和注册界面
- android之模仿QQ登陆的布局实现
- 模仿QQ记住账号和密码的登陆与实现的android开发实例
- android实现仿QQ登陆界面的多账号保存
- android 仿QQ登陆界面实现
- 使用层级观察器hierarchyviewer综合各种布局实现Android QQ2012登陆界面和注册界面
- android实现仿QQ登陆界面的多账号保存
- VC模仿超炫QQ界面的实现
- Android 高仿QQ 登陆界面
- Android仿QQ微信开场导航以及登陆界面
- Android登陆界面采用文件存储实现
- Android的仿QQ微信开场导航以及登陆资源分类界面
- android expandablelistview--实现类似qq界面的效果
- 使用Mina框架开发 QQ Android 客户端(3) 登陆功能的实现
- Android仿QQ微信开场导航以及登陆界面
- VC模仿超炫QQ界面的实现
- Android仿QQ微信开场导航以及登陆界面
- Lance老师UI系列教程第一课->QQ设置界面的实现(android)