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使用：

[html] view plain copy

1. <string name="spin_prompt">请选择城市 </string>  
2.   
3.     <string-array name="cities">  
4.   
5.            <item>北京 </item >  
6.   
7.            <item>上海 </item >  
8.   
9.            <item>南京 </item >  
10.   
11.            <item>乌鲁木齐 </item>  
12.   
13.            <item>哈尔滨 </item>  
14.   
15.            <item>符拉迪沃斯托克 </item>  
16.   
17.      </string-array>  

4.    修改main.xml，使之如下

[html] view plain copy

1. <?xml version="1.0"encoding="utf-8"?>  
2.   
3.        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
4.   
5.            android:orientation="vertical"  
6.   
7.            android:layout_width="fill_parent"  
8.   
9.            android:layout_height="fill_parent"  
10.   
11.        >   
12.   
13.      
14.   
15.               <Button android:id="@+id/btn"  
16.   
17.                     android:layout_width="wrap_content"  
18.   
19.                     android:layout_height="wrap_content"  
20.   
21.                     android:text="@string/hello"  
22.   
23.                 />  
24.   
25.           
26.   
27.                 <ImageButton android:id="@+id/image_btn"  
28.   
29.                     android:layout_width="wrap_content"  
30.   
31.                     android:layout_height="wrap_content"  
32.   
33.                     android:src="@drawable/magnifier"  
34.   
35.                 />  
36.   
37.           
38.   
39.                 <Spinner android:id="@+id/sp"  
40.   
41.                     android:layout_width="wrap_content"  
42.   
43.                     android:layout_height="wrap_content"  
44.   
45.                     android:entries="@array/cities"  
46.   
47.                     android:prompt="@string/spin_prompt"  
48.   
49.                 />  
50.   
51.           
52.   
53.                 <LinearLayout  
54.   
55.                    android:orientation="horizontal"  
56.   
57.                     android:layout_width="fill_parent"  
58.   
59.                     android:layout_height="wrap_content"  
60.   
61.                 >  
62.   
63.                          <LinearLayout android:id="@+id/ll_left"  
64.   
65.                               android:orientation="horizontal"  
66.   
67.                               android:layout_width="wrap_content"  
68.   
69.                               android:layout_height="wrap_content"  
70.   
71.                               android:gravity="left"  
72.   
73.                          >  
74.   
75.                                    <EditText  
76.   
77.                                         android:layout_width="wrap_content"  
78.   
79.                                          android:layout_height="wrap_content"  
80.   
81.                                          android:text="Hello"  
82.   
83.                                    />  
84.   
85.                          </LinearLayout>  
86.   
87.                     
88.   
89.                          <LinearLayout android:id="@+id/ll_right"  
90.   
91.                               android:orientation="horizontal"  
92.   
93.                               android:layout_width="wrap_content"  
94.   
95.                               android:layout_height="wrap_content"  
96.   
97.                               android:gravity="right"  
98.   
99.                          >  
100.   
101.                                    <EditText  
102.   
103.                                          android:layout_width="wrap_content"  
104.   
105.                                          android:layout_height="wrap_content"  
106.   
107.                                          android:text="Android"  
108.   
109.                                   />  
110.   
111.                          </LinearLayout>  
112.   
113.                 </LinearLayout>  
114.   
115.        </LinearLayout>  

 不难看出，mainx.ml有一个Button，一个ImageButton，一个Spinner和两个EditText。

5.    运行本项目，得到的结果如下：

       现在假定，我们要：

       a)    增加Button的高度

       b)    增加ImageButton的宽度和高度

       c)    增加Spinner的宽度

       d)    将包含Hello的EditText靠左，包含Android的EditText靠右

6.    修改AdjustControlSize.java的代码，使之如下：

[java] view plain copy

