Android UI

Android Ui 由View 和ViewGroup 构成，都继承自View 基类。 View objects 是Android 平类UI 的基类，是那些完全实现指定功能的组件(被称为widgets )的基类，like textfields, button etc. ViewGroup 是所有提供不同结构的layouts 类的基类。

 

View Object is a ----data structure, whose properties store the layout parameters

                           |--contect for aspecific rectangular area of the screen.

View Hierarchy.

Android的UI由a hierarchy of View and View Group nodes 构成。 Activity必须使用 setContentView (x) 方法并传递一个参数x给root node object来将一个view hierarchy tree attached to the screen for rendering. Android draw views on the screen in order, which is from TOP to BOTTOM . each view is responsible to draw themselves. it request position and space to its parent view. its parent view decide whether, where, and how its child nodes can be drawn. Since Views are drawed in order, it can be overlapped.

 

Layout

Android prefer to define layout in XML file. the elements in XML are either View or ViewGroup , or child of them. each element corresponding to a Class in Java, e.g. TextView ->TextView Class

 

声明 UI Layout 有两种方式：

• 在XML中(推荐)
• 在code中

可以单独使用其中的一种或者合起来使用。用XML方式的优点是利于修改界面，而不用修改code而重新编译。res/layout 文件夹下.XML文件中的element的名称与Class类名相对应，element的attribute名与Class中的方法相对应。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>

 

每一个XML layout文件被编译一个view resource. 例如，setContentView(R.layout.xx);

Activity中的onCreate()方法，在Activity启动时被Android framework调用。

 

android:id="@+id/id_name"

@表示把后边的资源当成ID resource

+id表示一个新的resource name is created and added to our resources(R file)

表示把id_name

在Android中，如果想要使用Android framework的resource的话，就在xml中android resource id:

       android:id="@android:id/id_name"

@android表示是从android R resource中的一个id, rather than a local R.id.

 

<TextView android:id=“@id/string_name”>

TextView tv = (TextView)super.findViewById(R.id.string_name);

 

Layout parameters

XML中那些以Layout_something形式命名的是layout parameter. 因为android layout中的格式是从上到下开始render的。所以一个View Hierarchy中，子类需要通知他们的上层结构点，他们所要声明的空间大小，和位置。所以一个View的Layout 参数实际上是通知他的VIewGroup它申请要的位置的。

 

每一个ViewGroup类都implements一个继承ViewGroup.LayoutParams的nested class。 这个nested class类包含了定义ViewGroup的子类的大小和位置的property types. 如下图所示，viewGroup为他们的child view定义了layout参数。每一个layoutParams subclass自己有为这些的参数赋值的syntax。Each child element must define layoutParams that are appropriate for its parent, 当然它们也可以为自己的子类定义不同的LayoutParams.

 

 

 

All view groups include a width and height (layout_width and layout_height ), and each view is required to define them. Many LayoutParams also include optional margins and borders.

 

You can specify width and height with exact measurements, though you probably won't want to do this often. More often, you will use one of these constants to set the width or height:

• wrap_content tells your view to size itself to the dimensions required by its content
• fill_parent (renamed match_parent in API Level 8) tells your view to become as big as its parent view group will allow.

一般来说，最好用relative measurements such as density-independent pixel units(dp), wrap_content, or fill_parent ，而不适用absolute units such as pixels 来设置宽和高，因为这样能够保证我们的屏幕布局能在不同的屏幕大小上保持正常的结构。

 

View 的结构是个四边形，它有一对点，表示左上角的点，还有宽和高参数，点和宽，高都是以pixels为单位。

 

View的大小是以宽高为形式表示的，但是View有两组宽和高。

The first pair is known as measured width and measured height . 表示一个View对象想要从它的父点获得多大的空间. The measured dimensions can be obtained by calling getMeasuredWidth() and getMeasuredHeight() .

 

The second pair is simply known as width and height , or sometimes drawing width and drawing height . 表示View对象在drawing time 和 after layout时的实际大小 . 这两个变量的值可以和前面的一对不一样。 The width and height can be obtained by calling getWidth() and getHeight() .

 

一个View组件支持Padding. The padding 表示View组件的上下左右边，用pixels形式表示。Padding可以被用来将View的内容向内收缩指定数量的pixels. 例如， For instance, 左侧padding值是2，可以把view 的内容向右移动距离左侧左侧边2 pixels的位置。 Padding can be set using the setPadding(int, int, int, int) method and queried by calling getPaddingLeft() , getPaddingTop() , getPaddingRight() and getPaddingBottom() .

 

虽然View可以定义padding，但是View不支持margins, 但是View groups却支持。Refer to ViewGroup and ViewGroup.MarginLayoutParams for further information .

 

Widgets

Widget is a view object that serves as an interface for interaction with the user, we can not only use widgets provided by Android , but we can also define our own by extending and combing existing widgets OR define new View objects.

 

UI Events

In order to handle UI events, we need to do one of the following:

