现在的位置: 首页 > 移动开发 > 正文

android登录界面

2019年03月14日 移动开发 ⁄ 共 5457字 ⁄ 字号 评论关闭

秒速赛车公式 www.l19l7.cn

? 在网上在到一个登录界面感觉挺不错的,给大家分享一下~先看效果图:

? 这个Demo除了按钮、小猫和Logo是图片素材之外,其余的UI都是通过代码实现的。


? 一、背景

? 背景蓝色渐变,是通过一个xml文件来设置的。代码如下:

? background_login.xml

  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <shape?xmlns:android="//schemas.android.com/apk/res/android">??
  3. ????<gradient???
  4. ????????android:startColor="#FFACDAE5"??
  5. ????????android:endColor="#FF72CAE1"??
  6. ????????android:angle="45"??
  7. ????/>??
  8. </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

  1. <?xml?version="1.0"?encoding="UTF-8"?>??
  2. <shape?xmlns:android="//schemas.android.com/apk/res/android">??
  3. ????<solid?android:color="#55FFFFFF"?/>??
  4. ????<!--?设置圆角??
  5. ????注意:?bottomRightRadius是左下角而不是右下角??bottomLeftRadius右下角-->??
  6. ????<corners?android:topLeftRadius="10dp"?android:topRightRadius="10dp"??
  7. ????????android:bottomRightRadius="10dp"?android:bottomLeftRadius="10dp"/>??
  8. </shape>??



? 三、界面的布局

? 界面的布局挺简单的,就直接贴代码啦~

? login.xml

  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <LinearLayout??
  3. ????xmlns:android="//schemas.android.com/apk/res/android"??
  4. ????android:orientation="vertical"??
  5. ????android:layout_width="fill_parent"??
  6. ????android:layout_height="fill_parent"??
  7. ????android:background="@drawable/background_login">??
  8. ????<!--?padding?内边距???layout_margin?外边距??
  9. ????????android:layout_alignParentTop?布局的位置是否处于顶部?-->??
  10. ??????????
  11. ????<RelativeLayout???
  12. ????????android:id="@+id/login_div"??
  13. ????????android:layout_width="fill_parent"??
  14. ????????android:layout_height="wrap_content"??
  15. ????????android:padding="15dip"??????????
  16. ????????android:layout_margin="15dip"???
  17. ????????android:background="@drawable/background_login_div_bg"?>??
  18. ????????<!--?账号?-->??
  19. ????????<TextView???
  20. ????????????android:id="@+id/login_user_input"??
  21. ????????????android:layout_width="wrap_content"??
  22. ????????????android:layout_height="wrap_content"??
  23. ????????????android:layout_alignParentTop="true"??
  24. ????????????android:layout_marginTop="5dp"??
  25. ????????????android:text="@string/login_label_username"??
  26. ????????????style="@style/normalText"/>??
  27. ????????<EditText???
  28. ????????????android:id="@+id/username_edit"??
  29. ????????????android:layout_width="fill_parent"??
  30. ????????????android:layout_height="wrap_content"??
  31. ????????????android:hint="@string/login_username_hint"??
  32. ????????????android:layout_below="@id/login_user_input"??
  33. ????????????android:singleLine="true"??
  34. ????????????android:inputType="text"/>??
  35. ????????<!--?密码?text?-->??
  36. ????????<TextView???
  37. ????????????android:id="@+id/login_password_input"??
  38. ????????????android:layout_width="wrap_content"??
  39. ????????????android:layout_height="wrap_content"??
  40. ????????????android:layout_below="@id/username_edit"??
  41. ????????????android:layout_marginTop="3dp"??
  42. ????????????android:text="@string/login_label_password"??
  43. ????????????style="@style/normalText"/>??
  44. ????????<EditText???
  45. ????????????android:id="@+id/password_edit"??
  46. ????????????android:layout_width="fill_parent"??
  47. ????????????android:layout_height="wrap_content"??
  48. ????????????android:layout_below="@id/login_password_input"??
  49. ????????????android:password="true"??
  50. ????????????android:singleLine="true"??
  51. ????????????android:inputType="textPassword"?/>??
  52. ????????<!--?登录button?-->??
  53. ????????<Button???
  54. ????????????android:id="@+id/signin_button"??
  55. ????????????android:layout_width="wrap_content"??
  56. ????????????android:layout_height="wrap_content"??
  57. ????????????android:layout_below="@id/password_edit"??
  58. ????????????android:layout_alignRight="@id/password_edit"??
  59. ????????????android:text="@string/login_label_signin"??
  60. ????????????android:background="@drawable/blue_button"?/>??
  61. ????</RelativeLayout>??
  62. ????
  63. ????<RelativeLayout???
  64. ????????android:layout_width="fill_parent"??
  65. ????????android:layout_height="wrap_content"?>??
  66. ?????????<TextView??android:id="@+id/register_link"??
  67. ?????????????android:text="@string/login_register_link"??
  68. ?????????????android:layout_width="wrap_content"??
  69. ?????????????android:layout_height="wrap_content"??
  70. ?????????????android:layout_marginLeft="15dp"??
  71. ?????????????android:textColor="#888"??
  72. ?????????????android:textColorLink="#FF0066CC"?/>??
  73. ????????<ImageView?android:id="@+id/miniTwitter_logo"??
  74. ????????????android:src="@drawable/cat"??
  75. ????????????android:layout_width="wrap_content"??
  76. ????????????android:layout_height="wrap_content"??
  77. ????????????android:layout_alignParentRight="true"??
  78. ????????????android:layout_alignParentBottom="true"??
  79. ????????????android:layout_marginRight="25dp"??
  80. ????????????android:layout_marginLeft="10dp"??
  81. ????????????android:layout_marginBottom="25dp"?/>??
  82. ????????<ImageView?android:src="@drawable/logo"??
  83. ????????????android:layout_width="wrap_content"??
  84. ????????????android:layout_height="wrap_content"??
  85. ????????????android:layout_toLeftOf="@id/miniTwitter_logo"??
  86. ????????????android:layout_alignBottom="@id/miniTwitter_logo"??
  87. ????????????android:paddingBottom="8dp"/>??
  88. ????</RelativeLayout>??
  89. </LinearLayout>??



