码迷,mamicode.com
首页 > 移动开发 > 详细

【Android】画廊式的图片浏览器,使用HorizontalScrollView取代Gallery,OnClickListener的参数传递

时间:2015-06-29 10:18:05      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:android   图片   gallery   horizontalscrollview   监听器   

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

技术分享

1、首先是对于res\values\strings.xml的修改,仅仅是修改了app的名字,没有什么特别的。补充的imageView_description在《【Android】图片资源的访问与网格式图片浏览器》(点击打开链接)中说过了,仅仅是为了解决Eclipse对ImageView中缺乏android:contentDescription的警告。之后把若干张图片拷贝到工程目录下的任意drawable-xxx文件夹,并且以小写字母、数字、下划线来命名。这里是把四张图片拷贝到drawable-hdpi中,连同自带的app图标,共五张图片。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">画廊式图片浏览器</string>
    <string name="action_settings">Settings</string>
    <string name="imageView_description">大图</string>

</resources>
2、之后修改MainActivity的布局文件,res\layout\activity_main.xml,布局思想如下:

技术分享

其中除了绿色标注的部分用Java代码生成,其余部分都在activity_main.xml中生成,摆放一个图片视图ImageView与横向滚动视图HorizontalScrollView。

HorizontalScrollView的android:scrollbars="horizontal"代表水平滚动的时候显示滚动条,如果不像显示,请把其值设置为none。

<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"
        android:contentDescription="@string/imageView_description" />

    <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>

</LinearLayout>
可以看到HorizontalScrollView是这样用的,其下只是有且仅有一个android:orientation="horizontal"的、水平的LinearLayout,你要摆什么东西进横向滚动栏,通通都摆到这个LinearLayout里面。因此,即使我们要用Java代码操作HorizontalScrollView,也把id赋予给其里面的水平的LinearLayout,设置为。

3、之后是MainActivity.java,这段代码的主要目的是要在上述提到的linearLayout1中,生成一个垂直的自上而下的线性布局视图,里面放置一个ImageView与一个TextView。由于是垂直的自上而下的线性布局,这里无法设置里面的组件的垂直位置,也就是无法设置里面的图片视图放置在中央,标签文件放置在最底部。因此设定所有图片无论其原来的大小,都设置为80dp的高度,上下左右各留10的间距,之后再放置一个水平居中的字体。垂直的线性布局无法设置其组件的垂直位置,但水平位置还是可以的。反过来,水平的线性布局是无法设置其水平位置,只能设置其垂直位置。用Java代码生成布局与组件可以参考《【Android】利用Java代码布局,按钮添加点击事件》(点击打开链接)。

package com.galleryviewer;

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;
import android.app.Activity;

public class MainActivity extends Activity {
	private LinearLayout linearLayout1;
	private ImageView imageView1;
	private int[] imageId = new int[] { R.drawable.img1, R.drawable.img2,
			R.drawable.img3, R.drawable.img4, R.drawable.ic_launcher };// 把要显示的图片放到一个图片id数组里面便于操作

	@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);

		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;// 设置线性布局内的组件水平居中
			linearLayout.setOrientation(LinearLayout.VERTICAL);// 设置新生成的线性布局android:orientation="vertical"
			linearLayout.setLayoutParams(layoutParams);// 应用到新生成的线性布局
			// 新建一个图片视图
			ImageView imageView = new ImageView(this);
			imageView.setId(i + 20000);// 这里由于id不能为字符的缘故,所有对图片的id分别设为20000,20001,20002,...便于下面的图片点击监听器所控制
			imageView.setImageResource(imageId[i]);// 将数组中的第i张图片放到图片视图
			imageView.setAdjustViewBounds(true);// 自动缩放为宽高比
			imageView.setMaxHeight(80);// 图片的高度为80dp
			imageView.setPadding(10, 10, 10, 10);
			imageView.setOnClickListener(new OnClickListener() {
				@Override
				public void onClick(View view) {
					imageView1.setImageResource(imageId[view.getId() - 20000]);
					// 把点击的图片id取出之后,减20000就是要显示的图片在图片数组的位置了。
				}
			});
			// 将图片视图加载到新生成的线性布局之中
			linearLayout.addView(imageView);
			// 新生成一个标签文本
			TextView textView = new TextView(this);
			textView.setText("图片" + i);
			textView.setTextSize(18);
			// 标签文本在水平位置居中
			textView.setGravity(Gravity.CENTER);
			// 添加到新生成的线性布局之后
			linearLayout.addView(textView);
			linearLayout1.addView(linearLayout);
		}

	}

}
这里同时也展示了,如何点击事件监听器OnClickListener的参数传递,OnClickListener是一个接口,其实现方法仅一个,这个实现方法中有一个参数View,这个View相当于网页Javascript编程中,给一个节点添加上点击事件之后onclick="xxx(this)"中的this,把被点击者的整个东西都传递到OnClickListener的监听器了,通过view.getId()可以取出被点击者的Id。这里不宜通过设置一个全局变量,传递到匿名内部类中,这种传参方式是错误的,无效的。

【Android】画廊式的图片浏览器,使用HorizontalScrollView取代Gallery,OnClickListener的参数传递

标签:android   图片   gallery   horizontalscrollview   监听器   

原文地址:http://blog.csdn.net/yongh701/article/details/46673465

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!