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>