1. HorizontalScrollView

  本来,画廊式的图片浏览器,使用Android中的Gallery就能轻松完成,但是Google说Gallery每次切换图片时都要新建视图,造成太多的资源浪费,已经在安卓api 19之后被彻底废弃,Google推荐使用ViewPager 或者 HorizontalScrollView来实现Gallery的效果。网上对此的资料太杂,有部分资料写得太高深,完全看不懂。我搞了一个下午,才使用HorizontalScrollView完成画廊式的图片浏览器,如下图:

2. HorizontalScrollView案例:

(1)首先我们来到主布局文件activity_main.xml,如下:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:layout_gravity="center_horizontal"
  5. android:orientation="vertical" >
  6. <ImageView
  7. android:id="@+id/imageView1"
  8. android:layout_width="match_parent"
  9. android:layout_height="200dp"
  10. android:paddingTop="10dp" />
  11. <HorizontalScrollView
  12. android:layout_width="match_parent"
  13. android:layout_height="wrap_content"
  14. android:layout_gravity="center_vertical"
  15. android:scrollbars="horizontal" >
  16. <LinearLayout
  17. android:id="@+id/linearLayout1"
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:layout_gravity="center_vertical"
  21. android:orientation="horizontal" >
  22. </LinearLayout>
  23. </HorizontalScrollView>
  24. <TextView
  25. android:gravity="center_horizontal"
  26. android:layout_width="match_parent"
  27. android:layout_height="wrap_content"
  28. android:id="@+id/tv"
  29. android:text="简介描述"
  30. />
  31. </LinearLayout>

(2)接下来直接来到主Activity,也就是MainActivity,如下:

  1. package com.himi.horizontalscrollviewdemo;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.Gravity;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.view.ViewGroup;
  8. import android.widget.ImageView;
  9. import android.widget.LinearLayout;
  10. import android.widget.LinearLayout.LayoutParams;
  11. import android.widget.TextView;
  12. public class MainActivity extends Activity {
  13. private LinearLayout linearLayout1;
  14. private ImageView imageView1;
  15. private TextView tv;
  16. // 把要显示的图片放到一个图片id数组里面便于操作
  17. private int[] imageId = new int[] { R.drawable.img1, R.drawable.img2,
  18. R.drawable.img3, R.drawable.img4,
  19. R.drawable.img5, R.drawable.img6
  20. };
  21. @Override
  22. protected void onCreate(Bundle savedInstanceState) {
  23. super.onCreate(savedInstanceState);
  24. setContentView(R.layout.activity_main);
  25. // 获取组件
  26. linearLayout1 = (LinearLayout) findViewById(R.id.linearLayout1);
  27. imageView1 = (ImageView) findViewById(R.id.imageView1);
  28. tv = (TextView)findViewById(R.id.tv);
  29. for (int i = 0; i < imageId.length; i++) {
  30. // 新建一个线性布局
  31. LinearLayout linearLayout = new LinearLayout(this);
  32. // 设置新生成线性布局的参数,宽度为100,高度为匹配父组件,也就是水平滚动视图的高度
  33. LayoutParams layoutParams = new LayoutParams(100,
  34. ViewGroup.LayoutParams.MATCH_PARENT);
  35. // 设置线性布局内的组件水平居中
  36. layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
  37. // 设置新生成的线性布局android:orientation="vertical"
  38. linearLayout.setOrientation(LinearLayout.VERTICAL);
  39. // 应用到新生成的线性布局
  40. linearLayout.setLayoutParams(layoutParams);
  41. // 新建一个图片视图
  42. ImageView imageView = new ImageView(this);
  43. // 这里由于id不能为字符的缘故,所有对图片的id分别设为20000,20001,20002,...便于下面的图片点击监听器所控制
  44. imageView.setId(i + 20000);
  45. // 将数组中的第i张图片放到图片视图
  46. imageView.setImageResource(imageId[i]);
  47. // 自动缩放为宽高比
  48. imageView.setAdjustViewBounds(true);
  49. // 图片的高度为80dp
  50. imageView.setMaxHeight(100);
  51. imageView.setPadding(10, 10, 10, 10);
  52. imageView.setOnClickListener(new OnClickListener() {
  53. @Override
  54. public void onClick(View view) {
  55. // 把点击的图片id取出之后,减20000就是要显示的图片在图片数组的位置了。
  56. imageView1.setImageResource(imageId[view.getId() - 20000]);
  57. switch (view.getId() - 20000) {
  58. case 0:
  59. tv.setText("安徽建筑大学南校区大门");
  60. break;
  61. case 1:
  62. tv.setText("安徽建筑大学南校区教学楼,楼下草坪");
  63. break;
  64. case 2:
  65. tv.setText("安徽建筑大学南校区,傍晚的图书馆");
  66. break;
  67. case 3:
  68. tv.setText("安徽建筑大学南校区,易海傍晚的晚霞");
  69. break;
  70. case 4:
  71. tv.setText("健身房的美女,大长腿");
  72. break;
  73. case 5:
  74. tv.setText("健身房的美女,大长腿");
  75. break;
  76. default:
  77. break;
  78. }
  79. }
  80. });
  81. // 将图片视图加载到新生成的线性布局之中
  82. linearLayout.addView(imageView);
  83. // 新生成一个标签文本
  84. TextView textView = new TextView(this);
  85. //textView.setText("图片" + i);
  86. switch (i) {
  87. case 0:
  88. textView.setText("校门");
  89. break;
  90. case 1:
  91. textView.setText("教学楼");
  92. break;
  93. case 2:
  94. textView.setText("图书馆");
  95. break;
  96. case 3:
  97. textView.setText("晚霞");
  98. break;
  99. case 4:
  100. textView.setText("健身房美女");
  101. break;
  102. case 5:
  103. textView.setText("健身房美女");
  104. break;
  105. default:
  106. break;
  107. }
  108. textView.setTextSize(10);
  109. // 标签文本在水平位置居中
  110. textView.setGravity(Gravity.CENTER);
  111. // 添加到新生成的线性布局之后
  112. linearLayout.addView(textView);
  113. //添加到LinearLayout1
  114. linearLayout1.addView(linearLayout);
  115. }
  116. }
  117. }

