Android 高级UI设计笔记15:HorizontalScrollView之 实现画廊式图片浏览器
1. HorizontalScrollView
本来,画廊式的图片浏览器,使用Android中的Gallery就能轻松完成,但是Google说Gallery每次切换图片时都要新建视图,造成太多的资源浪费,已经在安卓api 19之后被彻底废弃,Google推荐使用ViewPager 或者 HorizontalScrollView来实现Gallery的效果。网上对此的资料太杂,有部分资料写得太高深,完全看不懂。我搞了一个下午,才使用HorizontalScrollView完成画廊式的图片浏览器,如下图:
2. HorizontalScrollView案例:
(1)首先我们来到主布局文件activity_main.xml,如下:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_gravity="center_horizontal"
- android:orientation="vertical" >
- <ImageView
- android:id="@+id/imageView1"
- android:layout_width="match_parent"
- android:layout_height="200dp"
- android:paddingTop="10dp" />
- <HorizontalScrollView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_gravity="center_vertical"
- android:scrollbars="horizontal" >
- <LinearLayout
- android:id="@+id/linearLayout1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_vertical"
- android:orientation="horizontal" >
- </LinearLayout>
- </HorizontalScrollView>
- <TextView
- android:gravity="center_horizontal"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:id="@+id/tv"
- android:text="简介描述"
- />
- </LinearLayout>
(2)接下来直接来到主Activity,也就是MainActivity,如下:
- package com.himi.horizontalscrollviewdemo;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.Gravity;
- import android.view.View;
- import android.view.View.OnClickListener;
- import android.view.ViewGroup;
- import android.widget.ImageView;
- import android.widget.LinearLayout;
- import android.widget.LinearLayout.LayoutParams;
- import android.widget.TextView;
- public class MainActivity extends Activity {
- private LinearLayout linearLayout1;
- private ImageView imageView1;
- private TextView tv;
- // 把要显示的图片放到一个图片id数组里面便于操作
- private int[] imageId = new int[] { R.drawable.img1, R.drawable.img2,
- R.drawable.img3, R.drawable.img4,
- R.drawable.img5, R.drawable.img6
- };
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- // 获取组件
- linearLayout1 = (LinearLayout) findViewById(R.id.linearLayout1);
- imageView1 = (ImageView) findViewById(R.id.imageView1);
- tv = (TextView)findViewById(R.id.tv);
- for (int i = 0; i < imageId.length; i++) {
- // 新建一个线性布局
- LinearLayout linearLayout = new LinearLayout(this);
- // 设置新生成线性布局的参数,宽度为100,高度为匹配父组件,也就是水平滚动视图的高度
- LayoutParams layoutParams = new LayoutParams(100,
- ViewGroup.LayoutParams.MATCH_PARENT);
- // 设置线性布局内的组件水平居中
- layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
- // 设置新生成的线性布局android:orientation="vertical"
- linearLayout.setOrientation(LinearLayout.VERTICAL);
- // 应用到新生成的线性布局
- linearLayout.setLayoutParams(layoutParams);
- // 新建一个图片视图
- ImageView imageView = new ImageView(this);
- // 这里由于id不能为字符的缘故,所有对图片的id分别设为20000,20001,20002,...便于下面的图片点击监听器所控制
- imageView.setId(i + 20000);
- // 将数组中的第i张图片放到图片视图
- imageView.setImageResource(imageId[i]);
- // 自动缩放为宽高比
- imageView.setAdjustViewBounds(true);
- // 图片的高度为80dp
- imageView.setMaxHeight(100);
- imageView.setPadding(10, 10, 10, 10);
- imageView.setOnClickListener(new OnClickListener() {
- @Override
- public void onClick(View view) {
- // 把点击的图片id取出之后,减20000就是要显示的图片在图片数组的位置了。
- imageView1.setImageResource(imageId[view.getId() - 20000]);
- switch (view.getId() - 20000) {
- case 0:
- tv.setText("安徽建筑大学南校区大门");
- break;
- case 1:
- tv.setText("安徽建筑大学南校区教学楼,楼下草坪");
- break;
- case 2:
- tv.setText("安徽建筑大学南校区,傍晚的图书馆");
- break;
- case 3:
- tv.setText("安徽建筑大学南校区,易海傍晚的晚霞");
- break;
- case 4:
- tv.setText("健身房的美女,大长腿");
- break;
- case 5:
- tv.setText("健身房的美女,大长腿");
- break;
- default:
- break;
- }
- }
- });
- // 将图片视图加载到新生成的线性布局之中
- linearLayout.addView(imageView);
- // 新生成一个标签文本
- TextView textView = new TextView(this);
- //textView.setText("图片" + i);
- switch (i) {
- case 0:
- textView.setText("校门");
- break;
- case 1:
- textView.setText("教学楼");
- break;
- case 2:
- textView.setText("图书馆");
- break;
- case 3:
- textView.setText("晚霞");
- break;
- case 4:
- textView.setText("健身房美女");
- break;
- case 5:
- textView.setText("健身房美女");
- break;
- default:
- break;
- }
- textView.setTextSize(10);
- // 标签文本在水平位置居中
- textView.setGravity(Gravity.CENTER);
- // 添加到新生成的线性布局之后
- linearLayout.addView(textView);
- //添加到LinearLayout1
- linearLayout1.addView(linearLayout);
- }
- }
- }
(3)运行到手机上(HTC),效果如下:
- 程序刚刚启动的效果如下:
Android 高级UI设计笔记15:HorizontalScrollView之 实现画廊式图片浏览器的更多相关文章
- Android 高级UI设计笔记14:Gallery(画廊控件)之 3D图片浏览
1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...
- Android 高级UI设计笔记11:Gallery(画廊控件)之Gallery基本使用
1. 这里要向大家介绍Android控件Gallery(画廊控件) Gallery控件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Galler ...
- Android 高级UI设计笔记13:Gallery(画廊控件)之 循环显示图像
1. 循环显示图像的原理 循环显示有些类似于循环链表,最后一个结点的下一个结点又是第1个结点.循环显示图像也可以模拟这一点. 也许细心的读者从上一节实现的ImageAdapter类中会发现些什么.对 ...
- Android 高级UI设计笔记07:RecyclerView 的详解
1. 使用RecyclerView 在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...
- Android 高级UI设计笔记06:仿微信图片选择器(转载)
仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...
- Android 高级UI设计笔记21:Android SegmentView(分段选择控件)
1. 分段控制(SegmentView) 首先我们先看看什么是SegmentView的效果,如下: 分段控制这个View控件是ios7的分段控制,和QQ消息页面顶部的效果一样,android没有这个控 ...
- Android 高级UI设计笔记19:PopupWindow使用详解
1. PopupWindow使用 PopupWindow这个类用来实现一个弹出框,可以使用任意布局的View作为其内容,这个弹出框是悬浮在当前activity之上的. 2. PopupWindow使用 ...
- Android 高级UI设计笔记17:Android在非UI线程中显示Toast
1. 子线程的Toast怎么显示不出来? 因为Toast在创建的时候会依赖于一个Handler,并且一个Handler是需要有一个Looper才能够创建,而普通的线程是不会自动去创建一个Looper对 ...
- Android 高级UI设计笔记09:Android如何实现无限滚动列表
ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...
随机推荐
- LightOJ 1245 Harmonic Number (II)(找规律)
http://lightoj.com/volume_showproblem.php?problem=1245 G - Harmonic Number (II) Time Limit:3000MS ...
- 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条边,最后一条边的 ...
- HDU 3333 Turing Tree (树状数组)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3333 题意就是询问区间不同数字的和. 比较经典的树状数组应用. //#pragma comment(l ...
- UVaLive 6608 Cabin Baggage (水题)
题意:给定四个数代表长宽高和重,问你是不是满足下面条件,长不高于56,宽不宽于45,高不高于25,或者总和不大于125,并且重量不高于7. 析:判断输出就好,注意这个题是或,不要想错了. 代码如下: ...
- html 4.01速查手册
来自 W3School 的 HTML 快速参考.可以打印它,以备日常使用. HTML Basic Document <html> <head> <title>Doc ...
- 使用MySQL中的EXPLAIN解释命令来检查SQL
我们看到许多客户的系统因为SQL及数据库设计的很差所以导致许多性能上的问题,这些问题不好解决,但是可以采用一套简单的策略来检查生产系统,发现并纠正一些共性问题. 很显然,您应该尽最大努力设计出最好的数 ...
- 动态链接库 仅有.dll文件时候的使用方法
在没有.h和.lib文件时,需要函数指针和WIN32 API函数 LoadLibrary, GetProcAddress 和FreeLibrary 只需要.dll文件即可(将.dll文件置入工程目录中 ...
- wp———图片切换效果
此篇文章主要是记录一下使用XamlReader加载动画时遇到的一些问题. 首先呢,把源码附上 <phone:PhoneApplicationPage x:Class="PicChang ...
- Jquery Mobile 百度地图 Demo
首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理:1.通过百度拾取坐标系统获得点位的坐标. http://api.map.baidu.com/lb ...
- 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 ...