android布局技巧之类微信对话输入布局

简介:

在设计的过程中我们一定经常会遇到这样的需求:

一行内放3个控件,左边控件左对齐,右面控件右对齐,中间控件来填充剩下的空间。

或者一列内放3个控件,上面的与顶部对齐,下面的沉在最底部,中间控件是弹性的,充满剩余空间。

情况一:水平布局

图示:


这是第一种情形。由于涉及到ImageView,想保持图片原比例不便使用LinearLayout的weight属性。

解决办法:

1.外层套一个RelativeLayout

2.三个控件分别装进3个LinearLayout中,假如id分别为leftlayout,midlayout,rightlayout

    leftlayout属性:android:layout_width="wrap_content"

    rightlayout属性:android:layout_width="wrap_content"

    midlayout属性: android:layout_width="match_parent"

                                   android:layout_toLeftOf="@+id/rightlayout"
                                   android:layout_toRightOf="@+id/leftlayout" 

这样就可以达到两端控件分别左右对齐,中部控件填充剩余空间的效果。


上图效果的代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="34dp"
    android:background="#FFFFFF"
    android:orientation="horizontal" >
    
      <LinearLayout
    	android:id="@+id/choosetags_listview_item_leftlayout"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_alignParentLeft="true">
    
   		 <ImageView
   		     android:id="@+id/taglistview_item_ico"
   		     android:layout_width="30dp"
   		     android:layout_height="30dp"
   		     android:layout_gravity="center_vertical"
   		     android:layout_marginBottom="2dp"
   		     android:layout_marginLeft="5dp"
   		     android:layout_marginRight="5dp"
   		     android:layout_marginTop="2dp"
   		     android:contentDescription="@string/app_name"
   		     android:src="@drawable/tag_ico_movie" />
   		 
		</LinearLayout>

		<LinearLayout
		    android:id="@+id/choosetags_listview_item_midlayout"
		    android:layout_width="match_parent"
		    android:layout_height="fill_parent"
		    android:layout_centerVertical="true"
		    android:layout_toLeftOf="@+id/choosetags_listview_item_rightlayout"
		    android:layout_toRightOf="@+id/choosetags_listview_item_leftlayout" >
    
			<com.coolletter.util.MarqueeTextView
			    android:id="@+id/taglistview_item_name"
			    android:layout_width="fill_parent"
			    android:layout_height="fill_parent"
			    android:layout_gravity="center_vertical"
			    android:checkMark="?android:attr/textCheckMark"
			    android:ellipsize="marquee"
			    android:focusableInTouchMode="true"
			    android:gravity="center_vertical"
			    android:marqueeRepeatLimit="marquee_forever"
			    android:paddingEnd="5dp"
			    android:paddingStart="5dp"
			    android:scrollHorizontally="true"
			    android:singleLine="true"
			    android:textColor="#000000"
			    android:textSize="15dp" />
 
	    </LinearLayout> 
	    	
		<LinearLayout
		    android:id="@+id/choosetags_listview_item_rightlayout"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:layout_alignParentRight="true"
		    android:layout_centerVertical="true" >
   		 
		    <TextView
		        android:id="@+id/taglistview_item_newnum"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:layout_gravity="center_vertical"
		        android:text="253"
		        android:textColor="#000000" >
	    
			</TextView>   
    		
		</LinearLayout>

	
</RelativeLayout>
    

情形二:垂直布局

图示:

垂直布局方案:

1.外层放一个RealtiveLayout

2.内部三个控件分别装进3个LinearLayout中,id设为topayout,midlayout,bottomlayout

   toplayout属性:android:layout_width="wrap_content"

   bottomlayout属性:android:layout_width="wrap_content"

   midlayout属性: android:layout_width="match_parent"

                                   android:layout_below="@+id/toplayout"
                                   android:layout_above="@+id/bottomlayout" 



布局:

                              