• Define an event listener and register with a view; View has many nested interfaces(叫做什么Listener（）)， each have a callback method(on什么()方法)；例如， View.onClickListener(),处理按键事件(onClick()), View.OnTouchListener(for handling touch screen events on a view), View.OnKeyListener(for handling device key press on a view). 所以如果想要让一个View处理click,实现OnClickListen()并在OnClick()中定义行为，注册Listener给这个View.
• Override on existing call back method for the view,定义自己的view，对特定时间做初始回应。

 

Menus

用来显示应用的setting 和 functions,有三种：

• Option Menu: 按Menu键，显示menu
  • Icon Menu:最多支持6个items, 如果超过6个，多出来的就会被放在Expended Menu中。唯一支持icon的menu items, 不支持checkboxes and radio buttons
  • Expended Menu:在Icon menu中用第六个menu item more来引出更多menu item.
• Context Menu: 按住一个View item显示context menu.
• submenu: 按住Option Menu和Context Menu的menu item来引出一个menu, 这个menu不支持另一个nested sub menu.

Menu也是由View Hierarchy管理结构，但是这个结构不需要我们自己来定义。通过为Activity定义onCreateOptionMenu()和onCreateContextMenu()回叫方法，并声明要加入到menu中的items. Android会自动create需要的viewHierarchy并把item加进去。

 

Menu还自己管理自己的events, 所以也不用对menu中的items加listener. 当一个item被选后， onOptionsItemSelected or onContextItemSelected会被framework 调用。

 

在XML中定义Menu:

 

To define a menu, create an XML file inside your project's res/menu/ directory and build the menu with the following elements:

<menu>

Creates a Menu , which is a container for menu items. It must be the root node and holds one or more of the following elements. You can also nest this element in an <item> to create a submenu.

<item>

Creates a MenuItem , which represents a single item in a menu.

<group>

An optional, invisible container for <item> elements. It allows you to categorize menu items so they share properties such as active state and visibility. See Menu groups .

For example, here is a file in res/menu/ named game_menu.xml :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/new_game"
          android:icon="@drawable/ic_new_game"
          android:title="@string/new_game" />
    <item android:id="@+id/quit"
          android:icon="@drawable/ic_quit"
          android:title="@string/quit" />
</menu>
 

This example defines a menu with two menu items. Each item includes the attributes:

android:id

A resource ID that's unique to the item so that the application can recognize the item when the user selects it.

android:icon

A drawable resource that is the icon visible to the user.

android:title

A string resource that is the title visible to the user.

Inflating a Menu resource

You can inflate your menu resource (convert the XML resource into a programmable object) using MenuInflater.inflate() . For example, the following code inflates the game_menu.xml file defined above during the onCreateOptionsMenu() callback method, to be used for the Options Menu:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.game_menu, menu);
    return true;
}


 

The getMenuInflater() method returns a MenuInflater for the Activity. With this object, you can call inflate() , which inflates a menu resource into a Menu object. In this example, the menu resource defined by game_menu.xml is inflated into the Menu that was passed into onCreateOptionsMenu() . (This callback method for creating an option menu is discussed more in the next section.)

 

Creating a Option Menu

 

When the user opens the Options Menu for the first time, Android calls your Activity's onCreateOptionsMenu() method. Override this method in your Activity and populate the Menu that is passed into the method. Populate the Menu by inflating a menu resource as described in Inflating a Menu Resource . (You can also populate the menu in code, using add() to add menu items.)

When the user selects a menu item from the Options Menu, the system calls your Activity's onOptionsItemSelected() method. This method passes the MenuItem that the user selected. You can identify the menu item by calling getItemId() , which returns the unique ID for the menu item (defined by the android:id attribute in the menu resource or with an integer passed to the add() method). You can match this ID against known menu items and perform the appropriate action.

@Override public boolean onOptionsItemSelected(MenuItem item) { // Handle item selection switch (item.getItemId()) { case R.id.new_game: newGame(); return true; case R.id.quit: quit(); return true; default: return super.onOptionsItemSelected(item); } }

return true表示这个menu按键事件已经被处理，default选项把选择的item传递给父类表示不能够处理事件。如果当前类直接继承Activity. 那么父类Activity将返回false. 最好选择将不能处理的item事件返回父类，而不是直接返回false。

 

如果多个Activity window都是用同一样式的menu的话，可以建立一个Activity,什么都不做，只是实现Menu. 然后让其他的Actvity继承这个Activity.

 

在代码中我们也可以添加menu item.

@Override public boolean onCreateOptionsMenu(Menu menu){ super.onCreateOptionsMenu(menu); menu.add(0,1,0，“关于”)； menu.add(0,2,0,"退出"); reutrn super.onCreateOptionsMenu(menu);} @Override public boolean onOptionsItemSelected(MenuItem item){ switch(item.getItemID()){ case 0: doSomethiing; return true; case 1: doSomethingElse(); return true; default: return super.onCreateOptionsMenu(menu);}

 

Create a Context Menu

Create submenu

Other Menu Features

    Menu groups

    Checkable Menu items

    Short key

    Intents for menu items

    dynamically add intents

    Allowing your activity added to the menu