关于android:Android-开发入门详解4种基本布局

41次阅读

共计 7711 个字符，预计需要花费 20 分钟才能阅读完成。

3.3.1 线性布局 LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    ...>

应用 android:orientation 属性指定排列方向：

  • vertical 垂直排列
  • horizontal 程度排列，默认 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        />
</LinearLayout>

应用 android:layout_gravity 指定控件在布局的对齐形式：

  • top 顶部对齐
  • center_vertical 垂直居中
  • bottom 底部对齐 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"                   # 指定为程度布局
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"                   # 指定为顶部对齐
        android:text="Button 1"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"       # 指定为垂直居中
        android:text="Button 2"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"                # 指定为底部对齐
        android:text="Button 3"
        />

应用 android:layout_weight 以比例形式指定控件在布局的大小：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/input"
        android:layout_width="0dp"                      #将 width 指定为 0dp
        android:layout_height="wrap_content"
        android:layout_weight="3"                       #程度方向宽度占比
        android:hint="Type something"
        />

    <Button
        android:id="@+id/send"
        android:layout_width="0dp"                      #将 width 指定为 0dp
        android:layout_height="wrap_content"
        android:layout_weight="2"                       #程度方向宽度占比
        android:text="Send"
        />

width 和 weight 组合应用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/input"
        android:layout_width="0dp"                      #将 width 指定为 0dp
        android:layout_height="wrap_content"
        android:layout_weight="1"                       #程度方向宽度占比其余空间
        android:hint="Type something"
        />

    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"             #程度方向适配控件宽度
        android:layout_height="wrap_content"
        android:text="Send"
        />

3.3.2 绝对布局 RelativeLayout

<?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">

    # 左上角对齐
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="button1"
        />

    # 右上角对齐
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="button2"
        />
        
    # 居中对齐
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="button3"
        />
        
    # 左下角对齐
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="button4"
        />
        
    # 右下角对齐
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="button5"
        />
</RelativeLayout>

绝对控件进行定位布局 

<?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">

    # 居中对齐
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="button3"
        />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"                   #位于 button3 上方
        android:layout_toLeftOf="@id/button3"                #位于 button3 左侧
        android:text="button1"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"                   #位于 button3 上方
        android:layout_toRightOf="@id/button3"               #位于 button3 右侧
        android:text="button2"
        />
        
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"                   #位于 button3 下方
        android:layout_toLeftOf="@id/button3"                #位于 button3 左侧
        android:text="button4"
        />
        
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"                   #位于 button3 下方
        android:layout_toRightOf="@id/button3"               #位于 button3 右侧
        android:text="button5"
        />
</RelativeLayout>

其余绝对于控件进行定位的属性：

  • android:layout_alignLeft=”@id/button3″ 与 button3 左对齐
  • android:layout_alignRight=”@id/button3″ 与 button3 右对齐
  • android:layout_alignTop=”@id/button3″ 与 button3 上对齐
  • android:layout_alignBottom=”@id/button3″ 与 button3 下对齐

3.3.3 帧布局 FrameLayout

默认状况下控件重叠显示：

<?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:id="@+id/text_view"
        android:layout_width="wrap_content"          #控件宽度
        android:layout_height="wrap_content"         #控件高度
        android:text="This is TextView" />
    
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        />
</FrameLayout>
<?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:id="@+id/text_view"
        android:layout_width="wrap_content"          #控件宽度
        android:layout_height="wrap_content"         #控件高度
        android:layout_gravity="left"                #控件左对齐
        android:text="This is TextView" />
    
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"          #控件宽度
        android:layout_height="wrap_content"         #控件高度
        android:layout_gravity="right"               #控件右对齐
        android:src="@mipmap/ic_launcher"
        />
</FrameLayout>

3.3.4 百分比布局 PercentFrameLayout

LinearLayout 自身反对按比例指定控件大小，因而百分比布局只为 FrameLayout 和 RelativeLayout 进行了性能扩大。

# app/build.gradle

dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:percent:24.2.1'        #引入依赖
}
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_gravity="left|top"   # 指定地位在左上角
        app:layout_widthPercent="50%"       # 指定宽度百分比
        app:layout_heightPercent="50%"      # 指定高度百分比
        />

    <Button
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

    <Button
        android:id="@+id/button3"
        android:text="Button 3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

    <Button
        android:id="@+id/button4"
        android:text="Button 4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

</android.support.percent.PercentFrameLayout>

正文完
android
发表至： android
2020-10-25
 0
关于android:数据存储与访问-Andorid开发期末复习2
关于android:安装一个apk引起的无法开机
关于android:融云-IM-SDK-集成-刷新会话界面和会话列表界面
关于android:金三银四跳槽需谨慎一篇文章就能解决面试