Android 高级UI设计笔记15:HorizontalScrollView之 实现画廊式图片浏览器
2016-04-25 16:53
573 查看
1. HorizontalScrollView
本来,画廊式的图片浏览器,使用Android中的Gallery就能轻松完成,但是Google说Gallery每次切换图片时都要新建视图,造成太多的资源浪费,已经在安卓api 19之后被彻底废弃,Google推荐使用ViewPager 或者 HorizontalScrollView来实现Gallery的效果。网上对此的资料太杂,有部分资料写得太高深,完全看不懂。我搞了一个下午,才使用HorizontalScrollView完成画廊式的图片浏览器,如下图:
2. HorizontalScrollView案例:
(1)首先我们来到主布局文件activity_main.xml,如下:
(2)接下来直接来到主Activity,也就是MainActivity,如下:
(3)运行到手机上(HTC),效果如下:
程序刚刚启动的效果如下:
本来,画廊式的图片浏览器,使用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),效果如下:
程序刚刚启动的效果如下:
相关文章推荐
- hdu 1242 Rescue
- 【Vue】-(2) 起步
- USACO 2.1-Sorting a Three-Valued Sequence
- 334. Increasing Triplet Subsequence
- SoapUI之webservice接口测试(一)
- Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled
- UIView的alpha、hidden和opaque属性之间的关系和区别
- UIViewContentMode 图片显示模式
- String、StringBuffer与StringBuilder之间区别
- UISearchDisplayController灰色遮罩偏移
- 强制横屏
- make: *** /lib/modules/2.6.32-573.el6.x86_64/build: 没有那个文件或目录。 停止。
- 判断UITextField文本输入框的输入长度
- web.xml中<async-supported>true</async-supported>报错
- priority_queue and unordered_multimap
- Android 高级UI设计笔记14:Gallery(画廊控件)之 3D图片浏览
- Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled 独家解决!
- 修改了request ,存入mysql数据库仍乱码。。。
- 新手福利!一份详尽全面的UI设计字体与排版指南
- easyui 自定义表单内容验证(汉字、字母、数字、邮箱、电话、邮编、身份证号等)