【攻克Android (5)】布局

阅读更多
本文围绕以下八个部分展开:

一、布局(Layout)
二、线性布局(Linear Layout)
三、相对布局(Relative Layout)
四、帧布局(Frame Layout)
五、表格布局(Table Layout)
六、网格布局(Grid Layout)
七、小结

附  补充代码






一、布局(Layout)

        布局是不可见的容器(ViewGroup),它定义UI的可视化结构,通过布局参数(LayoutParams)定义子元素的尺寸、位置。

【攻克Android (5)】布局_第1张图片


【攻克Android (5)】布局_第2张图片



二、线性布局(Linear Layout)

        子元素被排成一行或一列。使用orientation属性设置方向:horizontal(水平)、vertical(垂直)

        1. 实现以下效果:

【攻克Android (5)】布局_第3张图片


        (1)新建 LinearLayoutActivity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。

【攻克Android (5)】布局_第4张图片


   
 


        (2)在 strings.xml 中添加需要的文本。

   
   收件人  
   主题  
   邮件内容  
   存为草稿  
   发送  
   线性布局1 


        (3)在主界面(activity_main.xml)中,放一个按钮,点击该按钮,可跳至该线性布局界面。

   
   
   


        (4)在主活动(MainActivity)中写事件,实现点击主界面按钮,可跳至线性布局界面。

 package com.xiangdong.layout;  
   
 import android.content.Intent;  
 import android.support.v7.app.ActionBarActivity;  
 import android.os.Bundle;  
 import android.view.Menu;  
 import android.view.MenuItem;  
 import android.view.View;  
   
   
 public class MainActivity extends ActionBarActivity {  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
     }  
   
     public void onClick(View view){  
         Intent intent = null;  
         switch (view.getId()){  
             case R.id.btnLinearLayout:  
                 intent = new Intent(this,LinearLayoutActivity.class);  
                 break;  
         }  
         startActivity(intent);  
     }  
   
   
     @Override  
     public boolean onCreateOptionsMenu(Menu menu) {  
         // Inflate the menu; this adds items to the action bar if it is present.  
         getMenuInflater().inflate(R.menu.menu_main, menu);  
         return true;  
     }  
   
     @Override  
     public boolean onOptionsItemSelected(MenuItem item) {  
         // Handle action bar item clicks here. The action bar will  
         // automatically handle clicks on the Home/Up button, so long  
         // as you specify a parent activity in AndroidManifest.xml.  
         int id = item.getItemId();  
   
         //noinspection SimplifiableIfStatement  
         if (id == R.id.action_settings) {  
             return true;  
         }  
   
         return super.onOptionsItemSelected(item);  
     }  
 }


        (5)在 activity_linear_layout.xml 中写该线性布局界面。

   
   
     
   
     
   
     
   
     
   
     


        2. 权重

        线性布局给子元素分配空间(宽或高)后,把剩余空间按比例分配给设置了 layout_weight 的元素。
        当布局orientation="horizontal",设置子元素layout_width="0dp"
        当布局orientation="vertical",设置子元素layout_height="0dp"

        实现以下效果:

【攻克Android (5)】布局_第5张图片


        (1)新建 LinearLayout2Activity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。
        (2)在主界面(activity_main.xml)中,加一个按钮,点击该按钮,可跳至该线性布局界面。
        (3)在主活动(MainActivity)中加一个switch判断的事件,实现点击主界面按钮,可跳至线性布局界面。
        (4)在 activity_linear_layout2.xml 中写该线性布局界面。

   
   
   
   
     
   
       
   
       
   
       
     
   
     
   
       
   
       
   
       
     
   
     
   
       
   
       
   
       
     
   
     
   
       
   
       
   
       
     
   
     
   
       
   
       
   
       
     
   
     
   
       
   
   
     
  
     
   
       
   
       
   
       
     
   
   
 


        3. layout_gravity 和 gravity

        layout_gravity:元素在父元素(布局)中的位置。
        gravity:内容或子元素在元素(布局或控件)中的位置。

        二者各自可以取的值如下:

【攻克Android (5)】布局_第6张图片


        实现以下效果:

【攻克Android (5)】布局_第7张图片


        (1)新建 LinearLayout3Activity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。

        (2)在主界面(activity_main.xml)中,加一个按钮,点击该按钮,可跳至该线性布局界面。

        (3)在主活动(MainActivity)中加一个switch判断的事件,实现点击主界面按钮,可跳至线性布局界面。

        (4)在 activity_linear_layout3.xml 中写该线性布局界面。

   
   
   
   
     
   
     



