Android-HorizontalScrollView 和 ViewPager 取代 Gallery

更新日期 : 20160227_範例程式

How use HorizontalScrollView or ViewPager replace Gallery?

常用於瀏覽圖片的元件 Gallery 已經宣告不建議使用
可以用 HorizontalScrollView 或 ViewPager
以下是官方連結 : Android Gallery

Gallery
This widget is no longer supported.
Other horizontally scrolling widgets include HorizontalScrollView
and ViewPager from the support library.

要用 Gallery ? 還是 HorizontalScrollView?
這沒有絕對的答案，這要見仁見智了。
接下來我們把畫面切成 : 上( ViewPager ) 、 下(HoriaontalScrollView )

操作方向 :
ViewPager : 將資料放置在選配器生成，讓 Adapter 配置成列表。

HorizontalScrollView : 將資料來源佈局在 CustomView 上，再將 CustomView 塞
                                       至 ScrollView。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/viewPager"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/horizontalScrollView"
            android:layout_gravity="center">

            <LinearLayout
                android:id="@+id/linear_horizontal_scrollview"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </LinearLayout>
        </HorizontalScrollView>
    </LinearLayout>

</LinearLayout>

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity{

    private ViewPager viewPager;
    private MyPagerAdapter myPagerAdapter;
    private LinearLayout linear_horizontal_scrollview;

    private static final int[] pictures = { R.mipmap.image_1,
            R.mipmap.image_2, R.mipmap.image_3 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager)findViewById(R.id.viewPager);
        linear_horizontal_scrollview =
                (LinearLayout)findViewById(R.id.linear_horizontal_scrollview);

        // ViewPager
        List pictureList = new ArrayList<Integer>();
        for(int i: pictures)
        {
            pictureList.add(i);
        }
        pagerView(pictureList);

        // HorizontalScrollView
        for(int i: pictures)
        {
            linear_horizontal_scrollview.addView(insertImage(i));
        }

    }

    /**
     * ViewPager
     * @param list
     */
    private void pagerView(List<Integer> list){
        myPagerAdapter = new MyPagerAdapter(this, list);
        viewPager.setAdapter(myPagerAdapter);
    }

    /**
     *
     * @param path
     * @return
     */
    private View insertImage(int path){

        // 佈局
        LinearLayout layout = new LinearLayout(getApplicationContext());
        layout.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT));
        layout.setGravity(Gravity.CENTER);
        layout.setPadding(10, 0, 10, 0);

        // 客製化 UI
        View child = getLayoutInflater().inflate(R.layout.cell_pager_image, null);
        ImageView imageView = (ImageView)child.findViewById(R.id.cell_imageView);
        imageView.setImageResource(path);
        layout.addView(child);

        // 程式編寫 UI
        /*
        ImageView imageView = new ImageView(getApplicationContext());
        imageView.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setImageResource(path);
        layout.addView(imageView);
        */

        return layout;
    }
}

MyPagerAdapter.java

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.List;

public class MyPagerAdapter extends PagerAdapter {

    private Context context;
    private List<Integer> list;
    private LayoutInflater inflater;

    public MyPagerAdapter(Context context, List<Integer> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        inflater =
                (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.cell_pager_image, container, false);

        ImageView imageView = (ImageView)itemView.findViewById(R.id.cell_imageView);
        imageView.setImageResource(list.get(position));

        (container).addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // Remove viewpager_item.xml from ViewPager
        container.removeView((LinearLayout) object);
    }

}

Demo 圖(一) 初始

Demo 圖(二) 滑動

但是各位有無發現
ViewPager : 可以置中，達到畫廊的效果，但是兩旁無前後預覽圖，感覺不逼真。
ScrollView : 雖然可以達到預覽的效果，但無法置中圖片。

以上是針對這 Sample 做小小的結論
如果要達到畫廊的效果還是要針對元件做修正。

參考資料 : Android 使用HorizontalScrollView 实现Gallery效果
參考資料 : Android 自定义 HorizontalScrollView 打造再多图片（控件）也不怕 OOM 的横向滑动效果

參考資料 : ANDROID HORIZONTALSCROLLVIEW WITH CENTER LOCK
參考資料 : How to create space between images in the gallery?