Android用戶界面設(shè)計:框架布局
![](http://image.woshipm.com/wp-files/img/62.jpg)
框架布局是將控件組織在Android程序的用戶界面中最簡單的布局類型之一。
理解布局對于良好的Android程序設(shè)計來說是非常重要的。在這個教程里,你將學(xué)到所以關(guān)于框架布局的知識,它們主要用來在屏幕上組織特別的或重疊的視圖控件。使用得當(dāng)?shù)脑?,很多有趣的Android程序用戶界面都可以基于框架布局來設(shè)計。
什么是框架布局
框架布局是Android開發(fā)者組織視圖控件最簡單和最有效的布局之一。它們使用得比其它一些布局要少一些,只是因為它們一般只用于顯示單個視圖,或重疊的視圖。框架布局常用作容器布局,因為它一般只有一個子視圖(通常是另一個布局,用于組織多個視圖)。
技巧:事實上,你會看到框架布局是作為你設(shè)計的任何布局資源的父布局來使用的。如果你在層級視圖工具(Hierarchy Viewer tool,一個很有用的調(diào)試你的程序布局的工具)創(chuàng)建你的程序,你會發(fā)現(xiàn)你設(shè)計的任何布局資源都被顯示在一個父布局中——一個框架布局。
框架布局非常簡單,這使得它們非常高效。它們可以在XML布局資源文件中定義,也可以通過Java代碼在程序中定義??蚣懿季种械囊粋€子視圖總是被繪制到相對于屏幕的左上角上。如果存在多個子視圖,那么他們被按順序一個堆疊在另一個上面的方式繪制。這意味著第一個添加到框架布局的視圖將顯示在棧的底部,最后添加的視圖會顯示在最頂部。
讓我們來看一個簡單的例子。我們假設(shè)有一個框架布局大小調(diào)整到控制整個屏幕(換句話說,layout_width and layout_height屬性都設(shè)置為match_parent)。我們要添加三個子控件到這個框架布局:
- 一個有湖面圖片的ImageView。
- 一個在屏幕頂部顯示的TextView。
- 一個在屏幕底部顯示的(使用layout_gravity屬性將TextView下沉到父布局的底部)TextView。
下圖展示這種類型的布局在屏幕上會是什么樣:
在XML資源文件中定義框架布局
設(shè)計程序用戶界面最方便和可維護(hù)的方法是創(chuàng)建XML布局資源。這個方法極大地簡化了UI設(shè)計過程,將很多靜態(tài)創(chuàng)建和用戶界面控件的布局以及控件屬性的定義移到XML中去,取代了寫代碼。
XML布局資源必須存儲在/res/layout項目目錄下。讓我們看看前一節(jié)介紹的框架布局。同樣地,這個屏幕基本上就是一個有三個子視圖的框架布局:一個充滿整個屏幕的圖片,兩個文本控件繪制在它上面,每一個文本控件都是默認(rèn)透明背景。這個布局資源文件命名為/res/layout/framed.xml,在XML中如下定義:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/ImageView01" android:layout_height="fill_parent" android:layout_width="fill_parent" android:src="@drawable/lake" android:scaleType="matrix"></ImageView> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000" android:textSize="40dp" android:text="@string/top_text" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/bottom_text" android:layout_gravity="bottom" android:gravity="right" android:textColor="#fff" android:textSize="50dp" /> </FrameLayout>
回憶一下,在Activity中,只需要在onCreate()方法中添加一行代碼來在屏幕上加載和顯示布局資源。如果布局資源存放在/res/layout/framed.xml文件中,這行代碼應(yīng)該是:
setContentView(R.layout.framed);
用程序定義框架布局
你也可以用程序創(chuàng)建和配置框架布局。這通過使用FrameLayout類(android.widget.FrameLayout)來實現(xiàn)。你會在 RelativeLayout.LayoutParams類中找到具體的參數(shù)。同樣地,典型的布局參數(shù) (android.view.ViewGroup.LayoutParams),比如layout_height和layout_width,以及邊距參數(shù)(ViewGroup.MarginLayoutParams),也能用在FrameLayout對象上。
你必須用Java創(chuàng)建屏幕內(nèi)容,然后向setContentView()方法提供一個包含所有要作為子視圖顯示的控件內(nèi)容的父布局對象,而不是像前面所示直接使用setContentView()方法來加載布局資源。在這里,你的父布局就是框架布局。例如,下面的代碼示例了如何用程序重新創(chuàng)建前面描述的相同的布局。特別地,我們在活動中實例化一個FrameLayout,并在它的onCreate()方法中先添加一個ImageView控件然后再添加兩個TextView控件:
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView tv1 = new TextView(this); tv1.setText(R.string.top_text); tv1.setTextSize(40); tv1.setTextColor(Color.BLACK); TextView tv2 = new TextView(this); tv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM)); tv2.setTextSize(50); tv2.setGravity(Gravity.RIGHT); tv2.setText(R.string.bottom_text); tv2.setTextColor(Color.WHITE); ImageView iv1 = new ImageView(this); iv1.setImageResource(R.drawable.lake); iv1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); iv1.setScaleType(ScaleType.MATRIX); FrameLayout fl = new FrameLayout(this); fl.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); fl.addView(iv1); fl.addView(tv1); fl.addView(tv2); setContentView(fl); }
最終屏幕運(yùn)行結(jié)果和前面圖片展示的一模一樣。
何時使用框架布局
當(dāng)你可以自由使用其它強(qiáng)大布局類型,如線性布局,相對布局和表格布局時,很容易會忘了框架布局??蚣懿季值男适沟盟前苌僖晥D控件的屏幕的很好的選擇(主屏幕,只有一個畫布的游戲界面等)。有些時候其它低效的布局設(shè)計可以簡化為一個更有效率的框架布局設(shè)計,而其它時候使用更專業(yè)的布局類型會更合適。當(dāng)你想要堆疊視圖時框架布局是一般的選擇。
看看類似的控件
FrameLayout相對比較簡單。因為這一點,很多其它布局類型和視圖控件都是基于它的。例如,ScrollView就是一個在子內(nèi)容太大而不能在布局界限內(nèi)完全展示時出現(xiàn)滾動條的框架布局。所有主屏幕(Home屏幕)應(yīng)用小工具都位于一個框架布局中。
對于所有框架布局需要注意的是它們除了通常的背景以外還可以設(shè)置前景色。這通過android:foreground XML屬性來實現(xiàn)。這也可以用于框架下面的視圖。
總結(jié)
Android程序Android程序用戶界面使用布局來定義,框架布局是最簡單和最高效的布局類型之一??蚣懿季值淖涌丶幌鄬τ诓季值淖笊辖莵砝L制。如果框架布局中存在多個子視圖,它們將按順序繪制,最后一個子控件繪制在最上面。[English]
轉(zhuǎn)載請注明:
作者:RockUX–WEB前端
出自:Android用戶界面設(shè)計:框架布局
- 目前還沒評論,等你發(fā)揮!