三、相对布局(Relative Layout)

        元素在相对位置显示。可相对父元素(布局),也可以相对兄弟元素。
        可避免嵌套,保持简洁的层次结构,提升性能。

【攻克Android (5)】布局_第8张图片


【攻克Android (5)】布局_第9张图片


        实现以下效果:

【攻克Android (5)】布局_第10张图片


        (1)新建 RelativeLayoutActivity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。

        (2)在 strings.xml 中添加需要的文本。

   
   微信  
   \@we_chat  
   11:28  
   回复  
   转发  
     
     1.可以发语音、文字消息、表情、图片、视频。30M流量可以收发上千条语音。  
     2.朋友圈,跟朋友们分享生活点滴。  
     3.摇一摇、查看附近的人,世界不再有陌生人。  
     4.扫一扫,可以扫商品条码、图书封面、CD封面,甚至扫描英文单词来翻译成中文。  
     5.公众帐号,用微信关注明星、看新闻、设提醒…  
     
   相对布局


        (3)在主界面(activity_main.xml)中,加一个按钮,点击该按钮,可跳至该相对布局界面。

        (4)在主活动(MainActivity)中加一个switch判断的事件,实现点击主界面按钮,可跳至相对布局界面。

        (5)在 activity_relative_layout.xml 中写该相对布局界面。

   
   
     
   
     
   
     
   
     
   
     
   
   



四、帧布局(Frame Layout)

        子元素逐个放入栈中(会重叠),最后添加的子元素显示在最上面。

        1. 实现以下效果:

【攻克Android (5)】布局_第11张图片


        (1)新建 FrameLayoutActivity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。

        (2)在主界面(activity_main.xml)中,加一个按钮,点击该按钮,可跳至该帧布局界面。

        (3)在主活动(MainActivity)中加一个switch判断的事件,实现点击主界面按钮,可跳至帧布局界面。

        (4)在 activity_frame_layout.xml 中写该帧布局界面。

   
   
   
   
     
   
   
     
   
     
 


        2. 实现以下效果:

【攻克Android (5)】布局_第12张图片


        (1)新建 FrameLayout2Activity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。

        (2)在主界面(activity_main.xml)中,加一个按钮,点击该按钮,可跳至该线性布局界面。

        (3)在主活动(MainActivity)中加一个switch判断的事件,实现点击主界面按钮,可跳至线性布局界面。

        (4)在 activity_frame_layout2.xml 中写该线性布局界面。

   
   
     
   
   
       
   
       
     
   
     
   
       
     
      
 



五、表格布局(Table Layout)

        表格布局没有边框,由多个TableRow(行)构成,每行有多个单元格(不能设置宽),其中可放置子元素。
        表格布局是线性布局的子类,是嵌套的线性布局。
        layout_column:设置子元素在行中的位置(从0开始)。
        layout_span:合并多个单元格。

【攻克Android (5)】布局_第13张图片


        可以为单元格设置如下三种行为方式:

            (1)Shrinkable:如果某列被设为Shrinkable,那么该列的所有单元格的宽度可以被收缩,以保证该表格能适应父容器的宽度。

            (2)Stretchable:如果某个列被设为Stretchable,那么该列的所有单元格的宽度可以被拉伸,以保证组件能完全填满表格空余空间。

            (3)Collapsed:如果某个列被设为Collapsed,那么该列的所有单元格会被隐藏。



            实现以下效果:

【攻克Android (5)】布局_第14张图片


        (1)新建 TableLayoutActivity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。

        (2)在主界面(activity_main.xml)中,加一个按钮,点击该按钮,可跳至该表格布局界面。

        (3)在主活动(MainActivity)中加一个switch判断的事件,实现点击主界面按钮,可跳至表格布局界面。

        (4)在 activity_table_layout.xml 中写该表格布局界面。

   
   
   
     
   
       
   
       
     
   
     
   
       
   
       
     
   
     
   
       
   
       
   
         
   
         
       
     
   
     
   
       
   
       
   
       
   
       
     
   
 



六、网格布局(Grid Layout)

【攻克Android (5)】布局_第15张图片


        实现以下效果:

【攻克Android (5)】布局_第16张图片


        (1)新建 GridLayoutActivity ,然后在 AndroidManifest.xml 配置文件中,添加返回主界面的功能。

        (2)在主界面(activity_main.xml)中,加一个按钮,点击该按钮,可跳至该网格布局界面。

        (3)在主活动(MainActivity)中加一个switch判断的事件,实现点击主界面按钮,可跳至网格布局界面。

        (4)在 activity_grid_layout.xml 中写该网格布局界面。

   
   
   
     
   
     

     
   
     
   
     
   
     
   
       
   
       
     
   
     
   
     
   
     
   
     
 



