android布局实践(一)home界面

﹏ヽ暗。殇╰゛Y 2022-08-20 11:26 253阅读 0赞

1、主界面home.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:background="@color/white"
  6. android:orientation="vertical" >
  7. <!-- logo -->
  8. <RelativeLayout
  9. android:id="@+id/logo"
  10. android:layout_width="match_parent"
  11. android:layout_height="0dp"
  12. android:layout_weight="1"
  13. android:gravity="center"
  14. android:layout_marginTop="6dp"
  15. android:layout_marginBottom="4dp"
  16. >
  17. <ImageView
  18. android:id="@+id/leiting_logo"
  19. android:layout_width="@dimen/logo_width"
  20. android:layout_height="@dimen/logo_height"
  21. android:layout_centerHorizontal="true"
  22. android:layout_centerVertical="true"
  23. android:background="@drawable/logo"
  24. />
  25. <ImageView
  26. android:layout_width="@dimen/icon_size"
  27. android:layout_height="@dimen/icon_size"
  28. android:layout_alignParentLeft="true"
  29. android:layout_centerVertical="true"
  30. android:background="@drawable/left"
  31. android:layout_marginLeft="15dp"
  32. />
  33. <ImageView
  34. android:layout_width="@dimen/icon_size"
  35. android:layout_height="@dimen/icon_size"
  36. android:layout_alignParentRight="true"
  37. android:layout_centerVertical="true"
  38. android:background="@drawable/close"
  39. android:layout_marginRight="15dp"
  40. />
  41. </RelativeLayout>
  42. <!-- 内容 -->
  43. <LinearLayout
  44. android:layout_width="match_parent"
  45. android:layout_height="0dp"
  46. android:layout_weight="3"
  47. android:orientation="vertical"
  48. android:layout_marginBottom="35dp"
  49. >
  50. <!-- 分隔符 -->
  51. <LinearLayout
  52. android:layout_width="match_parent"
  53. android:layout_height="1dp"
  54. android:background="@android:color/darker_gray"
  55. >
  56. </LinearLayout>
  57. <!-- 内容 -->
  58. <LinearLayout
  59. android:layout_width="match_parent"
  60. android:layout_height="match_parent"
  61. android:orientation="vertical"
  62. >
  63. <TextView
  64. android:layout_width="wrap_content"
  65. android:layout_height="wrap_content"
  66. android:layout_gravity="center"
  67. android:layout_marginTop="10dp"
  68. android:text="选择进入方式"
  69. android:textColor="@color/text_color"
  70. android:textSize="16sp"
  71. />
  72. <!-- 四种方式 -->
  73. <LinearLayout
  74. android:layout_width="match_parent"
  75. android:layout_height="match_parent"
  76. android:orientation="horizontal"
  77. android:layout_marginTop="10dp"
  78. >
  79. <!-- 忘记密码 -->
  80. <LinearLayout
  81. android:layout_width="0dp"
  82. android:layout_height="match_parent"
  83. android:layout_weight="1"
  84. android:orientation="vertical"
  85. android:gravity="center_horizontal"
  86. >
  87. <RelativeLayout
  88. android:layout_width="wrap_content"
  89. android:layout_height="wrap_content"
  90. >
  91. <ImageView
  92. android:layout_width="@dimen/icon_size_login_bg"
  93. android:layout_height="@dimen/icon_size_login_bg"
  94. android:background="@drawable/forget_pwd_bg" />
  95. <ImageView
  96. android:layout_centerInParent="true"
  97. android:layout_width="@dimen/icon_size_login"
  98. android:layout_height="@dimen/icon_size_login"
  99. android:background="@drawable/lock_13" />
  100. </RelativeLayout>
  101. <TextView
  102. android:layout_width="wrap_content"
  103. android:layout_height="wrap_content"
  104. android:layout_gravity="center"
  105. android:layout_marginTop="@dimen/margin_top_text_login"
  106. android:text="忘记密码"
  107. android:textColor="@color/black"
  108. android:textSize="@dimen/text_size_login" />
  109. </LinearLayout>
  110. <!-- 一键注册 -->
  111. <LinearLayout
  112. android:layout_width="0dp"
  113. android:layout_height="match_parent"
  114. android:layout_weight="1"
  115. android:orientation="vertical"
  116. android:gravity="center_horizontal"
  117. >
  118. <RelativeLayout
  119. android:layout_width="@dimen/icon_size_login_bg"
  120. android:layout_height="@dimen/icon_size_login_bg"
  121. >
  122. <ImageView
  123. android:layout_width="@dimen/icon_size_login_bg"
  124. android:layout_height="@dimen/icon_size_login_bg"
  125. android:background="@drawable/register_bg" />
  126. <ImageView
  127. android:layout_centerInParent="true"
  128. android:layout_width="@dimen/icon_size_login"
  129. android:layout_height="@dimen/icon_size_login"
  130. android:background="@drawable/phone_16_60" />
  131. <ImageView
  132. android:layout_alignParentRight="true"
  133. android:layout_alignParentTop="true"
  134. android:layout_width="@dimen/icon_size_login_small"
  135. android:layout_height="@dimen/icon_size_login_small"
  136. android:background="@drawable/icon_38" />
  137. </RelativeLayout>
  138. <TextView
  139. android:layout_width="wrap_content"
  140. android:layout_height="wrap_content"
  141. android:layout_gravity="center"
  142. android:layout_marginTop="@dimen/margin_top_text_login"
  143. android:text="一键注册"
  144. android:textColor="@color/black"
  145. android:textSize="@dimen/text_size_login" />
  146. </LinearLayout>
  147. <!-- 已有账号登录 -->
  148. <LinearLayout
  149. android:layout_width="0dp"
  150. android:layout_height="match_parent"
  151. android:layout_weight="1"
  152. android:orientation="vertical"
  153. android:gravity="center_horizontal"
  154. >
  155. <RelativeLayout
  156. android:layout_width="wrap_content"
  157. android:layout_height="wrap_content"
  158. >
  159. <ImageView
  160. android:layout_width="@dimen/icon_size_login_bg"
  161. android:layout_height="@dimen/icon_size_login_bg"
  162. android:background="@drawable/register_ed_bg" />
  163. <ImageView
  164. android:layout_centerInParent="true"
  165. android:layout_width="@dimen/icon_size_login"
  166. android:layout_height="@dimen/icon_size_login"
  167. android:background="@drawable/person_15_59" />
  168. </RelativeLayout>
  169. <TextView
  170. android:layout_width="wrap_content"
  171. android:layout_height="wrap_content"
  172. android:layout_gravity="center"
  173. android:layout_marginTop="@dimen/margin_top_text_login"
  174. android:text="已有账号登录"
  175. android:textColor="@color/black"
  176. android:textSize="@dimen/text_size_login" />
  177. </LinearLayout>
  178. <!-- 游客模式 -->
  179. <LinearLayout
  180. android:layout_width="0dp"
  181. android:layout_height="match_parent"
  182. android:layout_weight="1"
  183. android:orientation="vertical"
  184. android:gravity="center_horizontal"
  185. >
  186. <RelativeLayout
  187. android:layout_width="@dimen/icon_size_login_bg"
  188. android:layout_height="@dimen/icon_size_login_bg"
  189. android:gravity="center"
  190. >
  191. <ImageView
  192. android:layout_width="@dimen/icon_size_login_bg"
  193. android:layout_height="@dimen/icon_size_login_bg"
  194. android:background="@drawable/visitor_bg" />
  195. <ImageView
  196. android:layout_centerInParent="true"
  197. android:layout_width="@dimen/icon_size_login"
  198. android:layout_height="@dimen/icon_size_login"
  199. android:background="@drawable/lightning14_58" />
  200. <ImageView
  201. android:layout_alignParentRight="true"
  202. android:layout_alignParentTop="true"
  203. android:layout_width="@dimen/icon_size_login_small"
  204. android:layout_height="@dimen/icon_size_login_small"
  205. android:background="@drawable/icon_38" />
  206. </RelativeLayout>
  207. <TextView
  208. android:layout_width="wrap_content"
  209. android:layout_height="wrap_content"
  210. android:layout_gravity="center"
  211. android:layout_marginTop="@dimen/margin_top_text_login"
  212. android:text="游客模式"
  213. android:textColor="@color/black"
  214. android:textSize="@dimen/text_size_login" />
  215. </LinearLayout>
  216. </LinearLayout>
  217. </LinearLayout>
  218. </LinearLayout>
  219. </LinearLayout>

