上中下三块布局,中间部分自适应

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.test_viewpager_fragment.MainActivity" >

    <LinearLayout
         android:id="@+id/title"
         android:layout_width="match_parent"
         android:layout_alignParentTop="true"
         android:layout_height="40dp"
         android:background="#999999">

        <Button
              android:id="@+id/bt_fdial"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:background="#00999999"
            android:textColor="#FFFFFF"
            android:gravity="center"
            android:text="拨号"/>
        <Button
              android:id="@+id/bt_fcontact"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:background="#00999999"
            android:textColor="#FFFFFF"
            android:gravity="center"
            android:text="联系人"/>

   </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/title"
        android:layout_above="@id/bottom"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

  <LinearLayout
         android:id="@+id/bottom"
         android:layout_width="match_parent"
         android:layout_alignParentBottom="true"
         android:layout_height="40dp"
         android:gravity="center"
         android:background="#999999">

        <Button
              android:id="@+id/bt_fdialpan"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:background="#00999999"
            android:textColor="#FFFFFF"
            android:gravity="center"
            android:text="拨号盘"
            android:textSize="20sp"
            android:visibility="gone" />
        <Button
              android:id="@+id/bt_fnewcontact"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:background="#00999999"
            android:textColor="#FFFFFF"
            android:gravity="center"
            android:text="新建联系人"
            android:textSize="20sp"
            android:visibility="gone" />
   </LinearLayout>
</RelativeLayout>

时间: 2024-10-12 15:25:39

上中下三块布局,中间部分自适应的相关文章

找人上门官网的CSS布局:上中下三栏自适应高度CSS布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

前端设计之CSS布局:上中下三栏自适应高度CSS布局

网页代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

三栏布局中间自适应总结

三栏布局,中间自适应这个经典的问题,之前也看了很多.今天准备在自己的博客里面总结一下,加深自己的理解. 方式一:左边左浮动,右边右浮动,中间自适应 <style> .left{ float: left; height: 200px; width: 200px; background-color: aquamarine; border: solid 1px black; } .right{ float: right; height: 200px; width: 300px; background

三栏布局(二)-------上下宽高固定,中间自适应

上一篇写的是左右宽高固定,中间自适应,根据上一篇的内容,总结了下上下宽高固定,中间自适应的几种布局方式,话不多说,直接上代码. <!DOCTYPE html> <html> <head> <title>上中下三栏布局</title> <style type="text/css"> html * { padding: 0; margin: 0; } html, body{ height:100%; } .layout

网页上中下三分布局,上下固定,中间自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 禁止浏览器从本地缓存中调阅页面.--> <

三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link rel="stylesheet" type="text/css" href="task0001.css"> </head> <body> <div class="wrap"> <di

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的

三列布局,中间自适应,关于float和positon方法

三列布局,中间自适应,尝试了两种方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { float: left; width: 160px; height: 100px; background: blue; padding: 20px; } .right{ float: right; width: 80px; heigh

我熟知的三种三栏网页宽度自适应布局方法

一.前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法.这些方法简洁实用,且无兼容性问题.如果您想在您的页面上使用流动性布局,相信本文给您一些启示的. 二.三种方法为了演示的需要,首先限定下示例的布局结构:左中右三栏布