Android登陆界面设计demo
在网上在到一个登录界面感觉挺不错的,给大家分享一下~先看效果图:
这个Demo除了按钮、小猫和Logo是图片素材之外,其余的UI都是通过代码实现的。
一、背景
背景蓝色渐变,是通过一个xml文件来设置的。代码如下:
background_login.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <gradient
- android:startColor="#FFACDAE5"
- android:endColor="#FF72CAE1"
- android:angle="45"
- />
- </shape>
startColor是渐变开始的颜色值,endColor是渐变结束的颜色值,angle是渐变的角度。其中#FFACDAE5中,FF是Alpha值,AC是RGB的R值,DA是RGB的G值,E5是RGB的B值,每个值在00~FF取值,即透明度、红、绿、蓝有0~255的分值,像要设置具体的颜色,可以在PS上的取色器上查看设置。
二、圆角白框
效果图上面的并不是白框,其实框是白色的,只是设置了透明值,也是靠一个xml文件实现的。
background_login_div.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <solid android:color="#55FFFFFF" />
- <!-- 设置圆角
- 注意: bottomRightRadius是左下角而不是右下角 bottomLeftRadius右下角-->
- <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
- android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>
- </shape>
三、界面的布局
界面的布局挺简单的,就直接贴代码啦~
login.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/background_login">
- <!-- padding 内边距 layout_margin 外边距
- android:layout_alignParentTop 布局的位置是否处于顶部 -->
- <RelativeLayout
- android:id="@+id/login_div"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:padding="15dip"
- android:layout_margin="15dip"
- android:background="@drawable/background_login_div_bg" >
- <!-- 账号 -->
- <TextView
- android:id="@+id/login_user_input"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentTop="true"
- android:layout_marginTop="5dp"
- android:text="@string/login_label_username"
- style="@style/normalText"/>
- <EditText
- android:id="@+id/username_edit"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:hint="@string/login_username_hint"
- android:layout_below="@id/login_user_input"
- android:singleLine="true"
- android:inputType="text"/>
- <!-- 密码 text -->
- <TextView
- android:id="@+id/login_password_input"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/username_edit"
- android:layout_marginTop="3dp"
- android:text="@string/login_label_password"
- style="@style/normalText"/>
- <EditText
- android:id="@+id/password_edit"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/login_password_input"
- android:password="true"
- android:singleLine="true"
- android:inputType="textPassword" />
- <!-- 登录button -->
- <Button
- android:id="@+id/signin_button"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/password_edit"
- android:layout_alignRight="@id/password_edit"
- android:text="@string/login_label_signin"
- android:background="@drawable/blue_button" />
- </RelativeLayout>
- <RelativeLayout
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" >
- <TextView android:id="@+id/register_link"
- android:text="@string/login_register_link"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginLeft="15dp"
- android:textColor="#888"
- android:textColorLink="#FF0066CC" />
- <ImageView android:id="@+id/miniTwitter_logo"
- android:src="@drawable/cat"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentRight="true"
- android:layout_alignParentBottom="true"
- android:layout_marginRight="25dp"
- android:layout_marginLeft="10dp"
- android:layout_marginBottom="25dp" />
- <ImageView android:src="@drawable/logo"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_toLeftOf="@id/miniTwitter_logo"
- android:layout_alignBottom="@id/miniTwitter_logo"
- android:paddingBottom="8dp"/>
- </RelativeLayout>
- </LinearLayout>
四、Java源文件
Java源文件比较简单,只是实例化Activity,去掉标题栏。
- package com.mytwitter.acitivity;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.Window;
- public class LoginActivity extends Activity {
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.login);
- }
- }
在开发APP的时候,需要设计登录界面的可以以此作为参考哦!
Android登陆界面设计demo相关推荐
- Android学习之登陆界面设计(一)前后期准备以及相关配置
Android学习之登陆界面设计(一)前后期准备以及相关配置 前言 成品 成品样式 成品特点 工具 系统配置 手机配置 Android Studio 3.6.3 SDK 图片来源 矢量图标库 Back ...
- Android学习之登陆界面设计(二)基本界面设计
Android学习之登陆界面设计(二)基本界面设计 前提 绘图样式 - drawable bg_login_btn_submit.xml bg_login_panel_slide.xml bg_log ...
- android布局基础及范例:QQ登陆界面设计
使用android手机的用户想必都有android手机QQ客户端吧,我们是不是觉得QQ登陆界面非常漂亮美观而且具有亲和力?我们是不是也想作出像 QQ那样美观的界面?有的人肯定会问,做UI那不是美工人员 ...
- Android典型界面设计(3)——访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- android零碎要点---android开发者的福音,59_1 Android的界面设计工具,直接拖拉就可以设计界面,Java技术qq交流群:JavaDream:251572072
Java技术qq交流群:JavaDream:251572072 2013/5/16 59_1 Android的界面设计工具 -------------------------------------- ...
- Android Studio 界面设计和运行的不一样
Android Studio 界面设计和运行的不一样 初学Android开发,记录一下遇到的问题,及解决方法 在Android studio 设置界面拖拽控件到视图区,设计界面是这样的 运行虚拟机看到 ...
- android登陆界面ui设计,UI设计师必备技能:常用字体规范
作为一个@王铎(MICU设计)带来的界面设计常用字体规范,大家看完果断收藏. 作者:王铎(MICU设计) 好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事. 这几天有人问我说:" ...
- QML与C++交互:登陆界面设计
环境: 主机:WIN7 开发环境:Qt5.2.1 说明: QML设计前台界面,C++后台负责逻辑 效果图: 源代码: 前台qml文件 login.qml [javascript] view plain ...
- android支付界面设计,Android支付宝支付设计开发
在移动支付领域,支付宝支付占用巨大份额,根据艾瑞咨询公布的报告数据:2014Q3,支付宝斩获了82.6%的市场份额,在移动支付的霸主地位越来越稳固.财付通支付的发力点在微信支付和手Q支付,在移动支付格 ...
最新文章
- 一张脑图说清 Nginx 的主流程
- 开关磁阻电机调速控制的仿真研究
- 系统操作日志设计(二)
- java内存泄漏总结
- golang return要返回的参数太多_Golang中的Defer必掌握的7知识点
- [开源]430驱动的12864图形点阵LCD
- php 5.3 连接mysql_php5.3.x5.4.x5.5.x连接mysql数据库的三种方式以及所用驱动
- java newfile() bug_java-运行类时,它将生成一个0kb的空白文件.有人可以指出我的错误之处吗?...
- 如何将散乱的css代码规范化、格式化
- java客户端操作elasticsearch7.3.2版本
- 电路基础-二阶(second -order) 电路
- CSR3026开发问题总结-1
- Allegro中显示mil和mm两种单位
- (2.3)【遥控型木马-网络神偷】
- 建模方法(二)-组合优化问题的定义
- JSR303数据校验
- CSS技能点--带图标的标题栏
- 计算机组成原理及汇编语言程序设计 179页4-24题 假设(AX)=0FF60H,有以下程序段:
- java RSA生成公钥对象和私钥对象
- 家用监控系统需要服务器吗,家庭监控系统实现(一)
热门文章
- 计算机二级考试公共基础知识点,计算机二级考试公共基础知识点
- Lang.NET 2008 相关Session
- bzoj3054 Rainbow的信号(位运算+瞎搞)
- 正在向icntv服务器认证授权信息,Spring-Security-OAuth2服务器之搭建认证授权服务器[一]...
- 修复无限网卡驱动报错:windows仍在设置此设备的类配置(代码56)
- docker容器端口影射宿主机端口
- ElsaticSearch为什么搜索很快
- ADS和candence如何调用veriloga文件并进行编译?
- ios版本 线控 Android,iOS 耳机线控
- Spine 骨骼动画查看器 Skeleton Viewer_官方文档中文版