Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

  [Android布局学习系列]

  1.Android 布局学习之——Layout(布局)详解一

  2.Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

  3.Android 布局学习之——LinearLayout的layout_weight属性

  4.Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline

 

   Layout Parameters（布局参数）：

           在XML文件中，我们经常会看到类似于layout_width这样的布局属性（layout attributes），这些属性通常是用来定义

      View的布局参数，为了让它适应于ViewGroup。

          每个ViewGroup类都实现了一个继承自ViewGroup.LayoutParams的嵌套类。

          子类包含定义每个子View大小和位置的属性类型，为了让它适应于ViewGroup。

          下面我们通过官方文档的一张图片以及一个XML文件来具体学习一下：

         

 1 <!-- activity的根布局是LinearLayout 也就是线性布局 -->

 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     xmlns:tools="http://schemas.android.com/tools"

 4     android:layout_width="match_parent"

 5     android:layout_height="wrap_content"

 6     android:background="#0f0"

 7     android:orientation="vertical" >

 8     <!-- LinearLayout有个子View是RelativeLayout -->

 9     <RelativeLayout 

10       android:layout_width="wrap_content"

11       android:layout_height="wrap_content"

12       android:background="#f00"

13       >

14       <TextView

15           android:id="@+id/textView1InRL"

16           android:background="#fff"

17           android:layout_width="wrap_content"

18           android:layout_height="wrap_content"

19           android:text="TextView" />

20 

21     <TextView

22         android:id="@+id/textView2InRL"

23         android:background="#fff"

24         android:layout_width="wrap_content"

25         android:layout_height="wrap_content"

26         android:text="TextView2"

27         android:layout_toRightOf="@id/textView1InRL"

28          />

29      <TextView

30         android:background="#fff"

31         android:layout_width="wrap_content"

32         android:layout_height="wrap_content"

33         android:text="TextView3"

34         android:layout_below="@id/textView2InRL"

35          />

36       </RelativeLayout>

37       <Button 

38           android:text="Button1InLinearLayout"

39           android:layout_width="wrap_content"

40           android:layout_height="wrap_content"

41           />

42       <Button 

43           android:text="Button2InLinearLayout"

44           android:layout_width="wrap_content"

45           android:layout_height="wrap_content"

46           />

47 </LinearLayout>

                       

 

               从上，我们可以看出。布局中的子元素都必须定义使他合适于它的父布局的布局参数，尽管它可能为它的子元素定义不同的布局参数。比如上图中的RelativeLayout,它受父Layout：LinearLayout影响，然后它的布局参数则影响到了它的子元素：三个TextView。

      常见的布局（Common Layouts）:

      下面介绍Android中常用的布局：

      1.线性布局（Linear Layout）

          将子元素按垂直方向或水平方向线性排列。（如果窗口的长度超过了屏幕的长度，则可以生成一个滚动条）

     

     窗口长度超过屏幕长度，生成滚动条（srollbar）的方法：

         用ScrollView包裹线性布局：

        

 1 <LinearLayout 

 2        android:layout_width="fill_parent"

 3        android:layout_height="fill_parent"

 4        xmlns:android="http://schemas.android.com/apk/res/android">

 5        <ScrollView

 6             android:layout_width="fill_parent"

 7             android:layout_height="wrap_content">

 8             <LinearLayout 

 9                   android:layout_width="wrap_content"

10                   android:layout_height="wrap_content"

11                   android:orientation="vertical">

12                   <!-- 这里放线性布局中的内容 -->

13             </LinearLayout>

14       </ScrollView>

15  </LinearLayout>

  通过一个例子来深入学习一下线性布局：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 2     xmlns:tools="http://schemas.android.com/tools"

 3     android:layout_width="match_parent"

 4     android:layout_height="wrap_content"

 5     android:paddingLeft="20dp"

 6     android:paddingRight="20dp"

 7     android:orientation="vertical" >

 8     <ScrollView 

 9         android:layout_width="fill_parent"

10         android:layout_height="wrap_content"

11         >

12         <LinearLayout 

13             android:layout_width="wrap_content"

14             android:layout_height="wrap_content"

15             android:orientation="vertical"

16             >

17     <EditText

