android布局实践（二）login界面

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

1、主界面login.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="vertical" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:layout_margin="20dp"
            android:orientation="vertical" >
    
            
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="3"
                android:layout_marginBottom="20dp"
                android:orientation="horizontal"
                >
                
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" 
                    android:background="@drawable/logo4"
                    >
                </LinearLayout>
                
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="2" 
                    android:layout_marginLeft="20dp"
                    android:orientation="vertical"
                    >
                    
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/login_username"
                        android:layout_marginBottom="8dp"
                        >
                        <RelativeLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            >
                            <EditText 
                                android:id="@+id/username"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_marginLeft="15sp"
                                android:layout_marginRight="15sp"
                                android:hint="请输入雷霆账号"
                                android:textColor="@android:color/darker_gray"
                                android:background="@null"
                                />
                            <ImageView 
                                android:layout_width="20dp"
                                android:layout_height="20dp"
                                android:background="@drawable/list_20_50"
                                android:layout_centerVertical="true"
                                android:layout_alignRight="@id/username"
                                />
                        </RelativeLayout>
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/login_username"
                        android:layout_marginBottom="8dp"
                        >
                        <EditText
                            android:id="@+id/password"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_marginLeft="15sp"
                            android:layout_marginRight="15sp"
                            android:background="@null"
                            android:hint="请输入登录密码"
                            android:inputType="textPassword"
                            android:textColor="@android:color/darker_gray" />
    
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="#478ce0"
                        android:gravity="center"
                        >
                        <TextView 
                            android:id="@+id/login_submit"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="登录"
                            android:textColor="@color/white"
                            android:textSize="20sp"
                            android:layout_gravity="center"
                            />
                    </LinearLayout>
    
                </LinearLayout>
    
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="vertical" >
    
                
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@android:color/darker_gray" >
                </LinearLayout>
                
                
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="10dp"
                    android:orientation="horizontal"
                    >
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1" >
                        <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            >
                            <ImageView 
                                android:layout_width="@dimen/login_link_size"
                                android:layout_height="@dimen/login_link_size"
                                android:background="@drawable/lock"
                                />
                            <TextView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="修改密码"
                                android:textColor="@color/login_link_text_color"
                                />
                        </LinearLayout>
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent"
                        android:background="@android:color/darker_gray" >
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1" >
                        <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            >
                            <ImageView 
                                android:layout_width="@dimen/login_link_size"
                                android:layout_height="@dimen/login_link_size"
                                android:background="@drawable/lock_open"
                                android:layout_marginLeft="5dp"
                                />
                            <TextView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="忘记密码"
                                android:textColor="@color/login_link_text_color"
                                />
                        </LinearLayout>
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent"
                        android:background="@android:color/darker_gray" >
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1" >
                        <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            >
                            <ImageView 
                                android:layout_width="@dimen/login_link_size"
                                android:layout_height="@dimen/login_link_size"
                                android:background="@drawable/person_05"
                                android:layout_marginLeft="5dp"
                                />
                            <TextView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="注册账号"
                                android:textColor="@color/login_link_text_color"
                                />
                        </LinearLayout>
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent"
                        android:background="@android:color/darker_gray" >
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1" >
                        <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            >
                            <ImageView 
                                android:layout_width="@dimen/login_link_size"
                                android:layout_height="@dimen/login_link_size"
                                android:background="@drawable/service_06"
                                android:layout_marginLeft="5dp"
                                />
                            <TextView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="联系客服"
                                android:textColor="@color/login_link_text_color"
                                />
                        </LinearLayout>
                    </LinearLayout>
    
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    
    </LinearLayout>

2、数值

2.1 颜色 color.xml

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="transparent_background">#50000000</color>
        <color name="red">#FF0000</color>  
        <color name="white">#FFFFFF</color>
        <color name="black">#000000</color>  
        <color name="text_color">#5997e2</color>  
        <color name="login_link_text_color">#5997e2</color>  
    </resources>

2.2 值 dimens.xml

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <dimen name="icon_size">20dp</dimen>
        
        <dimen name="icon_size_login_bg">50dp</dimen>
        <dimen name="icon_size_login">40dp</dimen>
        <dimen name="icon_size_login_press">55dp</dimen>
        <dimen name="icon_size_login_small">13dp</dimen>
        
        <dimen name="margin_top_text_login">7dp</dimen>
        
        <dimen name="text_size_login">14sp</dimen>
        
        <dimen name="logo_width">150dp</dimen>
        <dimen name="logo_height">30dp</dimen>
        
        <dimen name="login_link_size">30dp</dimen>
    </resources>

3、图形

3.1 输入框样式 login\_username.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke 
            android:width="1dp"
            android:color="@android:color/darker_gray"
            />
    </shape>

代码中打开页面代码：

private void openHomeView(){
    	final AlertDialog dialog = new AlertDialog.Builder(LeitingActivityUtils.getActivity()).create();
    	dialog.show();
    	final Window window = dialog.getWindow();
    	window.setContentView(R.layout.home);
    	// 获取宽高
    	WindowManager wm = window.getWindowManager();
    	final int height = wm.getDefaultDisplay().getHeight();
    	final int width = wm.getDefaultDisplay().getWidth();
    	LayoutParams lp = window.getAttributes();
    	// 设置窗体的宽高
    	lp.height = (int)(height * 0.7);
    	lp.width  = (int)(width * 0.7);
    	window.setAttributes(lp);
    	
    	ImageView forgetPwd = (ImageView) window.findViewById(R.id.forget_pwd);
    	ImageView register = (ImageView) window.findViewById(R.id.regiser);
    	ImageView registeredLogin = (ImageView) window.findViewById(R.id.registered_login);
    	ImageView visitor = (ImageView) window.findViewById(R.id.visitor);
    	
    	// 已有账号登录
    	registeredLogin.setOnClickListener(new View.OnClickListener() {
    		@Override
    		public void onClick(View v) {
    			// 打开已有账号登录界面
    			window.setContentView(R.layout.login);
    		}
    	});
    }

成品展示：

![Center][]

![Center 1][]

[Center]: /images/20220731/6b5be9d31af94c26bbee83b27892010a.png
[Center 1]: /images/20220731/b33813bdf2664ffb8efb41a5beffe63e.png