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

分类：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）复制下面的图像到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图片进行操作达到希望的目标，该工具的运行界面如下图所示：

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 = ;
        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 + ) % 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 + , photo_ids.Count);
        }
    }
}

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