• 557 阅读
  • 1 回复

Android UI学习 - Linear Layout, RelativeLayout

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

1. 一些常用的公共属性介绍
1) layout_width - 宽
   fill_parent: 宽度和父元素相同,wrap_content: 宽度随本身的内容所调整,或者指定 px 值来设置宽

2) layout_height - 高
   fill_parent: 高度和父元素相同,wrap_content: 高度随本身的内容所调整,或者指定 px 值来设置高

3) background - 设置背景图

4) padding - 设置边距
   可以具体设置paddingBottom,paddingLeft,paddingRight,paddingTop来设定不同的px值

5) id - 该object的id号
@+id/id1 代表添加新的id名为id1, @id/id1 代表引用id1的控件

6) layout_weight - 重要度
    个人理解为显示的优先级。默认为0(最高),数值越大,优先级越低!参考下面的Linear Layout例子。要让layout_weight生效,需要父层或父父层的相应layout_width/layout_height = "fill_parent",否则wrap_content会压缩到最小足够空间!

7) layout_gravity - Container组件的对齐方式
    组件在layout里面的对齐方式。

8) gravity - 文字在组件里的对齐方式
   例如设置button里面的文字在button中居中显示。

* 大多数属性是可以调用对应的函数来动态改变状态的,请查看SDK Doc。

2. Linear Layout 线形布局

orientation - 容器内元素的排列方式。vertical: 子元素们垂直排列,horizontal: 子元素们水平排列。在代码里可通过setOrientation()进行动态改变,值分别为HORIZONTAL或者VERTICAL。
    * 在Linear Layout,  宽度/高度都是按着组件的次序逐个占用的!所以当某个组件设置"fill_parent",在没有设置Layout_weight的情况下,该组件会占用了余下的空间,那么在它后面的组件就会显示不出来。如下图的EditText如果没有设置android:layout_weight="1", 它下面的其他组件就看不见了!

baselineAligned 一般情况下,这个属性默认为true,代表在同一方向的组件都基于第一个组件对齐。所以可以看到下图的text1, button1, text2是在同一水平线的。当不需要这效果时,可以设置为false。

   可以参考官方网页http://androidappdocs.appspot.com/resources/tutorials/views/hello-linearlayout.html

xml代码:
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent">

  6. <TextView
  7. android:text="@string/hello"
  8. android:layout_width="fill_parent"
  9. android:layout_height="wrap_content"
  10. />
  11. <EditText
  12. android:layout_width="fill_parent"
  13. android:layout_height="wrap_content"
  14. android:layout_weight="1"
  15. android:id="@+id/edittext"
  16. />

  17. <LinearLayout
  18. android:id="@+id/LinearLayout01"
  19. android:layout_width="fill_parent"
  20. android:layout_height="wrap_content"
  21. android:orientation="horizontal">
  22. <TextView
  23. android:text="text1"
  24. android:id="@+id/TextView01"
  25. android:layout_width="wrap_content"
  26. android:layout_height="wrap_content"
  27. />
  28. <Buttonandroid:text="Button01"
  29. android:id="@+id/Button01"
  30. android:layout_width="fill_parent"
  31. android:layout_height="wrap_content"
  32. android:layout_weight="1"
  33. />
  34. <TextView
  35. android:text="text2"
  36. android:id="@+id/TextView02"
  37. android:layout_width="wrap_content"
  38. android:layout_height="wrap_content"
  39. />
  40. </LinearLayout>

  41. <TextView
  42. android:layout_width="wrap_content"
  43. android:layout_height="wrap_content"
  44. android:text="buttom"
  45. />

  46. </LinearLayout>


3. RelativeLayout  相对定位布局
    这个布局比较易懂,但组件间容易存在依赖关系,“牵一发而动全身“,所以在确定组件间布局关系不会再变动时,可以考虑采用!先看看xml代码:
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. android:id="@+id/relativelayout">

  7. <ImageView
  8. android:id="@+id/image"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:src="@drawable/icon"
  12. />
  13. <TextView
  14. android:id="@+id/text1"
  15. android:layout_width="fill_parent"
  16. android:layout_height="wrap_content"
  17. android:text="@string/hello"
  18. android:layout_toRightOf="@id/image"
  19. />
  20. <Button
  21. android:id="@+id/button1"
  22. android:layout_width="fill_parent"
  23. android:layout_height="wrap_content"
  24. android:text="button1"
  25. android:layout_toRightOf="@id/image"
  26. android:layout_below="@id/text1"
  27. />
  28. </RelativeLayout>

