Android用户界面设计之创建列表视图程序

列表视图（ListView）是Android平台下用于显示不定数量的数据最有用的视图控件之一。在这个教程中，我们将向你展示如何使用ListView来浏览文章列表。

在之前的文章中，你看到了许多关于不同布局控件的教程。应用程序本身非常简单：它将显示文章标题列表，当点击标题时，显示文章内容。这篇文章的节奏将比我们的入门教程更快一些。如果你对基本的Android控件或概念不熟悉你可能需要复习这个网站上我们其它的一些教程，甚至是Android API参考。最终的开源代码可以在Google code上下载到。

步骤0: 创建项目

在Eclipse中创建一个新的Android项目。我们将项目命名为MT-List，起始活动命名为TutListActivity。这个Activity必须继承ListActivity类，它是一个特殊的Activity类，用于帮助管理ListView控件。我们使用的是Android2.3.3的API。

步骤1: 设计列表界面

实际上，这一步要做的很少。一个由重复项组成的ListView控件，每一项都有相同的布局（一项一个模板）。我们想要显示一个文章标题列表。每个标题都是ListView中的一项。因此，每个列表项的模板只需要一个TextView控件。在你的项目中添加一个叫做list_item.xml布局资源文件，它描述了列表中的每一项的模板布局。在这个例子中，它看起来可能像这样：

 
 
 
 
    
  
  
  
  
  1.    
    2. 
  
  
  
  
  2.   
  
  
  
  
  3.   android:layout_width="fill_parent"   
    4. 
  
  
  
  
  4.   android:layout_height="wrap_content"   
    5. 
  
  
  
  
  5.   android:textSize="24dp"   
    6. 
  
  
  
  
  6.   android:padding="6dp"   
    7. 
  
  
  
  
  7. /> 
    8.

字号加上填充属性值要确保在平均大小的屏幕下列表每一项对于平均手指的大小来说是足够大的触摸目标。

步骤2: 为ListView填充数据

ListView控件设计用于从数据源加载数据。可以使用适配器从数据库，数组或其它数据源读取数据。在这个程序中我们使用数组作为数据源。今后，你可以将数组替换为某些实时数据源。在你的项目中创建两个字符串数组（你可以将他们添加到strings.xml或者一个分离的arrays.xml文件，随你愿意）。将一个数组取名为“tut_titles”，另一个名为“tut_links”。用网站上的有效的标题和URL填充这两个数组。下面是我们的数组：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3. Design & Build a 1980s iOS Phone App: Design Comp Slicing  
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. Best of Tuts+ in February 2011  
    7. 
  
  
  
  
  7.    
    8. 
  
  
  
  
  8. Create a Brick Breaker Game with the Corona SDK: Game Controls  
    9. 
  
  
  
  
  9.    
    10. 
  
  
  
  
  10. Exporting Graphics for Mobile Apps: PNG or JPEG?  
    11. 
  
  
  
  
  11.    
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. Android Tablet Design  
    14. 
  
  
  
  
  14.    
    15. 
  
  
  
  
  15. Build a Titanium Mobile Pizza Ordering App: Order Form Setup  
    16. 
  
  
  
  
  16.    
    17. 
  
  
  
  
  17. Create a Brick Breaker Game with the Corona SDK: Application Setup  
    18. 
  
  
  
  
  18.    
    19. 
  
  
  
  
  19. Android Tablet Virtual Device Configurations  
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21.   
    22. 
  
  
  
  
  22. Build a Titanium Mobile Pizza Ordering App: Topping Selection  
    23. 
  
  
  
  
  23.    
    24. 
  
  
  
  
  24. Design & Build a 1980s iOS Phone App: Interface Builder Setup  
    25. 
  
  
  
  
  25.    
    26. 
  
  
  
  
  26.  
    27. 
  
  
  
  
  27.     
    28. 
  
  
  
  
  28. http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/80s-phone-app-slicing/  
    29. 
  
  
  
  
  29.    
    30. 
  
  
  
  
  30. http://mobile.tutsplus.com/articles/news/best-of-tuts-in-february-2011/  
    31. 
  
  
  
  
  31.    
    32. 
  
  
  
  
  32. http://mobile.tutsplus.com/tutorials/corona/create-a-brick-breaker-game-with-the-corona-sdk-game-controls/  
    33. 
  
  
  
  
  33.    
    34. 
  
  
  
  
  34. http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/mobile-design_png-or-jpg/  
    35. 
  
  
  
  
  35.    
    36. 
  
  
  
  
  36. http://mobile.tutsplus.com/tutorials/android/android-tablet-design/  
    37. 
  
  
  
  
  37.  
    38. 
  
  
  
  
  38.  http://mobile.tutsplus.com/tutorials/appcelerator/build-a-titanium-mobile-pizza-ordering-app-order-form-setup/  
    39. 
  
  
  
  
  39.    
    40. 
  
  
  
  
  40. http://mobile.tutsplus.com/tutorials/corona/corona-sdk_brick-breaker/  
    41. 
  
  
  
  
  41.  
    42. 
  
  
  
  
  42.  http://mobile.tutsplus.com/tutorials/android/android-sdk_tablet_virtual-device-configuration/  
    43. 
  
  
  
  
  43.  
    44. 
  
  
  
  
  44.  http://mobile.tutsplus.com/tutorials/appcelerator/pizza-ordering-app-part-2/  
    45. 
  
  
  
  
  45.    
    46. 
  
  
  
  
  46. http://mobile.tutsplus.com/tutorials/iphone/1980s-phone-app_interface-builder-setup/  
    47. 
  
  
  
  
  47.    
    48. 
  
  
  
  
  48.  
    49.

