需求:显示几个图片,可以拍照插入图片,删除图片。
一开始用:ExpandableListView来实现,图片一般不超过10个图片,效果还可以接受。后来试着采用更简单用GridView实现。
当然可以用鸿祥的自定义HorizontalScrollView打造再多图片
界面布局和代码都比较简单。
布局:
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.nfstimagegridview.MainActivity" >
<LinearLayout
android:id="@+id/lytCustCard"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#A0DBFA"
android:orientation="horizontal" >
<TextView
android:id="@+id/txtCustCardCount"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="客戶圖片"
android:textColor="#00f" />
<ImageView
android:id="@+id/imgAddCustCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="@drawable/caseadd48" />
</LinearLayout>
<GridView
android:id="@+id/gdv4CustImage"
android:layout_width="match_parent"
android:layout_height="150dp"
android:horizontalSpacing="5dp"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp" >
</GridView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#A0DBFA"
android:orientation="horizontal" >
<TextView
android:id="@+id/txtCustCardCount1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="圖片說明"
android:textColor="#00f" />
<ImageView
android:id="@+id/imgAddCustCard1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="@drawable/caseadd48" />
</LinearLayout>
<TextView
android:id="@+id/txtInfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ef0"
android:gravity="center_vertical"
android:text="信息說明信息說明信息說明信息說明信息說明信息說明"
android:textColor="#00f" />
</LinearLayout>
在网上找几个图片,复制到drawable里面。
引用:鸿祥的ListView,GridView的适配器,并修改相关代码适合自己使用。
ItemBean是简单的Bean对象。
代码:
package com.example.nfstimagegridview;
import java.util.ArrayList;
import java.util.List;
import com.nfst.adapterhelper.ViewHolder;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends Activity {
private GridView gridView = null;
private List<ItemBean> mDatas = new ArrayList<ItemBean>();
private CustCardImageAdapter mAdapter;
private ImageView imgAdd;
private void initViews() {
gridView = (GridView) findViewById(R.id.gdv4CustImage);
imgAdd = (ImageView) findViewById(R.id.imgAddCustCard);
mAdapter = new CustCardImageAdapter(getApplicationContext(), mDatas, R.layout.cust_image_item);
gridView.setAdapter(mAdapter);
}
private void initData() {
mDatas.add(new ItemBean("龍津藥業", getBitmap(R.drawable.img01)));
mDatas.add(new ItemBean("德賽電池", getBitmap(R.drawable.img02)));
mDatas.add(new ItemBean("中航電子", getBitmap(R.drawable.img03)));
mDatas.add(new ItemBean("海倫鋼琴", getBitmap(R.drawable.img04)));
}
private Bitmap getBitmap(int intID) {
return BitmapFactory.decodeResource(getResources(), intID);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initViews();
addEvents();
}
private void addEvents() {
imgAdd.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
showMsg("增加客戶圖片!");
Intent intent = new Intent(MainActivity.this, PopupwindowActivity.class);
startActivity(intent);
}
});
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
showMsg("你點擊了項目:" + mDatas.get(position).getItemName());
}
});
}
private class CustCardImageAdapter extends com.nfst.adapterhelper.CommonAdapter<ItemBean> {
public CustCardImageAdapter(Context context, List<ItemBean> mDatas, int itemLayoutId) {
super(context, mDatas, itemLayoutId);
}
@Override
public void convert(ViewHolder helper, ItemBean item) {
helper.setText(R.id.ItemName, item.getItemName());
helper.setImageBitmap(R.id.ItemImage, item.getItemImage());
helper.getView(R.id.ItemDelete).setOnClickListener(new onItemDeleteClick(helper.getPosition()));
}
class onItemDeleteClick implements View.OnClickListener {
int mPosition;
public onItemDeleteClick(int position) {
mPosition = position;
}
@Override
public void onClick(View v) {
// 這裡可以調用mDatas,因為它使用protected來聲明變量。
ItemBean itemBean = mDatas.get(mPosition);
showMsg("移除:" + itemBean.getItemName());
}
}
}
private void showMsg(String msg) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
}
运行界面:
实际生产项目中:
1.点击蓝色+号,是自定义相机拍照,保存到数据库中,并刷新当前界面的GridView。
2.点击相片的红色-号,是删除相关图片。