android布局实践（一）home界面

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

1、主界面home.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" >
        
        
        <RelativeLayout 
            android:id="@+id/logo"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_marginTop="6dp"
            android:layout_marginBottom="4dp"
            >
            <ImageView 
                android:id="@+id/leiting_logo"
                android:layout_width="@dimen/logo_width"
                android:layout_height="@dimen/logo_height"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:background="@drawable/logo"
                />
            <ImageView 
                android:layout_width="@dimen/icon_size"
                android:layout_height="@dimen/icon_size"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:background="@drawable/left"
                android:layout_marginLeft="15dp"
                />
            <ImageView 
                android:layout_width="@dimen/icon_size"
                android:layout_height="@dimen/icon_size"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="@drawable/close"
                android:layout_marginRight="15dp"
                />
        </RelativeLayout>
        
        
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:orientation="vertical"
            android:layout_marginBottom="35dp"
            >
            
            <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:orientation="vertical"
                >
                <TextView 
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:text="选择进入方式"
                    android:textColor="@color/text_color"
                    android:textSize="16sp"
                    />
                
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:layout_marginTop="10dp"
                     >
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:gravity="center_horizontal"
                        >
                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            >
                            <ImageView
                                android:layout_width="@dimen/icon_size_login_bg"
                                android:layout_height="@dimen/icon_size_login_bg"
                                android:background="@drawable/forget_pwd_bg" />
                            <ImageView
                                android:layout_centerInParent="true"
                                android:layout_width="@dimen/icon_size_login"
                                android:layout_height="@dimen/icon_size_login"
                                android:background="@drawable/lock_13" />
                        </RelativeLayout>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginTop="@dimen/margin_top_text_login"
                            android:text="忘记密码"
                            android:textColor="@color/black"
                            android:textSize="@dimen/text_size_login" />
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:gravity="center_horizontal"
                        >
                        <RelativeLayout
                            android:layout_width="@dimen/icon_size_login_bg"
                            android:layout_height="@dimen/icon_size_login_bg"
                            >
                            <ImageView
                                android:layout_width="@dimen/icon_size_login_bg"
                                android:layout_height="@dimen/icon_size_login_bg"
                                android:background="@drawable/register_bg" />
                            <ImageView
                                android:layout_centerInParent="true"
                                android:layout_width="@dimen/icon_size_login"
                                android:layout_height="@dimen/icon_size_login"
                                android:background="@drawable/phone_16_60" />
                            <ImageView
                                android:layout_alignParentRight="true"
                                android:layout_alignParentTop="true"
                                android:layout_width="@dimen/icon_size_login_small"
                                android:layout_height="@dimen/icon_size_login_small"
                                android:background="@drawable/icon_38" />
                        </RelativeLayout>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginTop="@dimen/margin_top_text_login"
                            android:text="一键注册"
                            android:textColor="@color/black"
                            android:textSize="@dimen/text_size_login" />
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:gravity="center_horizontal"
                        >
                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            >
                            <ImageView
                                android:layout_width="@dimen/icon_size_login_bg"
                                android:layout_height="@dimen/icon_size_login_bg"
                                android:background="@drawable/register_ed_bg" />
                            <ImageView
                                android:layout_centerInParent="true"
                                android:layout_width="@dimen/icon_size_login"
                                android:layout_height="@dimen/icon_size_login"
                                android:background="@drawable/person_15_59" />
                        </RelativeLayout>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginTop="@dimen/margin_top_text_login"
                            android:text="已有账号登录"
                            android:textColor="@color/black"
                            android:textSize="@dimen/text_size_login" />
                    </LinearLayout>
                    
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:gravity="center_horizontal"
                        >
                        <RelativeLayout
                            android:layout_width="@dimen/icon_size_login_bg"
                            android:layout_height="@dimen/icon_size_login_bg"
                            android:gravity="center"
                            >
                            <ImageView
                                android:layout_width="@dimen/icon_size_login_bg"
                                android:layout_height="@dimen/icon_size_login_bg"
                                android:background="@drawable/visitor_bg" />
                            <ImageView
                                android:layout_centerInParent="true"
                                android:layout_width="@dimen/icon_size_login"
                                android:layout_height="@dimen/icon_size_login"
                                android:background="@drawable/lightning14_58" />
                            <ImageView
                                android:layout_alignParentRight="true"
                                android:layout_alignParentTop="true"
                                android:layout_width="@dimen/icon_size_login_small"
                                android:layout_height="@dimen/icon_size_login_small"
                                android:background="@drawable/icon_38" />
                        </RelativeLayout>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginTop="@dimen/margin_top_text_login"
                            android:text="游客模式"
                            android:textColor="@color/black"
                            android:textSize="@dimen/text_size_login" />
                    </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>  
    </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">15dp</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>
    </resources>

3、图形

3.1 四个按钮

3.1.1 忘记密码 forget\_pwd\_bg.xml

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

3.1.2 一键注册 register\_bg.xml

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

3.1.3 已有账号登录 register\_ed\_bg.xml

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

3.1.4 游客模式 visitor\_bg.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
           android:shape="oval"
           >
        
    	<solid android:color="#478ce0"/>
    	
    	<size android:width="@dimen/icon_size_login"
    	      android:height="@dimen/icon_size_login"
    	    />
    </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]: /images/20220731/4bf9aaa46ab84f2db95e988366d33242.png