1. 程式人生 > >AndroidGUI26:程式中動態設定元件的寬度、高度以及margin等屬性

AndroidGUI26:程式中動態設定元件的寬度、高度以及margin等屬性

在實際工作中,我們經常需要在程式裡面用程式碼來控制一些元件的寬度和高度,以適應不同解析度的螢幕。儘管有不同的Layout供我們使用,但很多時候需要通過用程式碼設定元件的大小,以達到良好的介面視覺效果。

注意:元件和控制元件是有區別的。元件對應的英文是component,控制元件對應的英文是control;控制元件是帶有介面的,元件則未必有介面;控制元件屬於元件,可以說它是帶有介面的元件。比如Button有介面,因此可以說它是控制元件,也可以說它是元件。LinearLayout沒有介面,因此它不能算是控制元件,但它卻是元件。本文中由於涉及了帶有和不帶有介面的元件,因此,用元件泛指這兩者。

有些元件,比如Button,可以在程式中用setWidth和setHeight來設定其大小,這是非常方便的。但有些元件卻沒有這兩個設定大小的方法,比如ImageButton、Spinner以及LinearLayout等等,那麼如何在程式中根據需要,動態地設定他們的大小呢?下面就用實際的例子來說明這個問題。

1.    首先建立一個Android專案:

       

2.    將圖片檔案magnifier.png拖入到專案的res/drawable-mdpi資料夾下。mangifier.png的內容如下:

      

3.    在strings.xml中,增加如下粗體字程式碼。這些程式碼,將會被Spinner使用:

    <string name="spin_prompt">請選擇城市 </string>

    <string-array name="cities">

           <item>北京 </item >

           <item>上海 </item >

           <item>南京 </item >

           <item>烏魯木齊 </item>

           <item>哈爾濱 </item>

           <item>符拉迪沃斯託克 </item>

     </string-array>

4.    修改main.xml,使之如下:

       <?xml version="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

       <Buttonandroid:id="@+id/btn"

                    android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:text="@string/hello"

         />

         <ImageButtonandroid:id="@+id/image_btn"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:src="@drawable/magnifier"

         />

         <Spinnerandroid:id="@+id/sp"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:entries="@array/cities"

             android:prompt="@string/spin_prompt"

         />

         <LinearLayout

                   android:orientation="horizontal"

             android:layout_width="fill_parent"

             android:layout_height="wrap_content"

         >

                   <LinearLayoutandroid:id="@+id/ll_left"

                          android:orientation="horizontal"

                       android:layout_width="wrap_content"

                       android:layout_height="wrap_content"

                       android:gravity="left"

                   >

                            <EditText

                                   android:layout_width="wrap_content"

                                  android:layout_height="wrap_content"

                                  android:text="Hello"

                       />

                   </LinearLayout>

                   <LinearLayoutandroid:id="@+id/ll_right"

                              android:orientation="horizontal"

                       android:layout_width="wrap_content"

                       android:layout_height="wrap_content"

                       android:gravity="right"

                   >

                            <EditText

                                         android:layout_width="wrap_content"

                                  android:layout_height="wrap_content"

                                  android:text="Android"

                       />

                   </LinearLayout>

         </LinearLayout>

</LinearLayout>

不難看出,mainx.ml有一個Button,一個ImageButton,一個Spinner和兩個EditText。

5.    執行本專案,得到的結果如下:

      

現在假定,我們要:

a)    增加Button的高度

b)    增加ImageButton的寬度和高度

c)    增加Spinner的寬度

d)    將包含Hello的EditText靠左,包含Android的EditText靠右

6.    修改AdjustControlSize.java的程式碼,使之如下:

public class AdjustControlSize extends Activity

{

    private Button btn;

    private ImageButton imagebtn;

    private Spinner sp;

    private LinearLayout ll_left;

    private LinearLayout ll_right;

    private DisplayMetrics dm;

    @Override

    public void onCreate(Bundle savedInstanceState)

    {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.main);

       // 獲取螢幕尺寸

dm = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(dm);

       btn = (Button)findViewById(R.id.btn);

       imagebtn = (ImageButton)findViewById(R.id.image_btn);

       sp =(Spinner)findViewById(R.id.sp);

       ll_left = (LinearLayout)findViewById(R.id.ll_left);

       ll_right = (LinearLayout)findViewById(R.id.ll_right);

       // 增加Button的高度,可以很方面地通過setHeight方法來實現。

       btn.setHeight(80);

       // 但如果要想在程式碼中改變某些元件,比如ImageButton、Spinner以及LinearLayout,

       // 用setHeight或者setWidth的方式就不行了,因為這些元件中,沒有提供這兩個方法。

       // 為此,可以通過LayoutParams這個類(這裡我們用LinearLayout.LayoutParams)來實現這一點。

       // 改變imagebtn的寬度和高度均為螢幕寬度的1/4

       LinearLayout.LayoutParams imagebtn_params = newLinearLayout.LayoutParams(

LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

        imagebtn_params.height = dm.widthPixels / 4;

        imagebtn_params.width = dm.widthPixels / 4;

       imagebtn.setLayoutParams(imagebtn_params);

       // 設定sp的寬度為螢幕寬度的2/3

        LinearLayout.LayoutParams sp_params = new LinearLayout.LayoutParams(

LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

        sp_params.width = dm.widthPixels * 2 / 3;

        sp.setLayoutParams(sp_params);

       // 讓兩個EditText分別處於螢幕的左右兩端。

       // 在main.xml中,兩個EditText分別處於ll_left和ll_right這兩個LinearLayout中,且

       // 處於ll_left的gravity屬性為left,即置於其中的元件靠左;處於ll_right的gravity

       // 屬性為right,即置於其中的元件靠右。但是由於這兩個LinearLayout的寬度屬性均為

       // wrap_content,所以它們靠在一起了,由此導致了兩個EditText也靠在一起。

       // 如果,我們把ll_left和ll_right的寬度能夠設定為螢幕寬度的一半,那麼兩個EditText就

       // 會分別處於螢幕的兩端。

        LinearLayout.LayoutParams ll_params = new LinearLayout.LayoutParams(

LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

        ll_params.width = dm.widthPixels / 2;

       ll_left.setLayoutParams(ll_params);

        ll_right.setLayoutParams(ll_params);

    }

}

7.    執行結果:

      

        達到了我們在5中假定的目標。

8.    總結

       如果在程式中不能用setWidth和setHeight來改變大小的元件,通常可以通過LayoutParams的方式進行設定,正如6中程式碼的粗體字部分的程式碼那樣。動態設定這些元件的margin也是採用類似的方式,比如:

sp_params.width = dm.widthPixels * 2 / 3;

sp_params.leftMargin = 6;                // 用這種方式設定元件的margin

sp.setLayoutParams(sp_params);