Java代码(动态添加组件):
  1. publicclass RelativeDemo extends Activity {

  2. @Override
  3. publicvoid onCreate(Bundle savedInstanceState) {
  4. super.onCreate(savedInstanceState);
  5.        setContentView(R.layout.relative);

  6. RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
  7.            ViewGroup.LayoutParams.FILL_PARENT, //width
  8.            ViewGroup.LayoutParams.WRAP_CONTENT //height
  9.        );

  10. //设置editText layout_below="@id/button1"
  11. lp.addRule(RelativeLayout.BELOW, R.id.button1);

  12. //设置editText layout_alignLeft="@id/image"
  13. lp.addRule(RelativeLayout.ALIGN_LEFT, R.id.image);

  14.        ((RelativeLayout) findViewById(R.id.relativelayout)).addView(
  15. new EditText(this), lp);
  16.    }
  17. }

效果图:

    先添加参照物(ImageView),然后就可以依次添加其他组件,定义位置规则rule!位置规则是不分先后的!另外ADT插件提供的预览图,有时候是不准的,未能及时更新,所以最好还是要到模拟器上测试!

    RelativeLayout的xml属性很多,总的来说分为2类:
    1) 要指定参照物的,layout_alignBottom,layout_toLeftOf,layout_above,layout_alignBaseline系列的;
         layout_above = ”@id/text1“
    2) 以parent为参照物,设置true/false,layout_centerVertical,layout_alignParentLeft系列的。
         layout_alignParentLeft = ”true“

     其中layout_alignWithParentIfMissing是比较有用且要注意的属性,当设置为true,在指定的参照物找不到的情况下,会使用parent作为新的参照物!

RelativeLayout.LayoutParams是用于设置位置规则的。上述的xml属性均来自此静态类。但它的AddRule(int verb, int anchor),参数的verb动作却是引用RelativeLayout的常量,而这些常量和部分xml属性相对应。参数anchor的值可能是参照物的id,RelativeLayout.TRUE,-1(当不需要指定anchor的verb)。可以这样理解verb和anchor:
xml属性 (verb) = "value" (anchor)

    其中它的构造函数之一: RelativeLayout.LayoutParams(int w, int h),参数指定所要设置子View的宽度和高度。

本文出自 “学习Android” 博客,请务必保留此出处http://android.blog.51cto.com/268543/298345
小鱼的淘宝店铺-多多支持哇
视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
介绍
在 Android 中各种布局的应用,以及菜单效果的实现  
  • 各种布局方式的应用,FrameLayout, LinearLayout, TableLayout, AbsoluteLayout, RelativeLayout  
  • 为指定元素配置上下文菜单,为应用程序配置选项菜单,以及多级菜单的实现  


1、各种布局方式的演示
res/layout/main.xml

代码

<?xml version="1.0" encoding="utf-8"?>
<!--
layout_width - 宽。fill_parent: 宽度跟着父元素走;wrap_content: 宽度跟着本身的内容走;直接指定一个 px 值来设置宽
layout_height - 高。fill_parent: 高度跟着父元素走;wrap_content: 高度跟着本身的内容走;直接指定一个 px 值来设置高
-->

<!--
LinearLayout - 线形布局。
   orientation - 容器内元素的排列方式。vertical: 子元素们垂直排列;horizontal: 子元素们水平排列
   gravity - 内容的排列形式。常用的有 top, bottom, left, right, center 等,详见文档
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation
="vertical" android:gravity="right"
   android:layout_width
="fill_parent" android:layout_height="fill_parent">

<!--
   FrameLayout - 层叠式布局。以左上角为起点,将  FrameLayout 内的元素一层覆盖一层地显示
-->
<FrameLayout android:layout_height="wrap_content"
       android:layout_width
="fill_parent">
<TextView android:layout_width="wrap_content"
           android:layout_height
="wrap_content" android:text="FrameLayout">
</TextView>
<TextView android:layout_width="wrap_content"
           android:layout_height
="wrap_content" android:text="Frame Layout">
</TextView>
</FrameLayout>

<TextView android:layout_width="wrap_content"
       android:layout_height
="wrap_content" android:text="@string/hello"/>

