UI常用布局

UI常用的布局
LineaLayout:
线性布局
重要属性：
-orientation方向 分为水平，垂直
-layout-Weight(权重)
效果图//------------------------------

image.png
--------------------------------代码如下-----------
···
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="To"
    >
</EditText>

<EditText
    android:id="@+id/editText2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
     android:hint="Subject"
     />

<EditText
    android:id="@+id/editText3"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="top"
    android:hint="massage"
    />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="reset" 
        
        android:layout_weight="1"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        
        android:text="send"
         android:layout_weight="1"
        
        />

</LinearLayout>

</LinearLayout>
···
RelativeLayout
相对布局：
兄弟视图：同方向对齐，反方先对齐
与父视图之间：同方向对齐，居中
-----------效果图-------

image.png
---------------------代码如下------------------
···
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<EditText
    android:id="@+id/ed_retive_massage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:hint="Message"
    
     >
</EditText>

<Button
    android:id="@+id/btn_revtie_ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/ed_retive_massage"
    android:text="Ok" />

<Button
    android:id="@+id/btn_revtie_cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancel"
   android:layout_alignTop="@id/btn_revtie_ok"
   android:layout_toLeftOf="@id/btn_revtie_ok"
   android:layout_marginRight="10dp"
  
     />

</RelativeLayout>

···
FrameLayout
帧布局：
默认以屏幕左上角为（0,0）
-------------------效果图-----------

image.png

----------------代码如下-------------------
···
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="280dp"
android:layout_height="280dp"
android:background="#33FFFF"
android:layout_gravity="center"
/>
<TextView
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#33CCFF"
android:layout_gravity="center"
/>

<TextView 
    android:layout_width="180dp"
    android:layout_height="180dp"
    android:background="#3399FF"
    android:layout_gravity="center"
    />
<TextView 
    android:layout_width="140dp"
    android:layout_height="140dp"
    android:background="#3366FF"
    android:layout_gravity="center"
    />
<TextView 
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#3300FF"
    android:layout_gravity="center"
    />

</FrameLayout>

···
属性的划分

image.png

内边距与外边距

image.png image.png

--------------效果图----------------

image.png
-----------------------代码如下-----------------
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<EditText
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
   android:layout_margin="20dp"
    android:paddingLeft="60dp"
   android:hint="Message"
  
    
    />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/textView1"
   android:layout_below="@+id/textView1"
  
    android:layout_marginTop="20dp"
    android:text="OK" />

</RelativeLayout>
TableLayout:
表格布局：
---------------效果图------------

image.png

---------------------代码如下-----------
···
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="1241"
android:gravity="center"
android:layout_weight="1"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="哈哈"
android:gravity="center"
android:layout_weight="1"
/>

</TableRow>
    <TableRow 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <TextView 
     android:layout_width="0dp"
    android:layout_height="wrap_content"
        android:text="1241"
        android:gravity="center"
        android:layout_weight="1"
        />
    <TextView 
     android:layout_width="0dp"
    android:layout_height="wrap_content"
        android:text="哈哈"
        android:gravity="center"
        android:layout_weight="1"
        />
   
    
</TableRow>

</TableLayout>

···
相对父视图定位

image.png

相对兄弟视图定位：

image.png