android--相冊瀏覽的兩種視圖GridView和gallery

效果如上圖，其中gallery視圖我是用一個HorizontalScrollView裏面嵌套LinearLayout做的，並不是用gallery。

另外就是包括最上面的切換視圖，利用TabHost完成的。

1.首先是gallery視圖，gallery.xml

佈局文件如下，主要包括上面的ImageSwitcher和下面的HorizontalScrollView。

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

    <ImageSwitcher
        android:layout_width="350dp"
        android:layout_height="340dp"
        android:id="@+id/imageswitcher2"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="17dp"/>

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_marginTop="35dp"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/id_gallery"
            android:orientation="horizontal">

        </LinearLayout>

    </HorizontalScrollView>

</LinearLayout>

gallery_item.xml

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

    <ImageView
        android:id="@+id/gallery_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp"
        android:scaleType="centerCrop" />
</LinearLayout>

然後是galleryActivity

package com.example.john.gallery_gridview;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewSwitcher;


/**
 * Created by john on 2017/3/23.
 */

public class galleryActivity extends Activity {

    int[] image = new int[]{
            R.drawable.m1, R.drawable.m2, R.drawable.m3, R.drawable.m4, R.drawable.m5, R.drawable.m6,
            R.drawable.s1, R.drawable.s2, R.drawable.s3, R.drawable.s4, R.drawable.s5, R.drawable.s6
    };
    private LinearLayout mGallery;
    private LayoutInflater mInflater;
    private ImageSwitcher imageSwitcher;

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

        //獲得 LayoutInflater 實例
        mInflater = LayoutInflater.from(this);
        initView();
        //獲取switcher
        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher2);
        //設置切換的效果
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
        //設置切換的圖片
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(galleryActivity.this);//實例化圖片顯示
                imageView.setBackgroundColor(0xFFFFFF);//背景顏色
                imageView.setScaleType(ImageView.ScaleType.CENTER);//居中顯示
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams( //自適應圖片大小
                        LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT
                ));
                return imageView;
            }
        });
        //設置當前顯示的圖片
        imageSwitcher.setImageResource(image[6]);
        initView();

    }

    public void initView() {
        mGallery = (LinearLayout) findViewById(R.id.id_gallery);
        //循環加入圖片
        for (int i = 0; i < image.length; i++) {
            View view = mInflater.inflate(R.layout.gallery_item,
                    mGallery, false);
            ImageView img = (ImageView) view
                    .findViewById(R.id.gallery_image);
            img.setImageResource(image[i]);
            img.setId(i);
            //設置監聽
            img.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    imageSwitcher.setImageResource(image[v.getId()]); //設置資源 //v.getId()獲取編號ID
                }
            });
            mGallery.addView(view);
        }
    }
}

2.gridview視圖

佈局文件如下，包括ImageSwitcher和GridView

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

    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gridview"
        android:numColumns="4"
        android:horizontalSpacing="2pt"
        android:verticalSpacing="2pt"
        android:gravity="center"/>

    <ImageSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/switcher"
        android:layout_gravity="center_horizontal"
        >

    </ImageSwitcher>
</LinearLayout>

然後是gridview_item.xml

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

    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/image"/>
</LinearLayout>

gridveiwActivity

package com.example.john.gallery_gridview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class girdviewActivity extends AppCompatActivity {
    int[] image = new int[]{
            R.drawable.m1,R.drawable.m2,R.drawable.m3,R.drawable.m4,R.drawable.m5,R.drawable.m6,
            R.drawable.s1,R.drawable.s2,R.drawable.s3,R.drawable.s4,R.drawable.s5,R.drawable.s6
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.gridview);

        List<Map<String,Object>> listitem = new ArrayList<Map<String, Object>>();
        for(int i=0;i<image.length;i++){
            Map<String,Object> showitem = new HashMap<String,Object>();
            showitem.put("image",image[i]);
            listitem.add(showitem);
        }
        //創建一個simpleAdapter
        SimpleAdapter simpleAdapter = new SimpleAdapter(getApplicationContext(),listitem,R.layout.gridview_item,new String[]{"image"},new int[]{R.id.image});
        GridView gridView = (GridView)findViewById(R.id.gridview);
        //gridview添加適配器
        gridView.setAdapter(simpleAdapter);

        //獲取switcher
        final ImageSwitcher imageSwitcher = (ImageSwitcher)findViewById(R.id.switcher);
        //設置切換的動畫效果
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
        //設置切換的圖片
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(girdviewActivity.this);//實例化圖片顯示
                imageView.setBackgroundColor(0xFFFFFF);//背景顏色
                imageView.setScaleType(ImageView.ScaleType.CENTER);//居中顯示
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams( //自適應圖片大小
                        LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT
                ));
                return imageView;
            }
        });
        //gridview點擊事件
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                imageSwitcher.setImageResource(image[position]);
            }
        });

    }
}

3.最後是上面的切換視圖，是利用TabHost

package com.example.john.gallery_gridview;

import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.IdRes;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TabHost;

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

/**
 * Created by john on 2017/3/23.
 */

public class MainActivity extends TabActivity{


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN); //請求全屏
        getWindow().requestFeature(Window.FEATURE_NO_TITLE); //請求沒有標題欄

        TabHost tabhost = getTabHost();
        //使用Intent添加到第一個Tab頁面
        tabhost.addTab(tabhost.newTabSpec("Grallery").setIndicator("Grallery")
                .setContent(new Intent(this, galleryActivity.class)));
        //使用Intent添加到第二個Tab頁面
        tabhost.addTab(tabhost.newTabSpec("GridView").setIndicator("GridView")
                .setContent(new Intent(this,girdviewActivity.class)));
    }


}

不過在完成之後，不知道爲什麼我的girdView總是有標題欄，而gallery視圖沒有標題欄，最後是通過設置styles裏面主題的樣式弄好的

 <item name="windowNoTitle">true</item>