1. public class AdjustControlSize extends Activity  
2.   
3.       {  
4.   
5.          private Button btn;  
6.   
7.          private ImageButton imagebtn;  
8.   
9.          private Spinner sp;  
10.   
11.          private LinearLayout ll_left;  
12.   
13.          private LinearLayout ll_right;  
14.   
15.          private DisplayMetrics dm;  
16.   
17.     
18.   
19.          @Override  
20.   
21.          public void onCreate(Bundle savedInstanceState)  
22.   
23.          {  
24.   
25.             super.onCreate(savedInstanceState);  
26.   
27.             setContentView(R.layout.main);  
28.   
29.         
30.   
31.             // 获取屏幕尺寸  
32.   
33.              dm = new DisplayMetrics();  
34.   
35.              getWindowManager().getDefaultDisplay().getMetrics(dm);  
36.   
37.         
38.   
39.              btn = (Button)findViewById(R.id.btn);  
40.   
41.             imagebtn = (ImageButton)findViewById(R.id.image_btn);  
42.   
43.              sp =(Spinner)findViewById(R.id.sp);  
44.   
45.             ll_left = (LinearLayout)findViewById(R.id.ll_left);  
46.   
47.              ll_right = (LinearLayout)findViewById(R.id.ll_right);  
48.   
49.         
50.   
51.             // 增加Button的高度，可以很方面地通过setHeight方法来实现。  
52.   
53.              btn.setHeight(80);  
54.   
55.         
56.   
57.             // 但如果要想在代码中改变某些组件，比如ImageButton、Spinner以及LinearLayout，  
58.   
59.              // 用setHeight或者setWidth的方式就不行了，因为这些组件中，没有提供这两个方法。  
60.   
61.             // 为此，可以通过LayoutParams这个类(这里我们用LinearLayout.LayoutParams)来实现这一点。  
62.   
63.         
64.   
65.              // 改变imagebtn的宽度和高度均为屏幕宽度的1/4  
66.   
67.             LinearLayout.LayoutParams imagebtn_params = newLinearLayout.LayoutParams(  
68.   
69.                  LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
70.   
71.              imagebtn_params.height = dm.widthPixels / 4;  
72.   
73.              imagebtn_params.width = dm.widthPixels / 4;  
74.   
75.             imagebtn.setLayoutParams(imagebtn_params);  
76.   
77.         
78.   
79.             // 设定sp的宽度为屏幕宽度的2/3  
80.   
81.              LinearLayout.LayoutParams sp_params = new LinearLayout.LayoutParams(  
82.   
83.                  LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
84.   
85.               sp_params.width = dm.widthPixels * 2 / 3;  
86.   
87.              sp.setLayoutParams(sp_params);  
88.   
89.         
90.   
91.             // 让两个EditText分别处于屏幕的左右两端。  
92.   
93.              // 在main.xml中，两个EditText分别处于ll_left和ll_right这两个LinearLayout中，且  
94.   
95.             // 处于ll_left的gravity属性为left，即置于其中的组件靠左；处于ll_right的gravity  
96.   
97.              // 属性为right，即置于其中的组件靠右。但是由于这两个LinearLayout的宽度属性均为  
98.   
99.             // wrap_content，所以它们靠在一起了，由此导致了两个EditText也靠在一起。  
100.   
101.              // 如果，我们把ll_left和ll_right的宽度能够设定为屏幕宽度的一半，那么两个EditText就  
102.   
103.             // 会分别处于屏幕的两端。  
104.   
105.              LinearLayout.LayoutParams ll_params = new LinearLayout.LayoutParams(  
106.   
107.                  LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
108.   
109.              ll_params.width = dm.widthPixels / 2;  
110.   
111.              ll_left.setLayoutParams(ll_params);  
112.   
113.               ll_right.setLayoutParams(ll_params);  
114.   
115.          }  
116.   
117.       }  

7.    运行结果：

       

        达到了我们在5中假定的目标。

 

8.    总结

       如果在程序中不能用setWidth和setHeight来改变大小的组件，通常可以通过LayoutParams的方式进行设定，正如6中代码的粗体字部分的代码那样。动态设定这些组件的margin也是采用类似的方式，比如：

[java] view plain copy

1. sp_params.width = dm.widthPixels * 2 / 3;  
2.   
3.      sp_params.leftMargin = 6;                // 用这种方式设定组件的margin  
4.   
5.       sp.setLayoutParams(sp_params);