案例功能:
点击一个ImageButton图片按钮,显示有Gallery画廊的图片选择对话框,选择其中一个图片,确定后将选择的图片显示在按钮上
1:先编写首页布局代码ACTIVITY_MAIN.XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
>
<
ImageButton
android:id
=
"@+id/imageButton"
android:layout_width
=
"100dp"
android:layout_height
=
"80dp"
android:layout_alignParentLeft
=
"true"
android:layout_alignParentTop
=
"true"
android:scaleType
=
"fitCenter"
android:src
=
"@drawable/ic_launcher"
/>
<
EditText
android:layout_width
=
"match_parent"
android:layout_height
=
"wrap_content"
android:layout_marginLeft
=
"14dp"
android:layout_toRightOf
=
"@+id/imageButton"
android:inputType
=
"text"
>
</
EditText
>
</
RelativeLayout
>
|
2:编写MainActivity.java 查找组件关键代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
//查找图片按钮组件
imagebutton = (ImageButton)
this
.findViewById(R.id.imageButton);
//注册监听
imagebutton.setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View v) {
//点击时显示对话框
showDialog(IMAGES);
}
});
|
3:在layout下新建一个布局xml文件,我的文件为:pictures.xml,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
android:orientation
=
"vertical"
>
<
Gallery
android:id
=
"@+id/gallery"
android:layout_width
=
"match_parent"
android:layout_height
=
"wrap_content"
android:background
=
"#55000000"
android:spacing
=
"10dp"
android:unselectedAlpha
=
"1.0"
/>
</
LinearLayout
>
|
4:(1)对话框的创建和显示
(2)LayoutInflater类将布局文件pictures.xml变为一个View实例。
用builder.setView()方法放置到Dialog里面去
注意关键点:必须查找设置对话框里的View里的gallery组件
1
2
3
|
final View view = inflater.inflate(R.layout.pictures, null
);
gallery=(Gallery) view.findViewById(R.id.gallery);
|
重写onCreateDialog()方法,创建有gallery的对话框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
@Override
protected
Dialog onCreateDialog(
int
id) {
AlertDialog.Builder builder =
new
AlertDialog.Builder(
MainActivity.
this
);
//创建LayoutInflater类用于实例xml文件为View类型
LayoutInflater inflater = LayoutInflater
.from(MainActivity.
this
);
final
View view = inflater.inflate(R.layout.pictures,
null
);
//设置对话框标题
builder.setTitle(
"请选择你的头像:"
);
//实例的xml文件添加到对话框里面
builder.setView(view);
//查找对话框里xml内的gallery组件
gallery=(Gallery) view.findViewById(R.id.gallery);
//设置画廊默认选择的图片
gallery.setSelection(pics.length /
2
);
//设置适配器,ImageAdapter类继承BaseAdapter重写getView()方法
gallery.setAdapter(
new
ImageAdapter());
//处理gallery图片点击事件
gallery.setOnItemClickListener(
new
AdapterView.OnItemClickListener() {
@Override
public
void
onItemClick(AdapterView<?> arg0, View arg1,
int
arg2,
long
arg3) {
//改变图片的位置为用户选择的图片位置
pos = arg2;
}
});
//添加取消按钮,点击时关闭对话框removeDialog()
builder.setNegativeButton(
"取消"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
removeDialog(IMAGES);
; }
});
builder.setPositiveButton(
"确定"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
removeDialog(IMAGES);
//设置用户选择图片后显示到图片按钮上
imagebutton.setImageResource(pics[pos]);
}
});
//创建对话框,显示对话框时调用showDialog()方法
return
builder.create();
|
5:gallery适配器ImageAdapter的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
private
class
ImageAdapter
extends
BaseAdapter {
@Override
public
int
getCount() {
return
pics.length;
}
@Override
public
Object getItem(
int
position) {
return
position;
}
@Override
public
long
getItemId(
int
position) {
return
position;
}
@Override
public
View getView(
int
position, View convertView, ViewGroup parent) {
ImageView img =
new
ImageView(MainActivity.
this
);
// 设置图片资源
img.setImageResource(pics[position]);
// 保持宽高比,不设置则gallery显示一张图片
img.setAdjustViewBounds(
true
);
// 设置固定大小
img.setMaxHeight(
80
);
img.setMaxWidth(
120
);
img.setScaleType(ImageView.ScaleType.FIT_CENTER);
// 设置图片大小
img.setLayoutParams(
new
Gallery.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
return
img;
}
}
|
6:完整java代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
public
class
MainActivity
extends
Activity {
private
ImageButton imagebutton;
private
Gallery gallery;
private
int
[] pics = { R.drawable.a, R.drawable.b, R.drawable.c,
R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g };
int
pos = pics.length /
2
;
int
IMAGES=
1
;
@Override
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imagebutton = (ImageButton)
this
.findViewById(R.id.imageButton);
imagebutton.setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View v) {
showDialog(IMAGES);
}
});
}
@Override
protected
Dialog onCreateDialog(
int
id) {
AlertDialog.Builder builder =
new
AlertDialog.Builder(
MainActivity.
this
);
LayoutInflater inflater = LayoutInflater
.from(MainActivity.
this
);
final
View view = inflater.inflate(R.layout.pictures,
null
);
builder.setTitle(
"请选择你的头像:"
);
builder.setView(view);
gallery=(Gallery) view.findViewById(R.id.gallery);
gallery.setSelection(pics.length /
2
);
gallery.setAdapter(
new
ImageAdapter());
gallery.setOnItemClickListener(
new
AdapterView.OnItemClickListener() {
@Override
public
void
onItemClick(AdapterView<?> arg0, View arg1,
int
arg2,
long
arg3) {
pos = arg2;
}
});
builder.setNegativeButton(
"取消"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
removeDialog(IMAGES);
; }
});
builder.setPositiveButton(
"确定"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
removeDialog(IMAGES);
imagebutton.setImageResource(pics[pos]);
}
});
return
builder.create();
}
private
class
ImageAdapter
extends
BaseAdapter {
@Override
public
int
getCount() {
return
pics.length;
}
@Override
public
Object getItem(
int
position) {
return
position;
}
@Override
public
long
getItemId(
int
position) {
return
position;
}
@Override
public
View getView(
int
position, View convertView, ViewGroup parent) {
ImageView img =
new
ImageView(MainActivity.
this
);
// 设置图片资源
img.setImageResource(pics[position]);
// 保持宽高比,不设置则gallery显示一张图片
img.setAdjustViewBounds(
true
);
// 设置固定大小
img.setMaxHeight(
80
);
img.setMaxWidth(
120
);
img.setScaleType(ImageView.ScaleType.FIT_CENTER);
// 设置图片大小
img.setLayoutParams(
new
Gallery.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
return
img;
}
}
@Override
public
boolean
onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return
true
;
}
}
|
7:效果图
选择黄头发女孩时,图片滑到中间,点击确定