08: Experiments in user interface design

5-1 Realize the relative layout design of the system design page of personal financial communication

//RelativeLayout 相对布局管理器 xmlns:android命名空间的声明
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    //xmlns:tools布局默认工具
    android:layout_width="match_parent"
    //屏幕上所占的宽度
    android:layout_height="match_parent"
    //屏幕上所占的高度
    tools:context=".MainActivity" >
	
	//文本框
 	<TextView
        android:id="@+id/h1"
        //设置组件的唯一标识符
        android:layout_width="wrap_content"
        //所占宽度
        android:layout_height="wrap_content"
        //所占高度
        android:text="请输入密码：" 
        android:textSize="20sp"/>
    //编辑框
	<EditText 
	    android:id="@+id/h2"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    //内隐的提示框
	    android:hint="请输入密码："
	    android:textSize="15sp"
	    android:layout_below="@id/h1"
	    //android:layout_below其属性值为其他UI组件的Id属性用于指定该组件位于哪个组件的下方
	    android:inputType="textPassword"
	    />
	 //按钮
	<Button 
	    android:id="@+id/quxiao"
	    android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		//在属性H2的下方
	    android:layout_below="@id/h2"
	    android:layout_alignParentRight="true"
	    //layout_alignParentRight 用于指定该组件是否与布局管理器右对齐
	    android:text="取消"
	    />
	<Button 
	    android:id="@+id/queding"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="设置"
	    android:layout_toLeftOf="@id/quxiao"
	    //位于该组件的左侧
	    android:layout_below="@id/h2"
	    //位于该组件的下方
	    />
</RelativeLayout>

The text box tvPwd is displayed in the upper left corner of the screen by default, and then the edit box is set at the bottom, and the setting cancel is located below the edit box and aligned to the right of the parent container. Finally, the setting button is located below the edit box and not to the left

5-2 Linear layout design the new note page of Personal Finance

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" 
    android:orientation="vertical">

   <TextView 
        android:id="@+id/tv1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="新增便签"
        android:textSize="30sp"
        android:textStyle="bold"
        android:layout_gravity="center"
        />
 	<TextView 
        android:id="@+id/tv2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="请输入便签，最多输入200字"
        android:textSize="20sp"
        /> 
    <EditText 
        android:id="@+id/ed1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
		android:lines="10"
		android:gravity="top"
        /> 
        <RelativeLayout   
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
             <Button
	        android:id="@+id/btn1" 
	        android:layout_height="wrap_content"
	        android:layout_width="wrap_content"
	        android:text="取消"
	        android:textSize="25dp"
			android:layout_alignParentRight="true"
			android:layout_marginLeft="20dp"
	        />
	    <Button 
	        android:layout_height="wrap_content"
	        android:layout_width="wrap_content"
	        android:text="保存"
	        android:textSize="25dp"
			android:layout_toLeftOf="@id/btn1"
	        />  
            
          </RelativeLayout>
</LinearLayout>