代码:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#DCDCDC"
    android:orientation="vertical" >
    
    <LinearLayout
    	android:id="@+id/letter_newtext_toplayout"
    	android:layout_width="fill_parent"
    	android:layout_height="45dp"
    	android:layout_alignParentTop="true"
    	android:background="#FFFAF0"
    	android:orientation="horizontal" >
                
    		    <TextView
    		        android:id="@+id/letter_newtext_cancel"
    		        android:layout_width="wrap_content"
    		        android:layout_height="wrap_content"
    		        android:layout_gravity="center_vertical"
    		        android:layout_marginBottom="5dp"
    		        android:layout_marginTop="5dp"
    		        android:layout_weight="1"
    		        android:gravity="center_horizontal"
    		        android:text="Cancel"
    		        android:textColor="#000000"
    		        android:textSize="16dp" />

    			<TextView
    			    android:id="@+id/letter_newtext_submit"
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:layout_gravity="center_vertical"
    			    android:layout_marginBottom="5dp"
    			    android:layout_marginTop="5dp"
    			    android:layout_weight="1"
    			    android:gravity="center_horizontal"
    			    android:text="Submit"
    			    android:textColor="#000000"
    			    android:textSize="16dp" />
                
    </LinearLayout>
    
      <LinearLayout
          android:id="@+id/letter_newtext_mainlayout"
          android:layout_width="fill_parent"
          android:layout_height="match_parent"
          android:layout_above="@+id/letter_newtext_deliver"
          android:layout_below="@+id/letter_newtext_toplayout"
          android:orientation="vertical"
         >
        	
    		<EditText
    		    android:id="@+id/letter_newtext_content"
    		    android:layout_width="fill_parent"
    		    android:layout_height="fill_parent"
    		    android:layout_marginBottom="5dp"
    		    android:layout_marginLeft="5dp"
    		    android:layout_marginRight="5dp"
    		    android:layout_marginTop="5dp"
    		    android:background="@drawable/corners_bg" 
    		    android:gravity="top"
    		    android:inputType="textMultiLine"
    		    android:textColor="#000000" />

		</LinearLayout>
		
       	<View
       	    android:id="@+id/letter_newtext_deliver"
       	    android:layout_above="@+id/letter_newtext__bottomlayout"
            android:layout_width="fill_parent"
            android:layout_height="0.5dp"
            android:background="#00BFFF" />

		<LinearLayout
		    android:id="@+id/letter_newtext__bottomlayout"
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:layout_alignParentBottom="true"
		    android:layout_marginBottom="5dp"
		    android:layout_marginTop="5dp"
		    android:gravity="bottom"
		    android:orientation="horizontal" >
        		
                <ImageView
                    android:id="@+id/letter_newtext_ico_tag"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="5dp"
                    android:background="@drawable/letter_new_ico_maintag" />
                
                <TextView
                    android:id="@+id/letter_newtext_tag_content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:textColor="#000000"
                    android:textSize="15dp" />
        		
       </LinearLayout>


</RelativeLayout>
当这种情况中间的控件是一个ScrollView时,也使用这种办法。就能实现ScrollView充满上下两个控件中间的区域。

Reference:

http://blog.csdn.net/geeklei/article/details/38968735



相关文章
|
XML Java Android开发
微信虚拟视频插件安卓,微信虚拟相机替换拍照,java源码分享
完整的相机应用项目包含三个主要文件:主活动实现、布局文件和清单文件。代码实现了相机预览、
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
358 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
XML 存储 Java
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
286 3
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
|
移动开发 监控 前端开发
构建高效Android应用:从优化布局到提升性能
【7月更文挑战第60天】在移动开发领域,一个流畅且响应迅速的应用程序是用户留存的关键。针对Android平台,开发者面临的挑战包括多样化的设备兼容性和性能优化。本文将深入探讨如何通过改进布局设计、内存管理和多线程处理来构建高效的Android应用。我们将剖析布局优化的细节,并讨论最新的Android性能提升策略,以帮助开发者创建更快速、更流畅的用户体验。
348 10
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
1218 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
API Android开发
微信虚拟摄像头模块,微信虚拟视频聊天,安卓虚拟摄像头插件
该实现包含虚拟摄像头服务核心、视频流生成和Android配置三个关键模块,使用Camera2
|
JSON 调度 数据库
Android面试之5个Kotlin深度面试题:协程、密封类和高阶函数
本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点。文章详细解析了Kotlin中的协程、扩展函数、高阶函数、密封类及`inline`和`reified`关键字在Android开发中的应用,帮助读者更好地理解和使用这些特性。
691 1
|
前端开发 Java 测试技术
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
534 2