Android应用程序UI设计(1)_布局

1.Android UI元素简介

Android使用xml文件进行布局。在布局文件中体现了一些UI元素。

1.Android.view.View（视图）

View是最基础的一个类，几乎所有的高级UI组件都是继承View类，如TextView，EditText，Button...。

一个视图（View）在屏幕上占据了一个矩形区域，它负责渲染这块矩形区域，也可以处理这块区域发生的事件，并且可以设置这块区域是否可见，是否可以获取焦点等。

2.Adroid.view.ViewGroup（视图容器）

View的容器，负责对这些view布局，并且允许嵌套。这是一个抽象类。他的实现类有：

a)LinearLayout进行水平或垂直布局。将元素进行线性的布局。

b)RelativeLayout进行相对布局。根据元素的相对位置布局。注意的是，出于性能考虑，位置只能计算一次，所以，如果控件A依 赖B ，那么B必须在A的前面。

c)FrameLayout 窗体布局，所有元素都防止在屏幕左上方，如果有多个元素，将重叠。

3.LayoutParameter（布局参数）

决定View的显示属性，比如长度、宽度、位置。

2.控件的布局

案例：

使用linearLayout布局



布局文件为：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <Button
        android:id="@+id/bt_1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/frameLayout"
/>
    
    <Button
        android:id="@+id/bt_2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/relativeLayout"
/>
    
    <Button
        android:id="@+id/bt_3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
 	android:text="@string/linearLayoutANDrelativeLayout"
/>
    
    <Button
        android:id="@+id/bt_4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/tableLayout"
/>
    
</LinearLayout>

使用FrameLayout布局



布局文件为：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
   
   <ImageView
       	android:id="@+id/photo"
       	android:src="@drawable/meinv"
android:contentDescription="@string/meinv"
       	android:layout_width="wrap_content"
       	android:layout_height="wrap_content"
    />
</FrameLayout>

linearLayout和RelativeLayout并用（视图容器的嵌套）



布局文件和Activity类代码

Left.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
     >
    
<TextView 
    	android:id="@+id/tv_left_1"
    	android:text="@string/left_1"
    
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    
    
    />
    
<TextView 
    	android:id="@+id/tv_left_2"
    	android:text="@string/left_2"
    
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    
    	android:layout_below="@id/tv_left_1"
    />
    
</RelativeLayout>

Right.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="#ffffff"
    >
    
<TextView 
    	android:id="@+id/tv_right_1"
    	android:text="@string/right_1"
    
    	android:layout_width="fill_parent"
    	android:layout_height="50dip"
    />
    
<TextView 
    	android:id="@+id/tv_right_2"
    	android:text="@string/right_2"
    
    	android:layout_width="fill_parent"
    	android:layout_height="50dip"
    
    	android:layout_below="@id/tv_right_1"
    />
    
</RelativeLayout>

Activity代码

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//实例化一个线性视图容器对象
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.HORIZONTAL);
setContentView(layout);
//实例化一个inflater对象，这个对象可以把xml解析成View
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//使用inflater把xml布局文件解析称View
RelativeLayout left = (RelativeLayout)inflater.inflate(R.layout.left, null);
RelativeLayout right = (RelativeLayout)inflater.inflate(R.layout.right, null);
//实例化一个布局参数对象
RelativeLayout.LayoutParams  layoutParameter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
//向视图容器中添加视图（在此处是视图容器，属于嵌套）
//可见，除了在布局文件中对activity布局之外，也完全可以在activity类中布局
layout.addView(left,100,100);
layout.addView(right,layoutParameter);
}

relativeLayout



布局文件为：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#888888"
    android:padding="10dip"
    >
    
    <TextView
       	 android:id="@+id/tv_input_name"
        	android:text="@string/input_name"
        	android:layout_height="wrap_content"
android:layout_width="wrap_content"
        />
    <EditText
        	android:id="@+id/et_name"
        	android:background="@android:drawable/editbox_background"
        	android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:hint="@string/input"
android:layout_below="@id/tv_input_name"
        />
    
    
     <Button
       	 android:id="@+id/bt_input_name_cancel"
        	android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/cancel"
android:layout_below="@id/et_name"
android:layout_alignParentRight="true"
android:layout_marginRight="10dip"
        />
     
     
    <Button
       	 android:id="@+id/bt_input_name_ok"
        	android:layout_below="@id/et_name"
        	android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/ok"
android:layout_toLeftOf="@id/bt_input_name_cancel"
android:layout_alignTop="@id/bt_input_name_cancel"
android:layout_marginRight="10dip"
        />
    
    
    </RelativeLayout>

TableLayout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   	android:stretchColumns="1" 
     >
    
<TableRow >
    
    	<TextView
    	    android:text="@string/name"
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    />
    	<EditText 
    	    android:hint="@string/input"
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    />
</TableRow>
    
    <TableRow >
    
    	<TextView
    	    android:text="@string/password"
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    />
    	<EditText 
    	    android:hint="@string/input"
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    />
</TableRow>
    <TableRow >
    
    	<Button
    	    android:text="@string/ok"
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    />
    	<Button
    	    android:text="@string/cancel"
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    />
</TableRow>
    
</TableLayout>