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

本来，画廊式的图片浏览器，使用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数组里面便于操作@Overrideprotected 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);// 图片的高度为80dpimageView.setPadding(10, 10, 10, 10);imageView.setOnClickListener(new OnClickListener() {@Overridepublic 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。这里不宜通过设置一个全局变量，传递到匿名内部类中，这种传参方式是错误的，无效的。

更多相关文章

随机推荐