<!--
   TableLayout - 表格式布局。
       TableRow - 表格内的行,行内每一个元素算作一列
       collapseColumns - 设置 TableLayout 内的 TableRow 中需要隐藏的列的列索引,多个用“,”隔开
       stretchColumns - 设置 TableLayout 内的 TableRow 中需要拉伸(该列会拉伸到所有可用空间)的列的列索引,多个用“,”隔开
       shrinkColumns - 设置 TableLayout 内的 TableRow 中需要收缩(为了使其他列不会被挤到屏幕外,此列会自动收缩)的列的列索引,多个用“,”隔开
-->
<TableLayout android:id="@+id/TableLayout01"
       android:layout_width
="fill_parent" android:layout_height="wrap_content"
       android:collapseColumns
="1">
<TableRow android:id="@+id/TableRow01" android:layout_width="fill_parent"
           android:layout_height
="wrap_content">
<TextView android:layout_width="wrap_content"
               android:layout_weight
="1" android:layout_height="wrap_content"
               android:text
="行1列1"/>
<TextView android:layout_width="wrap_content"
               android:layout_weight
="1" android:layout_height="wrap_content"
               android:text
="行1列2"/>
<TextView android:layout_width="wrap_content"
               android:layout_weight
="1" android:layout_height="wrap_content"
               android:text
="行1列3"/>
</TableRow>
<TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content"
           android:layout_height
="wrap_content">
<TextView android:layout_width="wrap_content"
               android:layout_height
="wrap_content" android:text="行2列1"/>
</TableRow>
</TableLayout>

<!--
   AbsoluteLayout - 绝对定位布局。
       layout_x - x 坐标。以左上角为顶点
       layout_y - y 坐标。以左上角为顶点
-->
<AbsoluteLayout android:layout_height="wrap_content"
       android:layout_width
="fill_parent">
<TextView android:layout_width="wrap_content"
           android:layout_height
="wrap_content" android:text="AbsoluteLayout"
           android:layout_x
="100px"
           android:layout_y
="100px"/>
</AbsoluteLayout>

<!--
   RelativeLayout - 相对定位布局。
       layout_centerInParent - 将当前元素放置到其容器内的水平方向和垂直方向的中央位置(类似的属性有 :layout_centerHorizontal, layout_alignParentLeft 等)
       layout_marginLeft - 设置当前元素相对于其容器的左侧边缘的距离
       layout_below - 放置当前元素到指定的元素的下面
       layout_alignRight - 当前元素与指定的元素右对齐
-->
<RelativeLayout android:id="@+id/RelativeLayout01"
       android:layout_width
="fill_parent" android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content" android:id="@+id/abc"
           android:layout_height
="wrap_content" android:text="centerInParent=true"
           android:layout_centerInParent
="true"/>
<TextView android:layout_width="wrap_content"
           android:layout_height
="wrap_content" android:text="marginLeft=20px"
           android:layout_marginLeft
="20px"/>
<TextView android:layout_width="wrap_content"
           android:layout_height
="wrap_content" android:text="xxx"
           android:layout_below
="@id/abc" android:layout_alignRight="@id/abc"/>
</RelativeLayout>

</LinearLayout>




res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello Layout</string>
<string name="app_name">webabcd_layout</string>
</resources>



Main.java

代码

package com.webabcd.layout;

import android.app.Activity;
import android.os.Bundle;

publicclass Main extends Activity {
/** Called when the activity is first created. */
   @Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
   }
}





2、上下文菜单,选项菜单,子菜单
res/layout/main.xml

代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation
="vertical" android:layout_width="fill_parent"
   android:layout_height
="fill_parent">

<TextView android:id="@+id/txt1" android:layout_width="fill_parent"
       android:layout_height
="wrap_content" android:text="@string/hello_contextMenu"/>

<TextView android:id="@+id/txt2" android:layout_width="fill_parent"
       android:layout_height
="wrap_content" android:text="@string/hello_subMenu"/>

</LinearLayout>




res/values/strings.xml

代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello_contextMenu">Hello Context Menu</string>
<string name="hello_subMenu">Hello Context Sub Menu</string>
<string name="app_name">webabcd_menu</string>
</resources>




Main.java

代码

package com.webabcd.menu;

import android.app.Activity;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.Menu;
import android.view.MenuItem;
import android.view.SubMenu;
import android.view.View;
import android.view.ContextMenu.ContextMenuInfo;
import android.widget.TextView;
import android.widget.Toast;

// 演示两种菜单的实现方式:上下文菜单(通过在某元素上长按,来呼出菜单)和选项菜单(通过按手机上的菜单按钮,来呼出菜单)
publicclass Main extends Activity {
/** Called when the activity is first created. */
   @Override
publicvoid onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);

