Android 應用開發筆記 – 拖動效果（Gallery）

新建一View,清單如下：

view_gallery.xml

[html]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</LinearLayout>

在面板拖拽圖標，然後更改相關屬性（Properties），如下：

[html]
<Gallery
        android:id="@+id/gallery02"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"/>

添加一按鈕，如下：

[html] v
<Button
        android:id="@+id/btnReturn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="166dp"
        android:text="@string/btn1Caption" />

整體佈局效果如下：

把“Push me”按鈕，更改為切換按鈕。即實現切換功能。相關代碼請參考多個View切換！

實現Gallery需要繼承BaseAdapter，我們命名為ImgAdapter。

代碼清單如下：

[java]
package com.example.prjandroid;

import android.content.Context;
import android.content.res.TypedArray;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class ImgAdapter extends BaseAdapter {

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        return null;
    }

}

package com.example.prjandroid;

import android.content.Context;
import android.content.res.TypedArray;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class ImgAdapter extends BaseAdapter {

@Override
public int getCount() {
  // TODO Auto-generated method stub
  return null;
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
  // TODO Auto-generated method stub

  return null;
}

}

如果想要放圖片，必須使用ImageView！

這時，我們把圖片放到res/drawable下（建議使用png格式文件）。

然後，再新建一xml文件，提供Gallery的背景。如下：

res/attrs.xml

[html]
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="galleryThem">
        <attr name="android:galleryItemBackground"/>
    </declare-styleable>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="galleryThem">
        <attr name="android:galleryItemBackground"/>
    </declare-styleable>
</resources>

聲明一圖片ID的數組：

[java]
// resource draw
    private int[] resPics = new int[] {
        R.drawable.emacs1,
        R.drawable.emacs2,
        R.drawable.emacs3,
        R.drawable.emacs4,
        R.drawable.emacs5,
        R.drawable.emacs6,
        R.drawable.emacs7,
        R.drawable.emacs8,
        R.drawable.emacs9,
        R.drawable.emacs10
    };

// resource draw
private int[] resPics = new int[] {
  R.drawable.emacs1,
  R.drawable.emacs2,
  R.drawable.emacs3,
  R.drawable.emacs4,
  R.drawable.emacs5,
  R.drawable.emacs6,
  R.drawable.emacs7,
  R.drawable.emacs8,
  R.drawable.emacs9,
  R.drawable.emacs10
};

在getView()方法中使用ImageView：

[java]
ImageView imgView = new ImageView(m_context);
        imgView.setImageResource(resPics[position]);
        imgView.setScaleType(ImageView.ScaleType.FIT_XY);
        imgView.setLayoutParams(new Gallery.LayoutParams(163, 106));

        imgView.setBackgroundResource(m_galleryItemBackGround);

        return imgView;

ImageView imgView = new ImageView(m_context);
  imgView.setImageResource(resPics[position]);
  imgView.setScaleType(ImageView.ScaleType.FIT_XY);
  imgView.setLayoutParams(new Gallery.LayoutParams(163, 106));

  imgView.setBackgroundResource(m_galleryItemBackGround);

  return imgView;

其中，ImageView.ScaleType共八種：

1·ImageView.ScaleType.center:圖片位於視圖中間，但不執行縮放。

2·ImageView.ScaleType.CENTER_CROP 按統一比例縮放圖片（保持圖片的尺寸比例）便於圖片的兩維（寬度和高度）等於或者大於相應的視圖的維度

3·ImageView.ScaleType.CENTER_INSIDE按統一比例縮放圖片（保持圖片的尺寸比例）便於圖片的兩維（寬度和高度）等於或者小於相應的視圖的維度

4·ImageView.ScaleType.FIT_CENTER縮放圖片使用center

5·ImageView.ScaleType.FIT_END縮放圖片使用END

6·ImageView.ScaleType.FIT_START縮放圖片使用START

7·ImageView.ScaleType.FIT_XY縮放圖片使用XY

8·ImageView.ScaleType.MATRIX當繪制時使用圖片矩陣縮放

還有就是Context相當於windows中的Handle。

我們在構造這個類時，需要Context和初始化Gallery的屬性，其相關代碼如下：

[java]
public ImgAdapter(Context context) {
        // TODO Auto-generated constructor stub
        m_context = context;
        TypedArray typeArray =
                m_context.obtainStyledAttributes(R.styleable.galleryThem);
        m_galleryItemBackGround = typeArray.getResourceId(
                R.styleable.galleryThem_android_galleryItemBackground, 0);
    }

public ImgAdapter(Context context) {
  // TODO Auto-generated constructor stub
  m_context = context;
  TypedArray typeArray =
    m_context.obtainStyledAttributes(R.styleable.galleryThem);
  m_galleryItemBackGround = typeArray.getResourceId(
    R.styleable.galleryThem_android_galleryItemBackground, 0);
}

基本上這個適配類就是這個樣子瞭。

調用代碼和之前講的Spinner比較像！區別在於Spinner直接就傳的this，但是在必須傳主類.this(例如MainActivity.this)。

運行效果如下：

發佈留言 取消回覆

發佈留言取消回覆