android GridView选择照片的完整实现

GridView用法和ListView用法基本一致,这里实现了一个选择照片的gridview功能。

先来看下效果吧!

实现也十分简单,一个android工程中包括2个.java文件和2个.xml文件
先看代码

MainActivity.java

package com.example.gridviewdemo;

import java.util.ArrayList;
import java.util.List;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;


public class MainActivity extends Activity {

    private GridView gridView;
    private List photoList;
    private PhotoAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    /*
     * 初始化函数
     */
    private void initView(){
        getPhotoData();//保存数据
        gridView = (GridView)findViewById(R.id.gridview);
        adapter = new PhotoAdapter(this, photoList);
        gridView.setAdapter(adapter);
        /*
         * 点击某张图片响应
         */
        gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view,
                    int position, long id) {

                photoList.get(position).setOppositeCheck();//点击后将状态取反
                adapter.notifyDataSetChanged();//刷新界面

            }
        });

    }

    /*
     * 将数据显示的数据,图片保存进list
     */
    private void getPhotoData(){
        int drawables [] ={R.drawable.p0,R.drawable.p1,R.drawable.p2,R.drawable.p3,
                R.drawable.p4,R.drawable.p5,R.drawable.p6,R.drawable.p7,R.drawable.p8,
                R.drawable.p9,R.drawable.p10,R.drawable.p11,R.drawable.p12,R.drawable.p13,
                R.drawable.p14,R.drawable.p15,R.drawable.p16,R.drawable.p17,R.drawable.p18,
                R.drawable.p19,R.drawable.p20
        };
        photoList = new ArrayList();
        for(int i =0;i<20;i++)
        {
            Photo photo = new Photo(drawables[i],false);
            photoList.add(photo);
        }
    }
    /*
     * 这里将adapter写成内部类
     */
    class PhotoAdapter extends BaseAdapter {

        private List objects = new ArrayList();
        private Context context;
        public PhotoAdapter(Context context,List list) {
            this.context = context;
            this.objects = list;
        }

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

        @Override
        public Photo getItem(int position) {
            return objects.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder = null;
            if(convertView ==null){
                convertView = LayoutInflater.from(context).inflate(R.layout.item, null);
                viewHolder = new ViewHolder();
                viewHolder.photos = (ImageView)convertView.findViewById(R.id.photo);
                viewHolder.check = (ImageView)convertView.findViewById(R.id.check);
                convertView.setTag(viewHolder);
            }
            else
                viewHolder = (ViewHolder)convertView.getTag();

            viewHolder.photos.setImageResource(getItem(position).getPhotoId());
            if(getItem(position).isPhotoChecked())//如果图片为选中状态
                viewHolder.check.setImageResource(R.drawable.choosed);//如果选中图标为绿色
            else//如果图片是默认状态
                viewHolder.check.setImageResource(R.drawable.nochoose); 
            return convertView;
        }

        protected class ViewHolder {
            ImageView photos;
            ImageView check;
        }
    }

}

Photo.java

package com.example.gridviewdemo;

/*
 * 定义一个photo类来保存数据
 */
public class Photo {

    private int PhotoId;//照片资源ID
    private boolean photoChecked;//判断照片的状态,true表示被选中 false表示未被选中
    public Photo(int PhotoId,boolean photoChecked) {
        this.PhotoId = PhotoId;
        this.photoChecked = photoChecked;
    }
    public int getPhotoId() {
        return PhotoId;
    }
    public boolean isPhotoChecked() {
        return photoChecked;
    }
    /*
     * 这是将状态取反的函数,用于点击图片时,右下角的勾选变化
     */
    public void setOppositeCheck(){
        this.photoChecked = !this.photoChecked;
    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000" >

   <RelativeLayout
        android:id="@+id/select_photo_top"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#ff4dad43"
        android:paddingRight="10dp" >

        <RelativeLayout
            android:id="@+id/select_photo_back_button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp" >

            <ImageView
                android:layout_width="21dp"
                android:layout_height="21dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/top_back_button" />
        RelativeLayout>

        <TextView
            android:id="@+id/select_photo_top_middle_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="选择照片"
            android:textColor="#ffffff"
            android:textSize="21sp" />

        <RelativeLayout
            android:id="@+id/select_photo_commit"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:clickable="false" >

            <TextView
                android:id="@+id/select_photo_commit_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="上传"
                android:textColor="#ffffff"
                android:textSize="18sp" />
        RelativeLayout>
    RelativeLayout>
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/select_photo_top"
        android:layout_marginLeft="0.5dp"
        android:layout_marginRight="0.5dp"
        android:layout_marginTop="1.5dp"
        android:horizontalSpacing="1.5dp"
        android:verticalSpacing="1.5dp"
        android:listSelector="#00000000"
        android:numColumns="3"
        android:scrollbars="none"
         >
    GridView>

RelativeLayout>

item.xml


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
     >

    <ImageView
        android:id="@+id/photo"
        android:layout_width="wrap_content"
        android:layout_height="120dp" />

    <ImageView
        android:id="@+id/check"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="right|bottom"
        android:layout_marginBottom="4dp"
        android:layout_marginRight="4dp"
        android:src="@drawable/nochoose" />

FrameLayout>

还有xml和java文件中的一些图片资源需要大家自己去搞,也可以直接下载我的Demo。GridView其实和ListView在使用上基本一致,都是通过Adapter去显示内容。代码比较简单,大部分注释都有,在这里就不作太多解释。
GridView的一些主要属性可以参考这篇博文
http://blog.csdn.net/ztp800201/article/details/14469883

有什么问题可以留言交流。。。

你可能感兴趣的:(Android)