2、数值

2.1 颜色 color.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <color name="transparent_background">#50000000</color>
  4. <color name="red">#FF0000</color>
  5. <color name="white">#FFFFFF</color>
  6. <color name="black">#000000</color>
  7. <color name="text_color">#5997e2</color>
  8. </resources>

2.2 值 dimens.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <dimen name="icon_size">20dp</dimen>
  4. <!-- 登录界面图标尺寸 -->
  5. <dimen name="icon_size_login_bg">50dp</dimen>
  6. <dimen name="icon_size_login">40dp</dimen>
  7. <dimen name="icon_size_login_press">55dp</dimen>
  8. <dimen name="icon_size_login_small">15dp</dimen>
  9. <!-- 登录界面文字大小 -->
  10. <dimen name="margin_top_text_login">7dp</dimen>
  11. <!-- 登录界面文字marginTop值 -->
  12. <dimen name="text_size_login">14sp</dimen>
  13. <!-- logo尺寸 -->
  14. <dimen name="logo_width">150dp</dimen>
  15. <dimen name="logo_height">30dp</dimen>
  16. </resources>

3、图形

3.1 四个按钮

3.1.1 忘记密码 forget_pwd_bg.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval"
  4. >
  5. <solid android:color="#ff5454"/>
  6. <size android:width="@dimen/icon_size_login"
  7. android:height="@dimen/icon_size_login"
  8. />
  9. </shape>

