Android开发自学笔记(四):APP布局下

篇幅较长遂分成上下两篇,上一篇我们已经快要一气呵成了,但是美中不足的是,这个界面并不能讨得美工MM的欢心,美工MM曾寄希望于您,却交出这么作出这么一副死型样,我都替你汗颜。

这个图搜索按钮看起来马马虎虎,但是这个搜索框真是有失我在美工MM心中的水准啊,这是因为我们把EditText和Button都的宽度都设置成按自身内容长度自适应,所以这一篇我们就来润润色,修一修这个布局。

Android在布局中引入了权重的概念,即如果给设定ViewGroup的总权重是,然后可以将权重分给它的子元素View各几份,比如我们可以这段这个例子的总权重为5,然后将EditText的权重设置4,而Button的权重设置为0,这样EditText就会实际利用这个LinearLayout的宽度的4/5,而Button只有1/5,我们在实际开发中并不能很好的定义一个View的具体宽度,所以我们可以借助这种权重分成的方式可以很好的解决这个问题。

引入权重

layout_weight属性即定义了权重,每一个View的默认权重为0,所以如果不显示写出来是0,但我这边需要显示的写出Linearlayout的权重为5,EditText和Button则分别为4和1。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_weight="5"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal">
 <EditText android:id="@+id/edit_message"
  android:layout_weight="4"
  android:layout_width="0dip"
  android:layout_height="wrap_content"
  android:hint="@string/edit_message" />
  <Button
   android:layout_weight="1"
   android:layout_width="0dip"
   android:layout_height="wrap_content"
   android:text="@string/btn_message" />
</LinearLayout>

值得一提的是,我们在开发中可以不应该过多的使用wrap_content,因为系统并不知道这个值究竟是多少而去做更多的计算,所以我们这边既然已经有了权重的概念,那我们就可以将EditText和Button的layout_width设置为0dip。

重新运行程序

重新运行程序,应该就可以得到我们预想的效果了。

(0)

相关推荐

  • Android Studio使用小技巧:布局预览时填充数据

    我们都知道Android Studio用起来很棒,其中布局预览更棒.我们在调UI的时候基本是需要实时预览来看效果的,在Android Studio中只需要切换到Design就可以看到,而且我们需要在布局上填充数据预览效果更好,比如我们在TextView中设定text属性来看下字体大小与布局是否正确,但是呢正式环境我们又需要移除这些额外的数据,不然看着很不舒服,这个时候就用到了本篇博客介绍的一个技巧. 废话不多说,直接上图: 上述示例中只需要在xml布局文件中添加tools命名空间的text属性就

  • Android中实现布局背景模糊化处理的方法

    在模仿 IOS 密码输入页面的时候发现其背景有模糊处理,于是了解了一下并记录下来,以便使用.在Android 中具体实现方法如下 查考 http://www.jb51.net/article/64781.htm private void applyBlur() { // 获取壁纸管理器 WallpaperManager wallpaperManager = WallpaperManager.getInstance(this.getContext()); // 获取当前壁纸 Drawable wa

  • Android实现加载广告图片和倒计时的开屏布局

    这是一个android开屏布局的实例,可以用于加载广告图片和倒计时的布局.程序中设置的LayoutParams,划分额外空间比例为6分之5,具体权重比例可根据用户自己需求来自定义,异步加载广告图片,相关的Android代码. 具体实现代码如下: package cn.waps.extend; import android.app.Activity; import android.content.Context; import android.content.res.Configuration;

  • 分享五种Android常用布局方式

    现在Android非常疯狂,所以网上关于Android学习的资料如雨后春笋般冒起来,像这些基础的东西更是多如牛毛,我会把用过的东西碰到的困难和怎么解决的记录下来,一来可以供自己复习万一以后又碰到类似的问题就可以直接拿来看下.二来可以给初学者一点小小的帮助. Android布局是应用界面开发的重要一环,在Android中,共有五种布局方式,分别是:FrameLayout(框架布 局),LinearLayout (线性布局),AbsoluteLayout(绝对布局),RelativeLayout(相

  • Android开发自学笔记(三):APP布局上

    hello,大家好,本文主要介绍如何开始开发一个美观.有情调.人见人爱的Android应用程序,已知我们在市面上有不少布局极其精美,在视觉上让人爱不释手的应用程序,如果让我们着手开发,我们该如何下手? 在移动互联网公司都有这样几个部门–UX/UE及UI,UX有的也称作UE是指做用户体验的是User Experience的缩写,这些人一般都毕业于美术学院专门搞设计,我们上面说到那些精美的程序往往都是由他们的手先设计出效果图,然后交由UI,也称GUI即Graphic User Interface或者

  • Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout实例详解

    本文实例分析了Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout.分享给大家供大家参考,具体如下:  一.绝对布局AbsoluteLayout 绝对定位AbsoluteLayout,又可以叫做坐标布局,可以直接指定子元素的绝对位置,这种布局简单直接,直观性强,但是由于手机屏幕尺寸差别比较大,使用绝对定位的适应性会比较差. 下面我们举一个例子看看:例子里的机器人图片大小是250X250,可以看到我们使用android:layout_x和android:l

  • Android编程之代码创建布局实例分析

    本文实例讲述了Android编程之代码创建布局使用方法.分享给大家供大家参考,具体如下: 大概描述一下效果:最外层是一个 RelativeLayout 里面有自定义个LinearLayout,每个LinearLayout有两个TextView.that's it !!! private void initView() { // 获取xml的RelativeLayout layout = (RelativeLayout) findViewById(R.id.liner); for (int i =

  • Android UI使用HTML布局方法实例

    很多时候我们用HTML布局会更方便直接,记录一下. 我现在主要是直接调用服务器的网页(实际上是jsp的,只是返回的是html),所以需要联网,第一步添加权限. 复制代码 代码如下: <uses-permission android:name="android.permission.INTERNET" /> 布局文件直接用一个WebView,如下: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8

  • Android中使用include标签和merge标签重复使用布局

    尽管Android提供了各种组件来实现小而可复用的交互元素,你也可能因为布局需要复用一个大组件.为了高效复用完整布局,你可以使用<include/>和<merge/>标签嵌入另一个布局到当前布局.所以当你通过写一个自定义视图创建独立UI组件,你可以放到一个布局文件里,这样更容易复用. 复用布局因为其允许你创建可复用的复杂布局而显得非常强大.如,一个 是/否 按钮面板,或带描述文本的自定义进度条.这同样意味着,应用里多个布局里共同的元素可以被提取出来,独立管理,然后插入到每个布局里.

  • Android代码实现图片和文字上下布局

    在Android开发中经常会需要用到带文字和图片的button,下面来给大家介绍使用radiobutton实现图片和文字上下布局或左右布局.代码很简单就不给大家多解释了. 布局文件很简单,用来展示RadioBUtton的使用方法. <?xml version="." encoding="utf-"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/and

  • android界面布局之实现文本块布局效果示例

    复制代码 代码如下: package cn.aibow.android.layoutdemo1; import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.MotionEvent;import android.view.View;import android.widget.TextView;import android.widget.Toast; public

随机推荐