18         android:layout_width="match_parent"

19         android:layout_height="wrap_content"

20         android:hint="帐号:" />

21     <EditText

22         android:layout_width="match_parent"

23         android:layout_height="wrap_content"

24         android:hint="密码:" />

25     <LinearLayout 

26         android:layout_width="wrap_content"

27         android:layout_height="wrap_content"

28         android:orientation="horizontal"

29         >

30         <Button 

31            android:layout_width="wrap_content" 

32            android:layout_height="wrap_content"

33            android:layout_marginLeft="30dp"

34            android:text="登录" 

35             />

36           <Button 

37            android:layout_width="wrap_content" 

38            android:layout_height="wrap_content"

39            android:layout_marginLeft="100dp"

40            android:text="注册" 

41             />

42     </LinearLayout>

43     <ImageView 

44         android:layout_width="match_parent"

45         android:layout_height="500dp"

46         android:src="@drawable/ic_launcher"

47         />

48     <TextView 

49         android:layout_width="match_parent"

50         android:layout_height="wrap_content"

51         android:text="LinearLayout大小超过屏幕大小的测试"

52         />

53     </LinearLayout>

54     </ScrollView>

55 </LinearLayout>

 

     

    2.相关布局（Relative Layout）

      正如其名，相关布局。我们可以通过让子元素互相相关（比如Button A在TextView B的下面）或与父布局互相相关来指定

      它们在布局中的位置。

                    

         默认地，所有的子View都被放置在布局的左上方（top-left）。

        设置子View之间和子View与父母之间关系的参数如下图所示：

        

      同样通过一个例子来学习一下相关布局：

      

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 2     xmlns:tools="http://schemas.android.com/tools"

 3     android:layout_width="match_parent"

 4     android:layout_height="match_parent"

 5     tools:context=".MainActivity" >

 6 

 7     <!--android:layout_centerHorizontal 设置TextView在水平中心-->

 8         <TextView

 9             android:id="@+id/login"

10             android:layout_width="wrap_content"

11             android:layout_height="wrap_content"

12             android:layout_centerHorizontal="true"

13             android:textSize="20sp"

14             android:text="登录界面" />

15      <!--android:layout_marginTop="24dp" 设置了EditText的顶部上面的空闲空间是24dp -->

16     <EditText 

17         android:id="@+id/editText1"

18         android:layout_width="wrap_content"

19         android:layout_height="wrap_content"

20         android:layout_below="@id/login"

21         android:layout_centerHorizontal="true"

22         android:layout_marginTop="24dp"

23         android:hint="username"

24         android:ems="10" >

25 

26         <requestFocus />

27     </EditText>

28     <!-- android:layout_below="@+id/editText1"editText2在editText1下面 -->

29     <EditText

30         android:id="@+id/editText2"

31         android:layout_width="wrap_content"

32         android:layout_height="wrap_content"

33         android:layout_below="@+id/editText1"

34         android:layout_centerHorizontal="true"

35         android:layout_marginTop="27dp"

36         android:ems="10"

37         android:hint="password"

38         android:inputType="textPassword" />

39       <!--  android:layout_alignRight="@id/editText2"设置cancelButton与

40          editText2的右边缘对齐-->

41     <Button 

42         android:id="@+id/cancelButton"

43         android:layout_width="wrap_content"

44         android:layout_height="wrap_content"

45         android:layout_below="@id/editText2"

46         android:layout_alignRight="@id/editText2"

47         android:text="取消"

48         />

49        <!--  android:layout_toLeftOf="@id/cancelButton"设置确定按钮在取消按钮的左边 -->

50         <Button 

51         android:id="@+id/confirmButton"

52         android:layout_width="wrap_content"

53         android:layout_height="wrap_content"

54         android:layout_below="@id/editText2"

55         android:layout_toLeftOf="@id/cancelButton"

56         android:text="确定"

57         />

58 

59 </RelativeLayout>

 

       

 

      希望这篇文章对大家的学习有所帮助，如果你喜欢，请推荐一下，谢谢~

      如果转载，请在文章开头处注明本博客地址:http:www.cnblogs.com/JohnTsai

      欢迎讨论交流，邮箱:[email protected] ：）