当然这个数据是静态的。在一些情况下，使用静态数据对于一个ListView来说也是有意义的。对于这些情况，使用一个字符串数组资源非常简单和方便。需要确保标题和链接的排序是一致的，这样两个数组才能匹配。

#p#

步骤3: 将数组适配到ListView

现在程序已经有数据了，现在来显示它们。回到TutListActivity.java，修改onCreate()方法，使用setListAdapter()方法来加载数据。和常规的活动不一样，对于整个活动就仅仅只是一个ListView的情况，ListActivity不需要使用setContentView()。完成后，你的整个ListActivity将看起来像这样：

 
 
 
 
    
  
  
  
  
  1. public class TutListActivity extends ListActivity {   
    2. 
  
  
  
  
  2. @Override  
    3. 
  
  
  
  
  3.  public void onCreate(Bundle savedInstanceState) {   
    4. 
  
  
  
  
  4. super.onCreate(savedInstanceState);   
    5. 
  
  
  
  
  5. setListAdapter(ArrayAdapter.createFromResource(getApplicationContext(), R.array.tut_titles, R.layout.list_item));   
    6. 
  
  
  
  
  6. }  
    7. 
  
  
  
  
  7. } 
    8.

这时候，你已经可以运行这个程序了。你将看到一个具有所有本教程中所有标题的ListView。上划和下划都正常。但是，点击标题还没有任何反应。

步骤4：处理ListView条目点击

处理ListView中条目的点击与其它视图对象的处理方式相似：使用侦听器（listener）。在这里，我们关注OnTimeClickListener。你可能注意到我们还没有直接处理过ListView对象。现在是时候了。在ListActivity中，简单地调用getListView()方法来遍历ListView，然后调用setOnItemClickListener()方法并且一次性实现它们：

 
 
 
 
    
  
  
  
  
  1. getListView().setOnItemClickListener(new OnItemClickListener() {  
    2. 
  
  
  
  
  2.    @Override   
    3. 
  
  
  
  
  3.     public void onItemClick(AdapterView parent, View view,  
    4. 
  
  
  
  
  4.      int position, long id) {   
    5. 
  
  
  
  
  5.       // TBD  
    6. 
  
  
  
  
  6.      }   
    7. 
  
  
  
  
  7.    }  
    8. 
  
  
  
  
  8. ); 
    9.

onItemClick()方法会在用户每次点击列表视图中的每一项时被调用。为了方便，它可以传入几个有用的参数，其中一个我们需要它来启动查看器活动（viewer activity）。等等，什么是查看器活动？

#p#

步骤5：创建查看器活动

非常好的问题。让我们现在就来创建一个查看器活动！这个活动将用于向用户显示教程内容。通过继承Activity创建一个新的类，并把它命名为TutViewerActivity.java。为它创建一个布局资源文件，文件只包括一项：一个WebView控件。布局文件应该看起来如下：

在TutViewerActivity类的onCreate()方法中，调用setContentView()方法并

 
 
 
 
    
  
  
  
  
  1.    
    2. 
  
  
  
  
  2.  
  
  
  
  
  3.    android:layout_width="match_parent"   
    4. 
  
  
  
  
  4.    android:layout_height="match_parent"   
    5. 
  
  
  
  
  5.    android:id="@+id/tutView">   
    6. 
  
  
  
  
  6.  
    7.

将这个布局传入。***，不要忘了将这个活动添加到你的AndroidManifest.xml 文件。

步骤6：启动Details Activity

