android布局实践（二）login界面

傷城~ 2022-08-20 11:28 353阅读 0赞

1、主界面login.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" >
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:background="@color/white"
  12.         android:layout_margin="20dp"
  13.         android:orientation="vertical" >
  15.         <!-- 输入框内容 -->
  16.         <LinearLayout
  17.             android:layout_width="match_parent"
  18.             android:layout_height="0dp"
  19.             android:layout_weight="3"
  20.             android:layout_marginBottom="20dp"
  21.             android:orientation="horizontal"
  22.             >
  23.             <!-- logo -->
  24.             <LinearLayout
  25.                 android:layout_width="0dp"
  26.                 android:layout_height="match_parent"
  27.                 android:layout_weight="1" 
  28.                 android:background="@drawable/logo4"
  29.                 >
  30.             </LinearLayout>
  31.             <!-- 输入框 -->
  32.             <LinearLayout
  33.                 android:layout_width="0dp"
  34.                 android:layout_height="match_parent"
  35.                 android:layout_weight="2" 
  36.                 android:layout_marginLeft="20dp"
  37.                 android:orientation="vertical"
  38.                 >
  39.                 <!-- 账号-->
  40.                 <LinearLayout
  41.                     android:layout_width="match_parent"
  42.                     android:layout_height="0dp"
  43.                     android:layout_weight="1"
  44.                     android:background="@drawable/login_username"
  45.                     android:layout_marginBottom="8dp"
  46.                     >
  47.                     <RelativeLayout 
  48.                         android:layout_width="match_parent"
  49.                         android:layout_height="match_parent"
  50.                         >
  51.                         <EditText 
  52.                             android:id="@+id/username"
  53.                             android:layout_width="match_parent"
  54.                             android:layout_height="match_parent"
  55.                             android:layout_marginLeft="15sp"
  56.                             android:layout_marginRight="15sp"
  57.                             android:hint="请输入雷霆账号"
  58.                             android:textColor="@android:color/darker_gray"
  59.                             android:background="@null"
  60.                             />
  61.                         <ImageView 
  62.                             android:layout_width="20dp"
  63.                             android:layout_height="20dp"
  64.                             android:background="@drawable/list_20_50"
  65.                             android:layout_centerVertical="true"
  66.                             android:layout_alignRight="@id/username"
  67.                             />
  68.                     </RelativeLayout>
  69.                 </LinearLayout>
  70.                 <!-- 密码-->
  71.                 <LinearLayout
  72.                     android:layout_width="match_parent"
  73.                     android:layout_height="0dp"
  74.                     android:layout_weight="1"
  75.                     android:background="@drawable/login_username"
  76.                     android:layout_marginBottom="8dp"
  77.                     >
  78.                     <EditText
  79.                         android:id="@+id/password"
  80.                         android:layout_width="match_parent"
  81.                         android:layout_height="match_parent"
  82.                         android:layout_marginLeft="15sp"
  83.                         android:layout_marginRight="15sp"
  84.                         android:background="@null"
  85.                         android:hint="请输入登录密码"
  86.                         android:inputType="textPassword"
  87.                         android:textColor="@android:color/darker_gray" />
  89.                 </LinearLayout>
  90.                 <!-- 确认按钮-->
  91.                 <LinearLayout
  92.                     android:layout_width="match_parent"
  93.                     android:layout_height="0dp"
  94.                     android:layout_weight="1"
  95.                     android:background="#478ce0"
  96.                     android:gravity="center"
  97.                     >
  98.                     <TextView 
  99.                         android:id="@+id/login_submit"
  100.                         android:layout_width="wrap_content"
  101.                         android:layout_height="wrap_content"
  102.                         android:text="登录"
  103.                         android:textColor="@color/white"
  104.                         android:textSize="20sp"
  105.                         android:layout_gravity="center"
  106.                         />
  107.                 </LinearLayout>
  109.             </LinearLayout>
  111.         </LinearLayout>
  113.         <LinearLayout
  114.             android:layout_width="match_parent"
  115.             android:layout_height="0dp"
  116.             android:layout_weight="1"
  117.             android:orientation="vertical" >
  119.             <!-- 分隔符 -->
  120.             <LinearLayout
  121.                 android:layout_width="match_parent"
  122.                 android:layout_height="1dp"
  123.                 android:background="@android:color/darker_gray" >
  124.             </LinearLayout>
  126.             <!-- 4个链接 -->
  127.             <LinearLayout
  128.                 android:layout_width="match_parent"
  129.                 android:layout_height="match_parent"
  130.                 android:layout_marginTop="10dp"
  131.                 android:orientation="horizontal"
  132.                 >
  133.                 <!-- 修改密码 -->
  134.                 <LinearLayout
  135.                     android:layout_width="0dp"
  136.                     android:layout_height="match_parent"
  137.                     android:layout_weight="1" >
  138.                     <LinearLayout 
  139.                         android:layout_width="match_parent"
  140.                         android:layout_height="match_parent"
  141.                         android:gravity="center_vertical"
  142.                         >
  143.                         <ImageView 
  144.                             android:layout_width="@dimen/login_link_size"
  145.                             android:layout_height="@dimen/login_link_size"
  146.                             android:background="@drawable/lock"
  147.                             />
  148.                         <TextView 
  149.                             android:layout_width="wrap_content"
  150.                             android:layout_height="wrap_content"
  151.                             android:text="修改密码"
  152.                             android:textColor="@color/login_link_text_color"
  153.                             />
  154.                     </LinearLayout>
  155.                 </LinearLayout>
  156.                 <!-- 分隔符 -->
  157.                 <LinearLayout
  158.                     android:layout_width="1dp"
  159.                     android:layout_height="match_parent"
  160.                     android:background="@android:color/darker_gray" >
  161.                 </LinearLayout>
  162.                 <!-- 忘记密码 -->
  163.                 <LinearLayout
  164.                     android:layout_width="0dp"
  165.                     android:layout_height="match_parent"
  166.                     android:layout_weight="1" >
  167.                     <LinearLayout 
  168.                         android:layout_width="match_parent"
  169.                         android:layout_height="match_parent"
  170.                         android:gravity="center_vertical"
  171.                         >
  172.                         <ImageView 
  173.                             android:layout_width="@dimen/login_link_size"
  174.                             android:layout_height="@dimen/login_link_size"
  175.                             android:background="@drawable/lock_open"
  176.                             android:layout_marginLeft="5dp"
  177.                             />
  178.                         <TextView 
  179.                             android:layout_width="wrap_content"
  180.                             android:layout_height="wrap_content"
  181.                             android:text="忘记密码"
  182.                             android:textColor="@color/login_link_text_color"
  183.                             />
  184.                     </LinearLayout>
  185.                 </LinearLayout>
  186.                 <!-- 分隔符 -->
  187.                 <LinearLayout
  188.                     android:layout_width="1dp"
  189.                     android:layout_height="match_parent"
  190.                     android:background="@android:color/darker_gray" >
  191.                 </LinearLayout>
  192.                 <!-- 注册账号 -->
  193.                 <LinearLayout
  194.                     android:layout_width="0dp"
  195.                     android:layout_height="match_parent"
  196.                     android:layout_weight="1" >
  197.                     <LinearLayout 
  198.                         android:layout_width="match_parent"
  199.                         android:layout_height="match_parent"
  200.                         android:gravity="center_vertical"
  201.                         >
  202.                         <ImageView 
  203.                             android:layout_width="@dimen/login_link_size"
  204.                             android:layout_height="@dimen/login_link_size"
  205.                             android:background="@drawable/person_05"
  206.                             android:layout_marginLeft="5dp"
  207.                             />
  208.                         <TextView 
  209.                             android:layout_width="wrap_content"
  210.                             android:layout_height="wrap_content"
  211.                             android:text="注册账号"
  212.                             android:textColor="@color/login_link_text_color"
  213.                             />
  214.                     </LinearLayout>
  215.                 </LinearLayout>
  216.                 <!-- 分隔符 -->
  217.                 <LinearLayout
  218.                     android:layout_width="1dp"
  219.                     android:layout_height="match_parent"
  220.                     android:background="@android:color/darker_gray" >
  221.                 </LinearLayout>
  222.                 <!-- 联系客服 -->
  223.                 <LinearLayout
  224.                     android:layout_width="0dp"
  225.                     android:layout_height="match_parent"
  226.                     android:layout_weight="1" >
  227.                     <LinearLayout 
  228.                         android:layout_width="match_parent"
  229.                         android:layout_height="match_parent"
  230.                         android:gravity="center_vertical"
  231.                         >
  232.                         <ImageView 
  233.                             android:layout_width="@dimen/login_link_size"
  234.                             android:layout_height="@dimen/login_link_size"
  235.                             android:background="@drawable/service_06"
  236.                             android:layout_marginLeft="5dp"
  237.                             />
  238.                         <TextView 
  239.                             android:layout_width="wrap_content"
  240.                             android:layout_height="wrap_content"
  241.                             android:text="联系客服"
  242.                             android:textColor="@color/login_link_text_color"
  243.                             />
  244.                     </LinearLayout>
  245.                 </LinearLayout>
  247.             </LinearLayout>
  248.         </LinearLayout>
  249.     </LinearLayout>
  251. </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.     <color name="login_link_text_color">#5997e2</color>  
  9. </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">13dp</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.     <!-- 登录界面4个链接的尺寸 -->
  17.     <dimen name="login_link_size">30dp</dimen>
  18. </resources>

3、图形

3.1 输入框样式 login_username.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <stroke 
  4.         android:width="1dp"
  5.         android:color="@android:color/darker_gray"
  6.         />
  7. </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);
  16.     ImageView forgetPwd = (ImageView) window.findViewById(R.id.forget_pwd);
  17.     ImageView register = (ImageView) window.findViewById(R.id.regiser);
  18.     ImageView registeredLogin = (ImageView) window.findViewById(R.id.registered_login);
  19.     ImageView visitor = (ImageView) window.findViewById(R.id.visitor);
  21.     // 已有账号登录
  22.     registeredLogin.setOnClickListener(new View.OnClickListener() {
  23.         @Override
  24.         public void onClick(View v) {
  25.             // 打开已有账号登录界面
  26.             window.setContentView(R.layout.login);
  27.         }
  28.     });
  29. }

成品展示：

Center

Center 1

发表评论

表情：
评论列表 （有 0 条评论，353人围观）

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

相关阅读