zoukankan      html  css  js  c++  java
  • 【转】Pro Android学习笔记(十三):用户界面和控制(1):UI开发

    目录(?)[-]

    1. UI开发
      1. 方式一通过XML文件
      2. 方式二通过代码
      3. 方式三XML代码

    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开发相关文章

  • 相关阅读:
    hibernate笔记--实体类映射文件"*.hbm.xml"详解
    struts2学习笔记--使用struts2插件实现ajax处理(返回json数据)
    struts2学习笔记--使用servletAPI实现ajax的一个小Demo
    Struts2学习笔记--使用Response下载文件和Struts2的StreamResult文件下载
    struts2学习笔记--上传单个和批量文件示例
    struts2学习笔记--拦截器(Interceptor)和登录权限验证Demo
    struts2学习笔记--使用Validator校验数据
    struts2学习笔记--OGNL表达式1
    easyui dialog 扩展load
    easyui filter 过滤时间段
  • 原文地址:https://www.cnblogs.com/blongfree/p/5047880.html
Copyright © 2011-2022 走看看