美文网首页
Android自适应布局

Android自适应布局

作者: 淡蓝色梦想 | 来源:发表于2018-12-11 16:20 被阅读0次

顶部固定底部自适应

关键如下:

  • 使用LinearLayout作为父容器
  • 设置容器的orientation为vertical:垂直布局
  • 固定在容器顶部的子元素设置layout_height为wrap_content:使用内容高度作为元素的固定高度。
  • 底部自适应子元素设置layout_height为match_parent:改元素将会自适应,即抢占父元素剩余的空间。

代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:focusable="false"
    android:orientation="vertical"
    >
    <!-- 顶部固定:设置layout_height为wrap_content,使其根据内容设置高度 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:focusable="false"
        android:background="@color/background_color"
        >
        ...
    </LinearLayout>

    <!-- 底部自适应:设置layout_height为match_parent,它将根据父容器进行自适应,即是抢占模式 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:focusable="false"
        android:background="@color/background_color"
        >
        ...
    </LinearLayout>
</LinearLayout>

顶部固定底部自适应

关键如下:

  • 使用LinearLayout作为父容器
  • 设置容器的orientation为horizontal:水平布局
  • 固定在容器左侧的子元素设置layout_width为wrap_content:使用内容宽度作为元素的固定宽度。
  • 右侧自适应子元素设置layout_width为match_parent:改元素将会自适应,即抢占父元素剩余的空间。

代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:focusable="false"
    android:orientation="horizontal"
    >
    <!-- 左侧固定:设置layout_width为wrap_content,使其根据内容设置宽度 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:focusable="false"
        android:background="@color/background_color"
        >
        ...
    </LinearLayout>

    <!-- 右侧自适应:设置layout_width为match_parent,它将根据父容器进行自适应,即是抢占模式 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:focusable="false"
        android:background="@color/background_color"
        >
        ...
    </LinearLayout>
</LinearLayout>

相关文章

  • Flutter--Expanded学习

    一、介绍 自适应填充布局,类型android的LinearLayout的weight权重 二、expanded源码...

  • 2019-04-10响应式布局和自适应布局

    响应式布局和自适应布局详解 布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多...

  • Android自适应布局

    顶部固定底部自适应 关键如下: 使用LinearLayout作为父容器 设置容器的orientation为vert...

  • 为iPhone 6设计自适应布局

    为iPhone 6设计自适应布局 为iPhone 6设计自适应布局

  • 常用网页布局

    一、多列布局 (1) 宽度自适应布局 两栏布局 左侧固定右侧自适应 右侧固定左侧自适应 技术原理(左侧固定右侧自适...

  • 常见网页布局的介绍

    左侧固定,右侧自适应 右侧固定,左侧自适应 圣杯布局(左右固定,中间自适应) 中间固定 两侧自适应 等分布局 等分...

  • 我还是要说的布局

    两栏布局 左边固定右边自适应 使用float布局 使用position布局    三栏布局 左右两边固定中间自适应...

  • Bootstrap 的日常使用

    十二栅格: 盒子的移动(不影响自适应布局): 元素的大小设置(不影响自适应布局):

  • 什么是响应式

    响应式 布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间,因为你只...

  • 二栏布局一栏自适应和三栏布局中间自适应

    二栏布局一栏自适应 效果图: 三栏布局中间自适应 效果图:

网友评论

      本文标题:Android自适应布局

      本文链接:https://www.haomeiwen.com/subject/iqkehqtx.html