一. 图片浏览器显示界面ImageView介绍

1. ImageView的上下继承结构

下面是API中的结构:

<td class="jd-inheritance-class-cell" colspan="2">
  [android.view.View](http://developer.android.com/reference/android/view/View.html)
</td>

<td class="jd-inheritance-space">
</td>

<td class="jd-inheritance-class-cell" colspan="1">
  android.widget.ImageView
</td>

[java.lang.Object](http://developer.android.com/reference/java/lang/Object.html)
↳

[![](http://developer.android.com/assets/images/triangle-closed.png)](http://developer.android.com/reference/android/widget/ImageView.html#)Known Direct Subclasses

  <div id="subclasses-direct">
    <div id="subclasses-direct-list" class="jd-inheritedlinks">
      [ImageButton](http://developer.android.com/reference/android/widget/ImageButton.html), [QuickContactBadge](http://developer.android.com/reference/android/widget/QuickContactBadge.html)
    </div>
  </div>
</td>

[![](http://developer.android.com/assets/images/triangle-closed.png)](http://developer.android.com/reference/android/widget/ImageView.html#)Known Indirect Subclasses

  <div id="subclasses-indirect">
    <div id="subclasses-indirect-list" class="jd-inheritedlinks">
      [ZoomButton](http://developer.android.com/reference/android/widget/ZoomButton.html)
    </div>
  </div>
</td>

绘制成UML图 :

通过上面的分析 : ImageView有两个子类 ImageButton 和 QuickContactBadge, ImageButton还有一个子类是 ZoomButton;

2. XML文件属性

调整边界, 保持长宽比 :android:adjustViewBounds, setAdjustViewBounds(boolean), 是否调整自己的边界, 用来保持图片的长宽比例, 该属性与 android:maxHeight 和 android:maxWidth 属性一起使用才有效果, 单独使用没有效果;

设置最大宽度, 高度 :android:maxWidth(android:maxHeight), setMaxWidth(int)[setMaxHeight(int)], 该属性需要与android:adjustViewBounds属性一起使用,单独使用无效果;

— 设置图片固定大小, 同时保持长宽比 : a. 设置android:adjustViewBounds 为 true; b. 设置最大宽度, 高度; c. 设置android:layout_width 与 android:layout_height 值为 warp_content;

裁剪保留空白 :android:cropToPadding, setCropToPadding(boolean), 是否裁剪, 用来保留ImageView的padding, 该属性与android:scrollY 属性一起使用的时候才有用, 单独使用没有效果; 即在滚动的时候, 滚动到边界, 边界的padding空白是否显示;

填充方式 :android:scaleType, setScaleType(ImageView.ScaleType), 设置图片缩放类型以适配ImageView大小, 即填充方式;

可能的取值 : matrix, fitXY, fitStart, fitCenter, fitEnd, center, centerCrop, centerInside;

— matrix : 方法中的常量值为 ImageView.ScaleType.MATRIX, 使用矩阵来进行绘图;

— fitXY : 方法中的常量值为 ImageView.ScaleType.FIT_XY, 在x y 两个方向上缩放, 使图片完全填充整个ImageView 不按照长宽比例缩放;

— fitStart : 方法中的常量值为 ImageView.ScaleType.FIT_START, 保持长宽比缩放, 直到该图片完全显示在ImageView中, 缩放完成之后该图片在左上角;

— fitCenter : 方法中的常量值为 ImageView.ScaleType.FIT_CENTER, 保持长宽比缩放, 直到该图片完全显示在ImageView中, 缩放完成之后该图片位于中央;

— fitEnd : 方法中的常量值为 ImageView.ScaleType.FIT_END, 保持长宽比缩放, 直到该图片完全显示在ImageView中, 缩放完成之后该图片位于右下角;

— center : 方法中的常量值为 ImageView.ScaleType.CENTER, 将图片放在ImageView的中央, 不进行缩放;

— centerCrop : 方法中的常量值为 ImageView.ScaleType.CENTER_CROP, 保持长宽比缩放, 使图片完全覆盖ImageView;

— centerInside : 方法中的常量值为 ImageView.ScaleType.CENTER_INSIDE, 保持长宽比缩放, 是的ImageView完全显示图片;

实例 :

XML文件 :

**[html]** [view plain](http://blog.csdn.net/shulianghan/article/details/18555131#)[copy](http://blog.csdn.net/shulianghan/article/details/18555131#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/172552)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/172552/fork)

  <div>
    <embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1">
    </embed>
  </div>
</div>

- <span class="tag"><</span><span class="tag-name">LinearLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">xmlns:tools</span>=<span class="attribute-value">&#8220;http://schemas.android.com/tools&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/im&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;#00FF00&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;300dp&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;300dp&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/pic&#8221;</span>

- <span class="tag"><</span><span class="tag-name">strong</span><span class="tag">></span>android:scaleType<span class="tag"></</span><span class="tag-name">strong</span><span class="tag">></span>=&#8221;matrix&#8221;<span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

修改其中的 android:scaleType属性值, 查看其中的差异 :

原图 :

android:scaleType 默认情况下 :

android:scaleType = “matrix” : 由下图可以看出, ImageView中的图片宽度与原图一样, 该属性不进行任何缩放,直接将图片放在左上角;

android:scaleType = “fixXY” : 长宽不按比例拉伸, 图片明显变形 :

android:scaleType = “fitStart” , 图片按比例缩放, 宽先达到边界, 图片位于上边; 如果高先达到边界, 图片位于左边;

android:scaleType = “fieCenter” ,长宽按照比例缩放, 宽度先达到边界, 上下有空白; 如果高度先达到边界, 那么左右有空白;

android:scaleType = “fitEnd” , 长宽等比例缩放, 宽度先达到边界, 位于下边; 如果高度先达到边界, 位于右边;

android:scaleType = “center” ,长宽不进行缩放, 图片的中心与 ImageView 的中心重合;

android:scaleType = “centerCrop” ,长宽等比例缩放, 使图片完全覆盖ImageView, 图片中心与ImageView中心重合, 使图片最短的边能覆盖ImageView边界;

android:scaleType = “centerInside” ,长宽等比例缩放, 如果图片宽高小于等于ImageView宽高, 那么就按照原图大小显示; 如果图片大于ImageView, 那么按照等比例缩小直到能完全显示为止;

3. ImageView常用方法

设置图片 :

— 设置位图 : setImageBitmap(bitmap), 为ImageView设置Bitmap位图显示;

— 设置Drawable : setImageDrawable(drawable), 为ImageView设置Drawable显示;

— 设置资源 : setImageResource(int), 为ImageView设置资源图片;

— 设置路径 : setImageUri(uri), 为ImageView设置图片路径, 显示该路径的图片;

二. 图片浏览器操作介绍

1. 实现左右循环切换图片

图片数组 : 将图片放在数组中, ImageView显示数组中的图片;

当前显示图片下标索引 : 设置一个int值, 用来表示当前显示图片数组中的图片, 这个值不是int下标, 这个值设置很大设置成Integer.MAXVALUE / 2, 该值与图片数组的长度进行取模运算结果就是当前显示的图片数组下标值;

翻页操作 : 上一页操作就将当前显示索引自减1, 然后模上图片数组大小; 下一页就将当前索引自增1, 然后模上图片数组大小;

代码示例 :

**[java]** [view plain](http://blog.csdn.net/shulianghan/article/details/18555131#)[copy](http://blog.csdn.net/shulianghan/article/details/18555131#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/172552)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/172552/fork)

  <div>
    <embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_2">
    </embed>
  </div>
</div>

- <span class="comment">//设置一个很大的值, 保证前后翻页不会出现异常</span>

- currentImage = Integer.MAX_VALUE / <span class="number">2</span>;

- <span class="comment">//为了保证图片能够循环, 这里模运算是关键, 显示图片的下标始终是长度的模</span>

- image_all.setImageResource(images[ ++currentImage % images.length ]);

- image_all.setImageResource(images[ &#8211;currentImage % images.length ]);

2. 透明度改变

设置当前透明度 : 设置一个当前透明度值, 初始值为255, 255是不透明, 0为完全透明;

透明度改变 : 当点击透明度增加按钮的时候, 透明度自增20, 如果结果透明度大于255, 那么改透明度强制设置为255; 当点击透明度见效按钮的时候, 透明度自减20, 当透明度小于0的时候, 透明度强制设置为0;

代码示例 :

  <div>
    <embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_3">
    </embed>
  </div>
</div>

- <span class="comment">//透明度初始值</span>

- alpha = <span class="number">255</span>;

- <span class="comment">//透明度增加</span>

- alpha += <span class="number">20</span>;

- <span class="keyword">if</span>(alpha >= <span class="number">255</span>)

- alpha = <span class="number">255</span>;

- image_all.setAlpha(alpha);

- <span class="comment">//透明度减小</span>

- alpha -= <span class="number">20</span>;

- <span class="keyword">if</span>(alpha <= <span class="number"></span>)

- alpha = <span class="number"></span>;

- image_all.setAlpha(alpha);

3. 图片的放大缩小

获取View组件宽高 : 在Activity普通方法中无法获取到view组件的准确值, 如果想要获取view组件的宽高, 可以在 onWindowFocusChanged()方法中获取;

计算每次自增自减的单位值 : 当按下缩放按钮的时候, 就对ImageView的宽高值进行自增自减单位值操作;

为ImageView设置宽高 : 即设置LayoutParams, 注意是LinearLayout.LayoutParams对象;

代码示例 :

获取宽高 :

  <div>
    <embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_4">
    </embed>
  </div>
</div>

- <span class="annotation">@Override</span>

- <span class="keyword">public</span> <span class="keyword">void</span> onWindowFocusChanged(<span class="keyword">boolean</span> hasFocus) {

- <span class="comment">// TODO Auto-generated method stub</span>

- <span class="keyword">super</span>.onWindowFocusChanged(hasFocus);

- <span class="comment">//获取ImageView组件的宽高</span>

- imageWidth = image_all.getWidth();

- imageHeight = image_all.getHeight();

- 
- <span class="comment">//计算每次自增自减的值</span>

- addWidth = imageWidth / <span class="number">5</span>;

- addHeight = imageHeight / <span class="number">5</span>;

- }

缩放图片操作 :

  <div>
    <embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_5">
    </embed>
  </div>
</div>

- <span class="keyword">case</span> R.id.big:          <span class="comment">//放大图片</span>

- imageWidth += addWidth;

- imageHeight += addHeight;

- 
- image_all.setLayoutParams(<span class="keyword">new</span> LinearLayout.LayoutParams(imageWidth, imageHeight));

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.small:        <span class="comment">//缩小图片</span>

- imageWidth -= addWidth;

- imageHeight -= addHeight;

- <span class="keyword">if</span>(imageWidth <= <span class="number"></span> || imageHeight <=<span class="number"></span>){

- imageWidth += addWidth;

- imageHeight += addHeight;

- }

- 
- image_all.setLayoutParams(<span class="keyword">new</span> LinearLayout.LayoutParams(imageWidth, imageHeight));

- <span class="keyword">break</span>;

4. 旋转图片操作

设置Matrix对象 : 该对象用来存放图像的旋转角度;

设置旋转角度 : matrix.setRotate(), 即可设置旋转角度;

创建Bitmap : 创建一个位图, 注意将设置了旋转角度的 matrix 设置上去;

源码示例 :

  <div>
    <embed id="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_6">
    </embed>
  </div>
</div>

- matrix = <span class="keyword">new</span> Matrix();

- 
- <span class="comment">//向左旋转进行的操作</span>

- anglel += <span class="number">45</span>;

- matrix.setRotate(anglel);

- Bitmap bitmap = ((BitmapDrawable) getResources().getDrawable(images[currentImage % images.length])).getBitmap();

- bitmap = Bitmap.createBitmap(bitmap, <span class="number"></span>, <span class="number"></span>, bitmap.getWidth(),bitmap.getHeight(), matrix, <span class="keyword">true</span>);

- image_all.setImageBitmap(bitmap);

- 
- <span class="comment">//向右旋转进行的操作</span>

- anglel -= <span class="number">45</span>;

- matrix.setRotate(anglel);

- Bitmap bitmap1 = ((BitmapDrawable) getResources().getDrawable(images[currentImage % images.length])).getBitmap();

- bitmap1 = Bitmap.createBitmap(bitmap1, <span class="number"></span>, <span class="number"></span>, bitmap1.getWidth(),bitmap1.getHeight(), matrix, <span class="keyword">true</span>);

- image_all.setImageBitmap(bitmap1);

作者 :**万境绝尘 **

转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835

三. 图片浏览器源码

XML布局文件 :

  <div>
    <embed id="ZeroClipboardMovie_7" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_7">
    </embed>
  </div>
</div>

- <span class="tag"><</span><span class="tag-name">LinearLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">xmlns:tools</span>=<span class="attribute-value">&#8220;http://schemas.android.com/tools&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_im&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;horizontal&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:padding</span>=<span class="attribute-value">&#8220;5dp&#8221;</span>

- <span class="attribute">android:gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/alpha_plus&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;透明度+&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/alpha_minus&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;透明度-&#8220;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/prev_page&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;上一张&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/next_page&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;下一张&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;horizontal&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:padding</span>=<span class="attribute-value">&#8220;5dp&#8221;</span>

- <span class="attribute">android:gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/big&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;放大&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/small&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;缩小&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/turn_left&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;左转&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/turn_right&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_weight</span>=<span class="attribute-value">&#8220;1&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;右转&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bg_bt&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;onClick&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/image_all&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:scaleType</span>=<span class="attribute-value">&#8220;fitCenter&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/mary1&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

Drawable资源 :

整个界面的背景 : 渐变的颜色

  <div>
    <embed id="ZeroClipboardMovie_8" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_8">
    </embed>
  </div>
</div>

- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">&#8220;1.0&#8221;</span> <span class="attribute">encoding</span>=<span class="attribute-value">&#8220;utf-8&#8221;</span><span class="tag">?></span>

- <span class="tag"><</span><span class="tag-name">shape</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span> <span class="tag">></span>

- <span class="tag"><</span><span class="tag-name">gradient</span>

- <span class="attribute">android:startColor</span>=<span class="attribute-value">&#8220;#A9F5A9&#8221;</span>

- <span class="attribute">android:centerColor</span>=<span class="attribute-value">&#8220;#2EFE2E&#8221;</span>

- <span class="attribute">android:endColor</span>=<span class="attribute-value">&#8220;#A9F5A9&#8221;</span>

- <span class="attribute">android:type</span>=<span class="attribute-value">&#8220;linear&#8221;</span><span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">shape</span><span class="tag">></span>

按钮的背景 : 两个9patch图片, 按下的时候按钮背景会改变

  <div>
    <embed id="ZeroClipboardMovie_9" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_9">
    </embed>
  </div>
</div>

- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">&#8220;1.0&#8221;</span> <span class="attribute">encoding</span>=<span class="attribute-value">&#8220;utf-8&#8221;</span><span class="tag">?></span>

- <span class="tag"><</span><span class="tag-name">selector</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">item</span> <span class="attribute">android:state_pressed</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:drawable</span>=<span class="attribute-value">&#8220;@drawable/bt_focus&#8221;</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">item</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">item</span> <span class="attribute">android:state_pressed</span>=<span class="attribute-value">&#8220;false&#8221;</span>

- <span class="attribute">android:drawable</span>=<span class="attribute-value">&#8220;@drawable/bt_normal&#8221;</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">item</span><span class="tag">></span>

- 
- <span class="tag"></</span><span class="tag-name">selector</span><span class="tag">></span>

主Activity核心代码 :

  <div>
    <embed id="ZeroClipboardMovie_10" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_10">
    </embed>
  </div>
</div>

- <span class="keyword">package</span> shuliang.han.imageview_test;

- 
- <span class="keyword">import</span> android.app.Activity;

- <span class="keyword">import</span> android.graphics.Bitmap;

- <span class="keyword">import</span> android.graphics.Matrix;

- <span class="keyword">import</span> android.graphics.drawable.BitmapDrawable;

- <span class="keyword">import</span> android.os.Bundle;

- <span class="keyword">import</span> android.view.View;

- <span class="keyword">import</span> android.widget.ImageView;

- <span class="keyword">import</span> android.widget.LinearLayout;

- 
- <span class="keyword">public</span> <span class="keyword">class</span> MainActivity <span class="keyword">extends</span> Activity {

- 
- <span class="keyword">private</span> <span class="keyword">int</span>[] images;       <span class="comment">//图片资源id数组</span>

- <span class="keyword">private</span> <span class="keyword">int</span> currentImage;   <span class="comment">//当前显示图片</span>

- <span class="keyword">private</span> <span class="keyword">int</span> alpha;          <span class="comment">//透明度</span>

- 
- <span class="keyword">private</span> Matrix matrix;

- <span class="keyword">private</span> <span class="keyword">int</span> anglel;         <span class="comment">//角度</span>

- 
- <span class="keyword">private</span> <span class="keyword">int</span> imageWidth;

- <span class="keyword">private</span> <span class="keyword">int</span> imageHeight;

- 
- <span class="keyword">private</span> <span class="keyword">int</span> addWidth;

- <span class="keyword">private</span> <span class="keyword">int</span> addHeight;

- 
- <span class="keyword">private</span> ImageView image_all;

- 
- <span class="annotation">@Override</span>

- <span class="keyword">protected</span> <span class="keyword">void</span> onCreate(Bundle savedInstanceState) {

- <span class="keyword">super</span>.onCreate(savedInstanceState);

- setContentView(R.layout.activity_main);

- 
- init();

- 
- }

- 
- <span class="comment">//初始化成员变量</span>

- <span class="keyword">private</span> <span class="keyword">void</span> init() {

- images = <span class="keyword">new</span> <span class="keyword">int</span>[]{R.drawable.mary1, R.drawable.mary2};

- currentImage = Integer.MAX_VALUE / <span class="number">2</span>;

- alpha = <span class="number">255</span>;

- 
- matrix = <span class="keyword">new</span> Matrix();

- 
- image_all = (ImageView) findViewById(R.id.image_all);

- image_all.setImageResource(images[currentImage % images.length]);

- }

- 
- <span class="keyword">public</span> <span class="keyword">void</span> onClick(View view) {

- <span class="keyword">int</span> id = view.getId();

- 
- <span class="keyword">switch</span> (id) {

- <span class="keyword">case</span> R.id.alpha_plus:   <span class="comment">//增大透明度</span>

- alpha += <span class="number">20</span>;

- <span class="keyword">if</span>(alpha >= <span class="number">255</span>)

- alpha = <span class="number">255</span>;

- image_all.setAlpha(alpha);

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.alpha_minus:  <span class="comment">//减小透明度</span>

- alpha -= <span class="number">20</span>;

- <span class="keyword">if</span>(alpha <= <span class="number"></span>)

- alpha = <span class="number"></span>;

- image_all.setAlpha(alpha);

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.next_page:    <span class="comment">//显示下一张图片</span>

- <span class="comment">//为了保证图片能够循环, 这里模运算是关键, 显示图片的下标始终是长度的模</span>

- image_all.setImageResource(images[ ++currentImage % images.length ]);

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.prev_page:    <span class="comment">//显示上一张图片</span>

- image_all.setImageResource(images[ &#8211;currentImage % images.length ]);

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.big:          <span class="comment">//放大图片</span>

- imageWidth += addWidth;

- imageHeight += addHeight;

- 
- image_all.setLayoutParams(<span class="keyword">new</span> LinearLayout.LayoutParams(imageWidth, imageHeight));

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.small:        <span class="comment">//缩小图片</span>

- imageWidth -= addWidth;

- imageHeight -= addHeight;

- <span class="keyword">if</span>(imageWidth <= <span class="number"></span> || imageHeight <=<span class="number"></span>){

- imageWidth += addWidth;

- imageHeight += addHeight;

- }

- 
- image_all.setLayoutParams(<span class="keyword">new</span> LinearLayout.LayoutParams(imageWidth, imageHeight));

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.turn_left:    <span class="comment">//向左旋转</span>

- anglel += <span class="number">45</span>;

- matrix.setRotate(anglel);

- Bitmap bitmap = ((BitmapDrawable) getResources().getDrawable(images[currentImage % images.length])).getBitmap();

- bitmap = Bitmap.createBitmap(bitmap, <span class="number"></span>, <span class="number"></span>, bitmap.getWidth(),bitmap.getHeight(), matrix, <span class="keyword">true</span>);

- image_all.setImageBitmap(bitmap);

- <span class="keyword">break</span>;

- 
- <span class="keyword">case</span> R.id.turn_right:   <span class="comment">//向右旋转</span>

- anglel -= <span class="number">45</span>;

- matrix.setRotate(anglel);

- Bitmap bitmap1 = ((BitmapDrawable) getResources().getDrawable(images[currentImage % images.length])).getBitmap();

- bitmap1 = Bitmap.createBitmap(bitmap1, <span class="number"></span>, <span class="number"></span>, bitmap1.getWidth(),bitmap1.getHeight(), matrix, <span class="keyword">true</span>);

- image_all.setImageBitmap(bitmap1);

- <span class="keyword">break</span>;

- 
- <span class="keyword">default</span>:

- <span class="keyword">break</span>;

- }

- }

- 
- <span class="annotation">@Override</span>

- <span class="keyword">public</span> <span class="keyword">void</span> onWindowFocusChanged(<span class="keyword">boolean</span> hasFocus) {

- <span class="comment">// TODO Auto-generated method stub</span>

- <span class="keyword">super</span>.onWindowFocusChanged(hasFocus);

- <span class="comment">//获取ImageView组件的宽高</span>

- imageWidth = image_all.getWidth();

- imageHeight = image_all.getHeight();

- 
- <span class="comment">//计算每次自增自减的值</span>

- addWidth = imageWidth / <span class="number">5</span>;

- addHeight = imageHeight / <span class="number">5</span>;

- }

- }

四. ZoomButton 和 QuickContactBadge

示例效果图 :

下载地址 :

GitHub : https://github.com/han1202012/ZoomButton_QuickContactBadge.git

1. ZoomButton

ZoomButton按钮 : ZoomButton按钮提供放大缩小两个按钮, 两个按钮;

ZoomControls按钮 : 该按钮会自动生成一组两个按钮, 两个按钮分别是放大和缩小;

按钮点击切换背景 : 设置selector资源, 设置两个item, 一个item的状态为按下时, 显示一个图片, 另一个item的状态为普通情况下, 显示另一个图片;

selector源码 :

  <div>
    <embed id="ZeroClipboardMovie_11" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_11">
    </embed>
  </div>
</div>

- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">&#8220;1.0&#8221;</span> <span class="attribute">encoding</span>=<span class="attribute-value">&#8220;utf-8&#8221;</span><span class="tag">?></span>

- <span class="tag"><</span><span class="tag-name">selector</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">item</span> <span class="attribute">android:state_pressed</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:drawable</span>=<span class="attribute-value">&#8220;@drawable/app3&#8221;</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">item</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">item</span> <span class="attribute">android:state_pressed</span>=<span class="attribute-value">&#8220;false&#8221;</span>

- <span class="attribute">android:drawable</span>=<span class="attribute-value">&#8220;@drawable/app4&#8221;</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">item</span><span class="tag">></span>

- 
- <span class="tag"></</span><span class="tag-name">selector</span><span class="tag">></span>

XML源码 :

  <div>
    <embed id="ZeroClipboardMovie_12" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_12">
    </embed>
  </div>
</div>

- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">&#8220;1.0&#8221;</span> <span class="attribute">encoding</span>=<span class="attribute-value">&#8220;utf-8&#8221;</span><span class="tag">?></span>

- <span class="tag"><</span><span class="tag-name">LinearLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageButton</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_horizontal&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/app2&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageButton</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_horizontal&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/bt_bg&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:padding</span>=<span class="attribute-value">&#8220;10dp&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_horizontal&#8221;</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ZoomButton</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/zoom_1&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@android:drawable/btn_minus&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">ZoomButton</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/zoom_2&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@android:drawable/btn_plus&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ZoomControls</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/zoom_ctrl&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_horizontal&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

2. QuickContactBadge

本质 : QuickContactBadge 也是图片, 可以通过android:src 指定图片;

功能 : QuickContactBadge 可以关联手机通讯录中的联系人, 当点击图片的时候, 会弹出该联系人相关的界面;

— 关联方法 :

— 使用邮箱关联 :assignContactFromEmail(String address, boolean lazyLookup), 将图片关联到指定email联系人;

— 使用号码关联 :assignContactFromPhone(String number, boolean lazyLookup), 将图片关联到指定电话联系人;

— 使用Uri关联 : assignContactUri(Uri uri), 将图片关联到Uri对应的联系人;

XML代码:

  <div>
    <embed id="ZeroClipboardMovie_13" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_13">
    </embed>
  </div>
</div>

- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">&#8220;1.0&#8221;</span> <span class="attribute">encoding</span>=<span class="attribute-value">&#8220;utf-8&#8221;</span><span class="tag">?></span>

- <span class="tag"><</span><span class="tag-name">LinearLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">QuickContactBadge</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/badge&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/app5&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

Activity代码 :

  <div>
    <embed id="ZeroClipboardMovie_14" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_14">
    </embed>
  </div>
</div>

- <span class="keyword">package</span> shuliang.han.zoombutton_quickcontactbadge;

- 
- <span class="keyword">import</span> android.app.Activity;

- <span class="keyword">import</span> android.os.Bundle;

- <span class="keyword">import</span> android.widget.QuickContactBadge;

- <span class="keyword">import</span> shuliang.han.zoombutton_quickcontactbadge.R;

- 
- <span class="keyword">public</span> <span class="keyword">class</span> QuickContactBadgeActivity <span class="keyword">extends</span> Activity {

- 
- <span class="keyword">private</span> QuickContactBadge badge;

- 
- <span class="annotation">@Override</span>

- <span class="keyword">protected</span> <span class="keyword">void</span> onCreate(Bundle savedInstanceState) {

- <span class="keyword">super</span>.onCreate(savedInstanceState);

- setContentView(R.layout.quick_contact_badge);

- 
- badge = (QuickContactBadge) findViewById(R.id.badge);

- badge.assignContactFromPhone(<span class="string">&#8220;120&#8221;</span>, <span class="keyword">false</span>);

- 
- }

- 
- }

转自：http://blog.csdn.net/shulianghan/article/details/18555131

AndroidUI设计之图片浏览器

一. 图片浏览器显示界面ImageView介绍

1. ImageView的上下继承结构

2. XML文件属性

3. ImageView常用方法

二. 图片浏览器操作介绍

1. 实现左右循环切换图片

2. 透明度改变

3. 图片的放大缩小

4. 旋转图片操作

三. 图片浏览器源码

四. ZoomButton 和 QuickContactBadge

1. ZoomButton

2. QuickContactBadge

💬 评论

一. 图片浏览器显示界面ImageView介绍#

1. ImageView的上下继承结构#

2. XML文件属性#

3. ImageView常用方法#

二. 图片浏览器操作介绍#

1. 实现左右循环切换图片#

2. 透明度改变#

3. 图片的放大缩小#

4. 旋转图片操作#

三. 图片浏览器源码#

四. ZoomButton 和 QuickContactBadge#

1. ZoomButton#

2. QuickContactBadge#

💬 评论

一. 图片浏览器显示界面ImageView介绍

1. ImageView的上下继承结构

2. XML文件属性

3. ImageView常用方法

二. 图片浏览器操作介绍

1. 实现左右循环切换图片

2. 透明度改变

3. 图片的放大缩小

4. 旋转图片操作

三. 图片浏览器源码

四. ZoomButton 和 QuickContactBadge

1. ZoomButton

2. QuickContactBadge