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

时间: 2025-01-19 01:46:24

android布局技巧之类微信对话输入布局的相关文章

Android布局技巧之使用ViewStub_Android

多亏了<include />标签,在Android里,很容易就能做到共享和重用UI组件.在Android开发中,很容易就能创建出复杂的UI结构,结果呢,用了很多的View,且其中的一些很少使用.针对这种情况,谢天谢地,Android还为我们提供了一个特别的构件--ViewStub,它可以使你充分享受<include />的好处而不会造成无用View的浪费. ViewStub是一个看不见的,轻量级的View.它没有尺寸,也不会绘制以及以某种形式参与到布局中来.这意味着ViewStub

Android布局技巧之创建可重用的UI组件_Android

Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个标准的构件结合起来成为一个单独的.可重用的组件. 例如,你可以创建一个可重用的组件包含一个进度条和一个取消按钮,一个Panel包含两个按钮(确定和取消动作),一个Panel包含图标.标题和描述等等.简单的,你可以通过书写一个自定义的View来创建一个UI组件,但更简单的方式是仅使用XML来实现. 在

Android布局技巧之创建高效布局_Android

Android UI工具包提供了一些布局管理器,它们使用起来相当容易,而且,大多数的时候,你只需要使用它们最基本的特征来实现UI. 执着于基本特征的使用对于创建UI来说,往往不是最高效的.一个常见的例子就是滥用LinearLayout,它将会导致View树中的View数量激增.View--更糟的是,布局管理器--添加到应用程序里都会带来一定的消耗:初始化,布局和绘制变得更加缓慢.嵌套布局的花销尤其"昂贵",例如,如果你嵌套了一些LinearLayout,并使用了weight参数,这会导

Android布局技巧之合并布局_Android

我们已经有文章向你描述如何使用<include />标签来重用和共享你的布局代码.这篇文章将向你阐述<merge />标签的使用以及如何与<include />标签互补使用. <merge />标签用于减少View树的层次来优化Android的布局.通过看一个例子,你就能很容易的理解这个标签能解决的问题.下面的XML布局显示一个图片,并且有一个标题位于其上方.这个结构相当的简单:FrameLayout里放置了一个ImageView,其上放置了一个TextVi

Android开发中LinearLayout布局技巧及layout中drawable属性区别

先介绍drawable属性的区别,这个算是比较简单的,但是还是有一点点的小细节需要进行说明,drawable有五个文件夹,分别为hdpi,ldpi,mdpi,xdpi,xxdpi,这五个文件夹想必大家都知道,其实就是为了适应不同分辨率,由于手机分辨率的不同,因此我们的图片需要适应不同手机的分辨率...hdpi:480x800   mdpi:480x320   ldpi:320x240xdpi:1280x720 xxdpi 1920x1280其实这个数字并不是非常精确的,只是说明每一个阶段都有一个

Android布局技巧之使用ViewStub

多亏了<include />标签,在Android里,很容易就能做到共享和重用UI组件.在Android开发中,很容易就能创建出复杂的UI结构,结果呢,用了很多的View,且其中的一些很少使用.针对这种情况,谢天谢地,Android还为我们提供了一个特别的构件--ViewStub,它可以使你充分享受<include />的好处而不会造成无用View的浪费. ViewStub是一个看不见的,轻量级的View.它没有尺寸,也不会绘制以及以某种形式参与到布局中来.这意味着ViewStub

Android布局技巧之创建可重用的UI组件

Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个标准的构件结合起来成为一个单独的.可重用的组件. 例如,你可以创建一个可重用的组件包含一个进度条和一个取消按钮,一个Panel包含两个按钮(确定和取消动作),一个Panel包含图标.标题和描述等等.简单的,你可以通过书写一个自定义的View来创建一个UI组件,但更简单的方式是仅使用XML来实现. 在

Android中关于CoordinatorLayout的一些实用布局技巧

介绍 CoordinatorLayout是一个"加强版"的 FrameLayout,它主要有两个用途: (1) 用作应用的顶层布局管理器 (2) 通过为子View指定 behavior 实现自定义的交互行为. 在我们做 Material Design 风格的app时通常都使用 CoordinatorLayout 作为布局的根节点,以便实现特定的UI交互行为. 那么现在我们来看看如何用已有的一些控件实现一些常见的布局. Toolbar + TabLayout 实现 TabLayout 置

Android仿微信对话列表滑动删除效果_Android

微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView(项目地址:https://github.com/likebamboo/SwipeListView),在其上进行了一些重构,最终实现了微信对话列表滑动删除效果. 实现原理 1.通过ListView的pointToPosition(int x, int y)来获取按下的position,然后通过android.view.ViewGroup.getChildAt(position)来得到滑动对象swipeView  2.