// 为 R.id.txt1 注册一个上下文菜单(在此 TextView 上长按,则会呼出上下文菜单)
// 具体呼出的菜单内容需要重写 onCreateContextMenu 来创建
       TextView txt1 = (TextView) this.findViewById(R.id.txt1);
this.registerForContextMenu(txt1);

// 为 R.id.txt2 注册一个上下文菜单
       TextView txt2 = (TextView) this.findViewById(R.id.txt2);
this.registerForContextMenu(txt2);
   }

// 重写 onCreateContextMenu 用以创建上下文菜单
// 重写 onContextItemSelected 用以响应上下文菜单
   @Override
publicvoid onCreateContextMenu(ContextMenu menu, View v,
           ContextMenuInfo menuInfo) {
       super.onCreateContextMenu(menu, v, menuInfo);

// 创建 R.id.txt1 的上下文菜单
if (v == (TextView) this.findViewById(R.id.txt1)) {

// ContextMenu.setIcon() - 设置菜单的图标
// ContextMenu.setHeaderTitle() - 设置菜单的标题
           menu.setHeaderIcon(R.drawable.icon01);
           menu.setHeaderTitle(
"我是菜单");

// 用 ContextMenu.add() 来增加菜单项,返回值为 MenuItem
// 第一个参数:组ID
// 第二个参数:菜单项ID
// 第三个参数:顺序号
// 第四个参数:菜单项上显示的内容
           menu.add(1, 0, 0, "菜单1");

// MenuItem - 新增菜单项后的返回类型,针对菜单项的其他设置在此对象上操作
           menu.add(1, 1, 1, "菜单2").setCheckable(true);

       }
// 创建 R.id.txt2 的上下文菜单(多级上下文菜单)
elseif (v == (TextView) this.findViewById(R.id.txt2)) {

// ContextMenu.addSubMenu("菜单名称") - 用来添加子菜单。子菜单其实就是一个特殊的菜单
           SubMenu sub = menu.addSubMenu("父菜单1");
           sub.setIcon(R.drawable.icon01);
           sub.add(
0, 0, 0, "菜单1");
           sub.add(
0, 1, 1, "菜单2");
           sub.setGroupCheckable(
1, true, true);

           SubMenu sub2
= menu.addSubMenu("父菜单2");
           sub2.setIcon(R.drawable.icon01);
           sub2.add(
1, 0, 0, "菜单3");
           sub2.add(
1, 1, 1, "菜单4");
           sub2.setGroupCheckable(
1, true, false);

       }
   }


// 重写 onCreateOptionsMenu 用以创建选项菜单
   @Override
public boolean onCreateOptionsMenu(Menu menu) {

       MenuItem menuItem
= menu.add(0, 0, 0, "菜单111111111111111111111");

// MenuItem.setIcon() - 设置菜单项的图标
// MenuItem.setTitleCondensed() - 菜单的简标题,如果指定了简标题的话,菜单项上的标题将会以此简标题为准
// MenuItem.setAlphabeticShortcut() - 设置选中此菜单项的快捷键
// 注:菜单项超过 6 个的话,第 6 个菜单将会变为  More 菜单,多余的菜单会在单击 More 菜单之后显示出来
       menuItem.setIcon(R.drawable.icon01);
       menuItem.setTitleCondensed(
"菜单1");
       menuItem.setAlphabeticShortcut(
'a');

       menu.add(
0, 1, 1, "菜单2").setIcon(R.drawable.icon02);
       menu.add(
0, 2, 2, "菜单3").setIcon(R.drawable.icon03);
       menu.add(
0, 3, 3, "菜单4");
       menu.add(
0, 4, 4, "菜单5");
       menu.add(
0, 5, 5, "菜单6");
       menu.add(
0, 6, 6, "菜单7").setIcon(R.drawable.icon04);
       menu.add(
0, 7, 7, "菜单8").setIcon(R.drawable.icon05);

returntrue;
   }

// 重写 onOptionsItemSelected 用以响应选项菜单
   @Override
public boolean onOptionsItemSelected(MenuItem item) {
       super.onOptionsItemSelected(item);

       Toast.makeText(Main.
this, "被单击的菜单项为:"+ String.valueOf(item.getItemId()), Toast.LENGTH_SHORT).show();

returnfalse;
   }
}
小鱼的淘宝店铺-多多支持哇