分类：C#、Android、VS2015；
创建日期：2016-02-07
一、简介
1、ImageBtton
ImageBtton的用法和Button相似，也有Click事件，用法也和Button一样，它和Button的区别仅是图像按钮显示的是一幅图片，例如：
<ImageButton
android:src="@drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButton1"
android:layout_gravity="center" />
通过src指定显示的图像即可。
2、ImageView
该控件和WPF的Image控件的用途相同，仅用于将图像显示出来。
例如，将frantic.jpg拖放到Resources/drawable/文件夹下，就可以用下面的代码显示它：
<ImageView
android:src="@drawable/frantic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/imageView1" />
通过 src指定显示的图像即可。
图像按钮后图像视图看到的设计界面截图如下：
3、如何用图像动态显示按钮的状态
下面的示例创建一个带图像背景的按钮，用XML文件定义图像的状态。当用户按下按钮时，在短时间段内显示呈现的信息。
（1）复制下面的图像到Resourcesdrawable文件夹下。
（2）在Resourcesdrawable文件夹下创建一个文件名为android_button.xml的文件，将该文件改为下面的代码：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/android_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/android_focused" android:state_focused="true" /> <item android:drawable="@drawable/android_normal" /> </selector>
在这个该文件中，定义了按钮的三种状态。
第1个<item>用android_pressed.png作为按下按钮时响应的图像；第2个<item>用android_focused.png作为按钮获得焦点时响应的图像，当按钮高亮显示时使用轨迹球（trackball）或四个方向的指示面板（pad）来操作；第3个<item>用android_normal.png作为按钮的常规状态（既没有被按下也没有获得焦点）。该XML文件表示一个单一的绘制资源（drawable resource），当在后台代码中引用这个按钮实例时，它就会按照这三种状态变换。
注意：<item>的顺序非常重要。要确保呈现绘制结果时，当前两项的状态都是false时，才会呈现应用最后一个常规按钮的状态。所以，必须将常规状态放在最后。
4、9-Patch图片格式
Drw9Patch是一个对png图片进行处理的工具，处理过的图片文件名以*.9.png结尾。它和普通图片相比是其四周多了一个边框，如下图所示：
经过Drw9Patch工具处理过的图片可实现部分拉伸而不会出现图片失真等现象。
9-Patch drawables（.9.png）用于将一个标准的drawable划分为9个控制区域（4个角、4个边、一个中心点），利用这9个控制区域分别控制图像的拉伸，其优势在于可以避免缩放变形，适用于需要对图像进行缩放处理的场合。
在Android SDK/tools目录下有一个draw9patch.bat编辑器，运行它即可对导入的png图片进行操作达到希望的目标，该工具的运行界面如下图所示：
Zoom：缩放左边编辑区域的大小。
Path scale：缩放右边编辑区域的大小。
Show lock：当鼠标在图片区域内时显示不可编辑的区域。
Show patchs：当鼠标在图片区域内时显示图片拉伸的区域。
Show content：在预览区显示图片的内容区域。
Show bad patchs：在拉伸区域周围显示可能会对拉伸后的图片产生变形的区域，可根据图片的颜色值来区分是否为bad patch。
如果程序中绘制的图像和目标区域一样大（不需要拉伸处理），此时9-Patch drawables格式和普通图像就没有什么区别了。
不过，由于Android设备厂商众多，硬件设备差异大，所以一般采用针对不同像素分辨率的设备分别提供对应像素的图像（drawable、drawable-hdpi、drawable-xhdpi、……等）。
二、示例3—Demo03MultiResolution
此示例演示如下功能：
- 如何显示背景图。
- 如何使用.9-Patch格式的图像
- 如何分别设计横屏和竖屏的界面。
- 如何通过按钮自动导航到下一幅图片（循环）。
注意：在实际应用中，一般根据不同的屏幕分辨率分别设计不同大小的图像。本示例为简单起见并没有这样做，而是将所有图片都保存到drawable文件夹下了。
1、运行截图
注意：按<Ctrl>+<F11>可让模拟器进行“横屏/竖屏”转换。
2、设计界面（layout、layout-land）：
layout文件夹下demo03_MultiResolution.axml的设计界面：
layout-land文件夹下demo03_MultiResolution.axml的设计界面：
3、layout文件夹下的布局文件（demo03_MultiResolution.axml）
layout文件夹用于保存竖屏放置的显示的界面布局文件。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:background="@drawable/background" android:layout_height="match_parent"> <LinearLayout android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="fill_parent"> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/image_container" android:background="@drawable/image_container" android:layout_margin="30dip"> <ImageView android:id="@+id/image_view" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitCenter" /> <TextView android:id="@+id/status_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:textColor="@android:color/primary_text_dark" android:textSize="16sp" android:shadowDx="1.0" android:shadowDy="1.0" android:shadowRadius="1" android:layout_margin="5dip" android:shadowColor="@android:color/background_dark" /> </FrameLayout> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="4dip" android:gravity="center"> <Button android:id="@+id/next_button" android:text="下一个" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/android" android:textSize="26sp" /> </LinearLayout> </LinearLayout>
4、layout-land文件夹下的布局文件（demo03_MultiResolution.axml）
layout-land文件夹下的文件用于保存横屏放置时显示的布局，注意该文件名一定要和竖屏放置时的布局文件名相同，否则就无法自动切换了。
另外，在这个横屏的布局中，设计时将按钮放到图片的下方了。而竖屏的布局是将按钮放到图片的右侧了。这样做的目的是为了让你明白如何分别设计竖屏和横屏的界面。
还有一点需要注意：如果横屏和竖屏的布局文件完全相同，就不需要在layout-land文件夹下再添加一个相同的文件了，这是因为模拟器自身会自动切换它。
demo03_MultiResolution.axml文件的代码如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_height="fill_parent" android:background="@drawable/background" android:layout_width="fill_parent"> <LinearLayout android:layout_weight="1" android:layout_width="match_parent" android:layout_height="fill_parent"> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/image_container" android:background="@drawable/image_container" android:layout_marginBottom="50dip" android:layout_marginLeft="20dip" android:layout_marginRight="20dip" android:layout_marginTop="10dip"> <ImageView android:id="@+id/image_view" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitCenter" /> <TextView android:id="@+id/status_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:textColor="@android:color/primary_text_dark" android:textSize="16sp" android:shadowDx="1.0" android:shadowDy="1.0" android:shadowRadius="1" android:layout_margin="5dip" android:shadowColor="@android:color/background_dark" /> </FrameLayout> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" android:layout_marginRight="15dip" android:layout_marginBottom="15dip"> <Button android:id="@+id/next_button" android:text="下一个" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/android" android:textSize="26sp" /> </LinearLayout> </LinearLayout>
5、对应的活动文件（Demo03MultiResolution.cs）
在SrcActivity文件夹下添加该文件。
using System; using System.Collections.Generic; using Android.App; using Android.OS; using Android.Widget; namespace ch05demos.SrcActivity { [Activity(Label = "MultiResolutionDemo")] public class Demo03MultiResolution : Activity { private int photo_index = 0; private List<int> photo_ids = new List<int>() { Resource.Drawable.sample_0, Resource.Drawable.sample_1, Resource.Drawable.sample_2, Resource.Drawable.sample_3, Resource.Drawable.sample_4, Resource.Drawable.sample_5, Resource.Drawable.sample_6, Resource.Drawable.sample_7 }; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); SetContentView(Resource.Layout.demo03_MultiResolution); ShowPhoto(photo_index); Button nextButton = FindViewById<Button>(Resource.Id.next_button); nextButton.Click += delegate { photo_index = (photo_index + 1) % photo_ids.Count; ShowPhoto(photo_index); }; } //--------------------------------------------------------------------------- // 技巧： // 先键入override，然后按空格选择要重写的方法， // 而不是直接键入这些方法（所有需要重写的方法都是这样做） //---------------------------------------------------------------------------- protected override void OnSaveInstanceState(Bundle outState) { outState.PutInt("photo_index", photo_index); base.OnSaveInstanceState(outState); } protected override void OnRestoreInstanceState(Bundle outState) { photo_index = outState.GetInt("photo_index"); ShowPhoto(photo_index); base.OnRestoreInstanceState(outState); } private void ShowPhoto(int photoIndex) { ImageView imageView = FindViewById<ImageView>(Resource.Id.image_view); imageView.SetImageResource(photo_ids[photoIndex]); TextView statusText = FindViewById<TextView>(Resource.Id.status_text); statusText.Text = String.Format("{0}/{1}", photoIndex + 1, photo_ids.Count); } } }
运行，即得到截图所示的效果。