(3)运行到手机上(HTC),效果如下:

  • 程序刚刚启动的效果如下:

Android 高级UI设计笔记15:HorizontalScrollView之 实现画廊式图片浏览器的更多相关文章

  1. Android 高级UI设计笔记14:Gallery(画廊控件)之 3D图片浏览

    1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...

  2. Android 高级UI设计笔记11:Gallery(画廊控件)之Gallery基本使用

    1. 这里要向大家介绍Android控件Gallery(画廊控件) Gallery控件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Galler ...

  3. Android 高级UI设计笔记13:Gallery(画廊控件)之 循环显示图像

    1. 循环显示图像的原理  循环显示有些类似于循环链表,最后一个结点的下一个结点又是第1个结点.循环显示图像也可以模拟这一点. 也许细心的读者从上一节实现的ImageAdapter类中会发现些什么.对 ...

  4. Android 高级UI设计笔记07:RecyclerView 的详解

    1. 使用RecyclerView       在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...

  5. Android 高级UI设计笔记06:仿微信图片选择器(转载)

    仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...

  6. Android 高级UI设计笔记21:Android SegmentView(分段选择控件)

    1. 分段控制(SegmentView) 首先我们先看看什么是SegmentView的效果,如下: 分段控制这个View控件是ios7的分段控制,和QQ消息页面顶部的效果一样,android没有这个控 ...

  7. Android 高级UI设计笔记19:PopupWindow使用详解

    1. PopupWindow使用 PopupWindow这个类用来实现一个弹出框,可以使用任意布局的View作为其内容,这个弹出框是悬浮在当前activity之上的. 2. PopupWindow使用 ...

  8. Android 高级UI设计笔记17:Android在非UI线程中显示Toast

    1. 子线程的Toast怎么显示不出来? 因为Toast在创建的时候会依赖于一个Handler,并且一个Handler是需要有一个Looper才能够创建,而普通的线程是不会自动去创建一个Looper对 ...

  9. Android 高级UI设计笔记09:Android如何实现无限滚动列表

    ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...

随机推荐

  1. LightOJ 1245 Harmonic Number (II)(找规律)

    http://lightoj.com/volume_showproblem.php?problem=1245 G - Harmonic Number (II) Time Limit:3000MS    ...

  2. hdu 5424 Rikka with Graph II (BestCoder Round #53 (div.2))(哈密顿通路判断)

    http://acm.hdu.edu.cn/showproblem.php?pid=5424 哈密顿通路:联通的图,访问每个顶点的路径且只访问一次 n个点n条边 n个顶点有n - 1条边,最后一条边的 ...

  3. HDU 3333 Turing Tree (树状数组)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3333 题意就是询问区间不同数字的和. 比较经典的树状数组应用. //#pragma comment(l ...

  4. UVaLive 6608 Cabin Baggage (水题)

    题意:给定四个数代表长宽高和重,问你是不是满足下面条件,长不高于56,宽不宽于45,高不高于25,或者总和不大于125,并且重量不高于7. 析:判断输出就好,注意这个题是或,不要想错了. 代码如下: ...

  5. html 4.01速查手册

    来自 W3School 的 HTML 快速参考.可以打印它,以备日常使用. HTML Basic Document <html> <head> <title>Doc ...

  6. 使用MySQL中的EXPLAIN解释命令来检查SQL

    我们看到许多客户的系统因为SQL及数据库设计的很差所以导致许多性能上的问题,这些问题不好解决,但是可以采用一套简单的策略来检查生产系统,发现并纠正一些共性问题. 很显然,您应该尽最大努力设计出最好的数 ...

  7. 动态链接库 仅有.dll文件时候的使用方法

    在没有.h和.lib文件时,需要函数指针和WIN32 API函数 LoadLibrary, GetProcAddress 和FreeLibrary 只需要.dll文件即可(将.dll文件置入工程目录中 ...

  8. wp———图片切换效果

    此篇文章主要是记录一下使用XamlReader加载动画时遇到的一些问题. 首先呢,把源码附上 <phone:PhoneApplicationPage x:Class="PicChang ...

  9. Jquery Mobile 百度地图 Demo

    首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理:1.通过百度拾取坐标系统获得点位的坐标. http://api.map.baidu.com/lb ...

  10. Educational Codeforces Round 4 C. Replace To Make Regular Bracket Sequence 栈

    C. Replace To Make Regular Bracket Sequence 题目连接: http://www.codeforces.com/contest/612/problem/C De ...