3.1.2 一键注册 register_bg.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval"
  4. >
  5. <solid android:color="#ccb05a"/>
  6. <size android:width="@dimen/icon_size_login"
  7. android:height="@dimen/icon_size_login"
  8. />
  9. </shape>

3.1.3 已有账号登录 register_ed_bg.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval"
  4. >
  5. <solid android:color="#5acc7d"/>
  6. <size android:width="@dimen/icon_size_login"
  7. android:height="@dimen/icon_size_login"
  8. />
  9. </shape>

3.1.4 游客模式 visitor_bg.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval"
  4. >
  5. <solid android:color="#478ce0"/>
  6. <size android:width="@dimen/icon_size_login"
  7. android:height="@dimen/icon_size_login"
  8. />
  9. </shape>

代码中打开页面代码:

  1. private void openHomeView(){
  2. final AlertDialog dialog = new AlertDialog.Builder(LeitingActivityUtils.getActivity()).create();
  3. dialog.show();
  4. final Window window = dialog.getWindow();
  5. window.setContentView(R.layout.home);
  6. // 获取宽高
  7. WindowManager wm = window.getWindowManager();
  8. final int height = wm.getDefaultDisplay().getHeight();
  9. final int width = wm.getDefaultDisplay().getWidth();
  10. LayoutParams lp = window.getAttributes();
  11. // 设置窗体的宽高
  12. lp.height = (int)(height * 0.7);
  13. lp.width = (int)(width * 0.7);
  14. window.setAttributes(lp);
  15. ImageView forgetPwd = (ImageView) window.findViewById(R.id.forget_pwd);
  16. ImageView register = (ImageView) window.findViewById(R.id.regiser);
  17. ImageView registeredLogin = (ImageView) window.findViewById(R.id.registered_login);
  18. ImageView visitor = (ImageView) window.findViewById(R.id.visitor);
  19. // 已有账号登录
  20. registeredLogin.setOnClickListener(new View.OnClickListener() {
  21. @Override
  22. public void onClick(View v) {
  23. // 打开已有账号登录界面
  24. window.setContentView(R.layout.login);
  25. }
  26. });
  27. }

成品展示:

Center

发表评论

表情:
评论列表 (有 0 条评论,253人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Android Home键监听

    Android Home键监听 有时候我们在我们需要监听Home键的事件,关闭整个程序或者做其他事情,我接手的几个蓝牙项目都是要监听Home键事件,并彻底退出程序,防止程