【Android】5.2 图像按钮和图片格式

分类：C#、Android、VS2015；

创建日期：2016-02-07

一、简介

1、ImageBtton

ImageBtton的用法和Button相似，也有Click事件，用法也和Button一样，它和Button的区别仅是图像按钮显示的是一幅图片，例如：


2、ImageView

该控件和WPF的Image控件的用途相同，仅用于将图像显示出来。

例如，将frantic.jpg拖放到Resources/drawable/文件夹下，就可以用下面的代码显示它：


通过 src指定显示的图像即可。

图像按钮后图像视图看到的设计界面截图如下：





3、如何用图像动态显示按钮的状态

下面的示例创建一个带图像背景的按钮，用XML文件定义图像的状态。当用户按下按钮时，在短时间段内显示呈现的信息。

（1）复制下面的图像到Resources\drawable\文件夹下。





（2）在Resources\drawable\文件夹下创建一个文件名为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图片进行操作达到希望的目标，该工具的运行界面如下图所示：






如果程序中绘制的图像和目标区域一样大（不需要拉伸处理），此时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);
}
}
}

运行，即得到截图所示的效果。