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

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-05-25
  • 【十九大·理论新视野】动漫:“社会主义现代化强国”如何建成 2019-05-25
  • 太原黑臭水体治理接受国家专项督查 2019-05-24
  • 白芦笋:一年一会矜贵食 2019-05-24
  • 安徽通报2018年上半年全省旅游投诉情况 2019-05-24
  • 女性之声——全国妇联 2019-05-23
  • 【新华微视评】偏远农村的“智慧消防” 2019-05-23
  • 万花瞳:万花迷人眼 慧瞳观天下 2019-05-23
  • 视频:热心球迷!陈奕迅吴秀波惊现世界杯开幕式现场 2019-05-22
  • 【北京神龙京津车型报价】北京神龙京津4S店车型价格 2019-05-22
  • 国外看中国科技:中国隧道技术发展迅速享誉世界 2019-05-22
  • 孕妇在巴黎大区快线列车上产子 宝宝获赠“大礼” 2019-05-22
  • 【学习时刻】中国人民大学副校长刘元春:中央经济工作会议的四大亮点 2019-05-21
  • 环球佳酿举行新品发布会 百余款酒品集中发售 2019-05-21
  • 改造后的老旧楼房抗震能力是否提高?新老建筑是否共用逃生通道? 2019-05-21
  • 909| 108| 997| 547| 909| 875| 250| 308| 538| 35|