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

时间: 2024-09-30 06:44:58

【转】Pro Android学习笔记(十三):用户界面和控制(1):UI开发的相关文章

【转】Pro Android学习笔记(二五):用户界面和控制(13):LinearLayout和TableLayout

目录(?)[-] 布局Layout 线性布局LinearLayout 表格布局TableLayout 布局Layout Layout是容器,用于对所包含的view进行布局.layout是view的子类,所以可以作为view嵌入到其他的layout中.Android的layout有LinearLayout.TableLayout,RelativeLayout.FrameLayout.GridLayout. 线性布局:LinearLayout 这是最常用的,有anroid:orientation来确

【转】 Pro Android学习笔记(十九):用户界面和控制(7):ListView

目录(?)[-] 点击List的item触发 添加其他控件以及获取item数据 ListView控件以垂直布局方式显示子view.系统的android.app.ListActivity已经实现了一个只含有一个ListView的Activity,并通过setListAdapter()方法来管理adapter.我们可以通过扩展ListActivity来实现. 我们要在整个屏幕上显示ListView,我们直接继承使用ListActivity,不需要在定义自己的layout XML文件,我们在上一学习中

【转】 Pro Android学习笔记(二二):用户界面和控制(10):自定义Adapter

目录(?)[-] 设计Adapter的布局 代码部分 Activity的代码 MyAdapter的代码数据源和构造函数 MyAdapter的代码实现自定义的adapter MyAdapter的代码继续探讨BaseAdapter 我们可以同继承抽象类BaseAdapter来实现自己的Adapter,自己设置子View的UI,不同子View可以由不同的布局,并自己进行数据和子view中数据的对应关系.图是例子的呈现结果,我们有很多图标,对这些图标按一定大小进行缩放,然后布局在GridView中.这个

Pro Android学习笔记(二九):用户界面和控制(17):include和merge

xml控件代码重用:include 如果我们定义一个控件,需要在不同的layout中重复使用,或者在同一个layout中重复使用,可以采用include的方式.例如定义my_button.xml如下 <?xml version="1.0" encoding="utf-8"?> <Button xmlns:android="http://schemas.android.com/apk/res/android"     androi

【转】 Pro Android学习笔记(二九):用户界面和控制(17):include和merge

目录(?)[-] xml控件代码重用include xml控件代码重用merge 横屏和竖屏landsacpe portrait xml控件代码重用:include 如果我们定义一个控件,需要在不同的layout中重复使用,或者在同一个layout中重复使用,可以采用include的方式.例如定义my_button.xml如下 <?xml version="1.0" encoding="utf-8"?> <Button xmlns:android=

【转】 Pro Android学习笔记(五二):ActionBar(5):list模式

可以在action bar中加入spinner的下来菜单,有关spinner,可以参考Pro Android学习笔记(二十):用户界面和控制(8):GridView和Spinner. list的样式和theme有关,如果theme设置不正确,还可能会出现异常. 相关的代码如下: public class ListActionBarDemo extends SearchTestCase3 implements OnNavigationListener{ //List触发的回调函数接口    @Ov

Pro Android学习笔记(三三):Menu(4):Alternative菜单

什么是Alternative menu(替代菜单) 举个例子,Activity显示一个文本文件.如果用户想对文本文件进行编辑,Activity不提供编辑能力,但可由其他activity或者其他应用提供.我们将相关信息存储在一个intent中,例如该文本的Uri.这个intent可以匹配系统的多个应用,替代菜单将这些应用一一列出,菜单项的title就是该可被调用的activity的名字,图标也为该可被调用的activity的图表. 小例子说明 我们通过一个小例子进行学习,简单地打开一个URL:we

Pro Android学习笔记 ActionBar(1):Home图标区

 Pro Android学习笔记(四八):ActionBar(1):Home图标区 2013年03月10日 ? 综合 ? 共 3256字 ? 字号 小 中 大 ? 评论关闭 ActionBar在Android 3.0 SDK中为平板引入,在4.0中也可以在phone中使用.在title中提供类似tab和菜单的效果,有三种形式:Tabbed action bar,list action bar和standard action bar,我们将在小例子中进行示范. Home Icon 在Actio

【转】 Pro Android学习笔记(四二):Fragment(7):切换效果

目录(?)[-] 利用setTransition 利用setCustomAnimations 通过ObjectAnimator自定义动态效果 程序代码的编写 利用fragment transaction进行切换,很方便提供切换的效果. 利用setTransition() 在Pro Android学习笔记(三九):Fragment(4):基础小例子-续的“Step 4:实现showDetail(int index),如何管理fragment”中,介绍了如何在容器FrameLayout中通过frag

【转】 Pro Android学习笔记(四十):Fragment(5):适应不同屏幕或排版

目录(?)[-] 设置横排和竖排的不同排版风格 改写代码 对于fragment,经常涉及不同屏幕尺寸和不同的排版风格.我们在基础小例子上做一下改动,在横排的时候,仍是现实左右两个fragment,在竖排时,如下图显示: 屏幕上只显示一个fragment,点击列表上的数目,进入到简介的activity.下面介绍实现的方式. 设置横排和竖排的不同排版风格 在 Pro Android学习笔记(四):了解Android资源(下)的“资源和配置的变更”中,我们介绍了如何同资源文件夹名设置不同资源.缺省的l