注意力回到TutListActivity一会。让我们看看我们需要做什么来启动这个查看器Activity显示合适文章链接。在onItemClick()方法中，被点击项的位置被作为一个int型的值传入。这就是我们需要用来访问文章链接数组的值。

链接数组里的字符串值是URL。传递URL到另一个活动的简便方法是通过setData()方法向Intent添加一个Uri。下面是onItemClick()的最终实现，它启动查看器活动，传入合适的URL：

 
 
 
 
    
  
  
  
  
  1. @Override   
    2. 
  
  
  
  
  2. public void onItemClick(AdapterView parent, View view,  
    3. 
  
  
  
  
  3.   int position, long id) {   
    4. 
  
  
  
  
  4.   String content = links[position];   
    5. 
  
  
  
  
  5.   Intent showContent = new Intent(getApplicationContext(), TutViewerActivity.class);   
    6. 
  
  
  
  
  6.   showContent.setData(Uri.parse(content)); startActivity(showContent);   
    7. 
  
  
  
  
  7. } 
    8.

如果你只是将这些代码直接粘贴到onCreate()方法的***面，你会注意到links变量还没有定义。因为它将用于OnItemClickListener类，变量必须是一个final值，如下：

 
 
 
 
    
  
  
  
  
  1. final String[] links = getResources().getStringArray(R.array.tut_links); 
    2.

这一行必须放在OnItemClickListener的定义之前。是的，你可以将它定义成非final的成员变量。对于更复杂的情况，那样做甚至是必须的。但是在这里，我们可以在方法中放置所有代码。现在如果你运行这个程序，你将得到一个空白的查看器界面。活动正确地启动了，但是我们需要去连接查看器活动来在WebView控件中加载URL。

步骤7：加载URL

注意力回到TutViewerActivity.java文件。在调用setContentView()方法之后，添加代码，在传入的Intent中检索Uri并将它转换成String变量。然后将一个调用添加到WebView类的loadUrl()方法。整个TutViewerActivity类的代码将看起来像这样：

 
 
 
 
    
  
  
  
  
  1. public class TutViewerActivity extends Activity {   
    2. 
  
  
  
  
  2. @Override   
    3. 
  
  
  
  
  3.  public void onCreate(Bundle savedInstanceState) {   
    4. 
  
  
  
  
  4.  super.onCreate(savedInstanceState);   
    5. 
  
  
  
  
  5.  setContentView(R.layout.tut_view);   
    6. 
  
  
  
  
  6.  Intent launchingIntent = getIntent();   
    7. 
  
  
  
  
  7.  String content = launchingIntent.getData().toString();   
    8. 
  
  
  
  
  8.  WebView viewer = (WebView) findViewById(R.id.tutView);   
    9. 
  
  
  
  
  9.  viewer.loadUrl(content);   
    10. 
  
  
  
  
  10. }   
    11. 
  
  
  
  
  11. } 
    12.

现在再运行程序。正常了么？还没有！***一个细节：你必须把网终权限添加到AndroidManifest.xml文件。现在运行这个程序，你将看到程序正常运行了：

步骤8：改善体验（可选）目前来看，用户体验只是做到了仅仅是可以用。ListView展示所有文章标题，用户可以点击列表某一项并且可以转到一个带有WebView控件的活动来展示合适的URL的内容。为了将这个最基本的实现变得更优雅一些你可能考虑以下几个方面：

设置浏览视图的初始缩放以应对接来的缩放

配置WebView使其包含更多增强浏览体验的控件

动态加载文章列表，而不是使用静态数组

为ListView添加特效视觉效果

充分利用大屏幕

向ListView增加附加的信息：副标题，难度级别，图标，已读指示，收藏按钮等。

总结

ListView小工具是在界面上以列表形式组织数据的快速方式。在这个教程中我们只是接触到ListView控件的最表层。然而，你学到了最基础的：创建列表项，使用数据适配器，以及处理列表项点击。

当前题目：Android用户界面设计之创建列表视图程序
网页网址：http://www.shufengxianlan.com/qtweb/news39/477089.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站内链知识

同城分类信息

php空间　　 　上市集团网站建设　　 　高端网站建设　　 　贵阳联通机房　　 　明安消防器材　　 　教育网站设计方案　　 　成都网站建设　　 　成都小程序开发　　 　微信小程序开发　　 　混凝土搅拌罐车　　 　成都艾瑞格　　 　双流做网站　　 　成都LED显示屏　　 　成都app制作　　 　做网站　　 　四川主机托管　　 　重庆花箱　　 　西部信息中心　　 　正泰动物制药　　 　户外广告设计