Pro Android学习笔记（十三）：用户界面和控制（1）：UI开发

UI开发

先理清一些UI概念： view、widget、control：这三个名词其实没有什么区别，都是一个UI元素，例如一个button。Container（容器）：包含其他view，例如grid可以认为是容器，它有cell，每个cell可以是一个view。Layout： 对容器们和view们的排版，可以包含其他layout。

Android提供常用的UI（例如文字框）以及适合移动设备的控制，基础类为android.view.View和android.view.ViewGroup。从名字中很容易看出，后者也是view，但是包含其他view，它是layout的基类，而layout本身也是一个container。

在Android中创建UI，可以通过代码，也可以通过XML文件，也可以两者相结合。我们以一个简单例子来看看这三种情况。

方式一：通过XML文件

这种方式在之前学习资源时已经涉及。我们的目标很简单，通过xml定义一个layout，这个layout里面有两个子layout，分别为nameContainer和addressContainer。nameContainer由两个view组成，采用水平排放的方式，而addressContainer也有两个view组成，采用垂直摆放的方式。如图所示，很简单。

<?xml version="1.0" encoding="utf-8"?> 
<!-- Root view : parentContainer --> 
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
   
    <!-- name Container -->
    <LinearLayout android:orientation="horizontal" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name: "/>
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello Android"/>
    </LinearLayout>

    <!-- address Container -->
    <LinearLayout android:orientation="vertical" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:text="Address: "/>
        <TextView android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:text="Earth, Solar, Galaxy"/>
    </LinearLayout>
</LinearLayout>

这个xml的位于/res/layout目录下，名字为ui_basic.xml，我们在代码中通过setContentView(R.layout.ui_basic); 对其进行调用。

方式二：通过代码

//在这个小例子中，我们不能使用xml，而是完全对同代码来实现界面
public class UiBasicCodeTest extends Activity{ 
    private LinearLayout nameContainer = null;
    private LinearLayout addressContainer = null;
    private LinearLayout parentContainer = null; 
     
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        createNameContainer();      //实现name Container，内含2个水平摆放的view
        createAddressContainer();  //实现address Container，内含2个垂直摆放的view 
        createParentContainer();     //实现parentContainer，内含nameAddress和addressContain
        setContentView(parentContainer);//通过setContentView来在activity中显示root view，root view对自己进行渲染，发现有两个child，这两个child对自己渲染，如果有children，再一步一步解析下去。
    }
    
    //实现name Container
    private void createNameContainer(){
        nameContainer = new LinearLayout(this);
        //layout带有布局功能，例如设置横排/竖排，可以包含view，也可以包括其他layout，所以它同时也是一个容器。
        //在Android学习笔记系列中，我们使用FILL_PARENT，包括在xml中使用fill_parent，在API Level 8（Android 2.2）后，改为match_parent
        nameContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
        nameContainer.setOrientation(LinearLayout.HORIZONTAL);
        //设置内部的view，并放入容器或layout
        TextView nameLb = new TextView(this);
        nameLb.setText("Name: ");
        TextView nameValue = new TextView(this);
        nameValue.setText("Hello World");         
        nameContainer.addView(nameLb);
        nameContainer.addView(nameValue);
    }

    //实现address Container，和name Container相似，不同是改为垂直摆放 
    private void createAddressContainer(){
        addressContainer = new LinearLayout(this);
        addressContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
        addressContainer.setOrientation(LinearLayout.VERTICAL);
       
        TextView addressLb = new TextView(this);
        addressLb.setText("Address: ");
        TextView addressValue = new TextView(this);
        addressValue.setText("Guangzhou, Guangdong , China");         
        addressContainer.addView(addressLb);
        addressContainer.addView(addressValue);
    }
   
    //实现root view ，和前面两个container相似，不同是addView不是加入普通的view，而是加入layout
    private void createParentContainer(){
        parentContainer = new LinearLayout(this);
        parentContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
        parentContainer.setOrientation(LinearLayout.VERTICAL);
        parentContainer.addView(nameContainer);
        parentContainer.addView(addressContainer);
    }
}

方式三：XML+代码

实际上，我们真正编程时会采用XML+代码的方式，将UI的设计交给XML，而将涉及动态变化的的内容交给代码。在小例子中，很明显，三个layout的架构，渲染，排版是固定的，而部分的textview内容也是固定的，例如“Name : ”和“Address : ”，这些适合通过XML来设定，用XML还有一个好处，可能根据用户系统语言设定提供不同内容，具体参见。而具体的名字和地址内容，采用代码方式。

相关的xml如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" > 
    <!-- name Container -->
    <LinearLayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ui_basic_name"/>
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ui_name"/>
    </LinearLayout>

    <!-- address Container -->
    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/ui_basic_address"/>
        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/ui_address"/>
    </LinearLayout>
</LinearLayout>

对应的代码如下：

     protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //我们要注意顺序，必须先setContentView(),才能通过findViewById()来获取view的对象，否则会出现NullPointerException的错误
        setContentView(R.layout.ui_basic_recommend); 
        TextView nameValue = (TextView)findViewById(R.id.ui_name);
        nameValue.setText("Data");
        TextView addressValue = (TextView)findViewById(R.id.ui_address);
        addressValue.setText("Spaceship Enterprise");
    }

相关链接： 我的Android开发相关文章