七、小结

        1.线性布局和相对布局使用得最多。当需要排布规则的时候,才考虑网格布局;当后面的会覆盖前面的,才考虑帧布局。

        2.线性布局最简单,可设置权重。

        3.相对布局的控件,都写出其id(因为有互相的位置关系);其他布局最好也全部写,也可以看需要写。

        4.使用相对布局或网格布局,可以避免线性布局的嵌套使用。

        5.表格布局已经OUT了!使用网格布局代替。


附  补充代码

        1. 主界面(activity_main.xml)

【攻克Android (5)】布局_第17张图片


   
   
   


        2.主活动(MainActivity)

 package com.xiangdong.layout;  
   
 import android.content.Intent;  
 import android.support.v7.app.ActionBarActivity;  
 import android.os.Bundle;  
 import android.view.Menu;  
 import android.view.MenuItem;  
 import android.view.View;  
   
   
 public class MainActivity extends ActionBarActivity {  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
     }  
   
     public void onClick(View view){  
         Intent intent = null;  
         switch (view.getId()){  
             case R.id.btnLinearLayout:  
                 intent = new Intent(this,LinearLayoutActivity.class);  
                 break;  
             case R.id.btnLinearLayout2:  
                 intent = new Intent(this, LinearLayout2Activity.class);  
                 break;  
             case R.id.btnLinearLayout3:  
                 intent = new Intent(this, LinearLayout3Activity.class);  
                 break;  
             case R.id.btnRelativeLayout:  
                 intent = new Intent(this,RelativeLayoutActivity.class);  
                 break;  
             case R.id.btnFrameLayout:  
                 intent = new Intent(this, FrameLayoutActivity.class);  
                 break;  
             case R.id.btnFrameLayout2:  
                 intent = new Intent(this, FrameLayout2Activity.class);  
                 break;  
             case R.id.btnTableLayout:  
                 intent = new Intent(this, TableLayoutActivity.class);  
                 break;  
             case R.id.btnGridLayout:  
                 intent = new Intent(this, GridLayoutActivity.class);  
                 break;  
         }  
         startActivity(intent);  
     }  
   
   
     @Override  
     public boolean onCreateOptionsMenu(Menu menu) {  
         // Inflate the menu; this adds items to the action bar if it is present.  
         getMenuInflater().inflate(R.menu.menu_main, menu);  
         return true;  
     }  
   
     @Override  
     public boolean onOptionsItemSelected(MenuItem item) {  
         // Handle action bar item clicks here. The action bar will  
         // automatically handle clicks on the Home/Up button, so long  
         // as you specify a parent activity in AndroidManifest.xml.  
         int id = item.getItemId();  
   
         //noinspection SimplifiableIfStatement  
         if (id == R.id.action_settings) {  
             return true;  
         }  
   
         return super.onOptionsItemSelected(item);  
     }  
 }
  • 【攻克Android (5)】布局_第18张图片
  • 大小: 212.5 KB
  • 【攻克Android (5)】布局_第19张图片
  • 大小: 222.6 KB
  • 【攻克Android (5)】布局_第20张图片
  • 大小: 23.7 KB
  • 【攻克Android (5)】布局_第21张图片
  • 大小: 31.7 KB
  • 【攻克Android (5)】布局_第22张图片
  • 大小: 54.3 KB
  • 【攻克Android (5)】布局_第23张图片
  • 大小: 183.2 KB
  • 【攻克Android (5)】布局_第24张图片
  • 大小: 46 KB
  • 【攻克Android (5)】布局_第25张图片
  • 大小: 262.4 KB
  • 【攻克Android (5)】布局_第26张图片
  • 大小: 272.5 KB
  • 【攻克Android (5)】布局_第27张图片
  • 大小: 74.3 KB
  • 【攻克Android (5)】布局_第28张图片
  • 大小: 34.5 KB
  • 【攻克Android (5)】布局_第29张图片
  • 大小: 25.2 KB
  • 【攻克Android (5)】布局_第30张图片
  • 大小: 227.2 KB
  • 【攻克Android (5)】布局_第31张图片
  • 大小: 32.8 KB
  • 【攻克Android (5)】布局_第32张图片
  • 大小: 187.8 KB
  • 【攻克Android (5)】布局_第33张图片
  • 大小: 32.2 KB
  • 【攻克Android (5)】布局_第34张图片
  • 大小: 42.4 KB
  • 查看图片附件

你可能感兴趣的:(线性布局,相对布局,帧布局,表格布局,网格布局)