系出名門Android(2) – 佈局(Layout)和選單(Menu)薦

系出名門Android(2) – 佈局(Layout)和選單(Menu)

介紹
在 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>

        <!–
        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;

public class Main extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void 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;

// 演示兩種選單的實現方式：上下文選單（通過在某元素上長按，來撥出選單）和選項選單（通過按手機上的選單按鈕，來撥出選單）
public class Main extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void 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
        public void 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 的上下文選單（多級上下文選單）
                else if (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);

return true;
}

        // 重寫 onOptionsItemSelected 用以響應選項選單
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
                super.onOptionsItemSelected(item);

                Toast.makeText(Main.this, “被單擊的選單項為：” + String.valueOf(item.getItemId()), Toast.LENGTH_SHORT).show();

return false;
}
}

OK
[原始碼下載]

系出名門Android(2) – 佈局(Layout)和選單(Menu)薦

相關文章