? 四、Java源文件

? Java源文件比较简单,只是实例化Activity,去掉标题栏。

  1. package?com.mytwitter.acitivity;??
  2. ??
  3. import?android.app.Activity;??
  4. import?android.os.Bundle;??
  5. import?android.view.Window;??
  6. ??
  7. public?class?LoginActivity?extends?Activity?{??
  8. ????@Override??
  9. ????public?void?onCreate(Bundle?savedInstanceState)?{??
  10. ????????super.onCreate(savedInstanceState);??
  11. ????????requestWindowFeature(Window.FEATURE_NO_TITLE);??
  12. ????????setContentView(R.layout.login);??
  13. ????}??
  14. }??


? 在开发APP的时候,需要设计登录界面的可以以此作为参考哦!

抱歉!评论已关闭.

  • 一以贯之推进党的建设新的伟大工程 2019-03-19
  • 回复@真理论者:你天天在强坛攻击爱因斯坦是不是劳动?创造价值么?负价值也! 2019-03-19
  • 北京天安门广场更换花卉 2019-03-18
  • 党的自我革命是伟大社会革命的强大动力(深入学习贯彻习近平新时代中国特色社会主义思想) 2019-03-18
  • 人民日报人民时评:让安全生产理念成为基本共识 2019-03-18
  • “人民体育 健康中国”马拉松系列赛北京站 2019-03-17
  • 识破“假大学”并没那么难 2019-03-17
  • 佛山:用公积金买装配式住房 贷款额度或可上浮20% ——凤凰网房产北京 2019-03-17
  • 奥运冠军寄语Running Together国际迷你马拉松—在线播放—《奥运冠军寄语Running Together国际迷你马拉松》—体育—优酷网,视频高清在线观看 2019-03-17
  • 【理上网来喜迎十九大】西班牙学者:大国外交令中国成为建立世界新秩序的中流砥柱 2019-03-16
  • 马上背!十九大报告中的四个“新” 2019-03-16
  • 呼市赛罕区南门外小学开展庆父亲节亲子趣味足球赛 2019-03-16
  • 2017大皖客户端徽派栏目全面回顾宣传片 2019-03-15
  • 回复@海之宁:你想自主劳动?全民所有的生产资料凭啥让你自主? 2019-03-15
  • 重庆市南岸区:探索建立“微益坊” 2019-03-15
  • 578| 143| 470| 308| 390| 663| 962| 456| 444| 978|