高级组件

自动完成文本框

自动完成文本框(AutoCompleteTextView),用于实现允许用户输入一定字符后,显示一个下拉菜单,供用户从中选择,当用户选择某个选项后,按用户选择自动填写该文本框。

在屏幕中添加自动完成文本框,可以在XML布局文件中通过标记添加,基本语法格式如下:

<AutoCompleteTextView 属性列表 ></AutoCompleteTextView>

AutoCompleteTextView组件继承自EditText,所以它支持EditText组件提供的属性,同时,该组件还支持属性。

XML属性 描述
android:completionHint 用于为弹出的下拉菜单指定提示标题
android:completionThreshold 用于指定用户至少输入几个字符才会显示提示
android:dropDownHeight 用于指定下拉菜单的高度
android:dropDownHorizontalOffset 用于指定下拉菜单与文本之间的水平偏移。下拉菜单默认与文本框左对齐
android:dropDownVerticalOffset 用于指定下拉菜单与文本之间的垂直偏移。下拉菜单默认紧跟文本框
android:dropDownWidth 用于指定下拉菜单的宽度 android:popupBackground 用于为下拉菜单设置背景

实现带自动提示功能的搜索框
(1)修改新建项目的res\layout目录下的布局文件main18.xml,将默认添加的垂直线性布局管理器修改为水平线性布局管理器,并在该布局管理器中添加一个自动完成文本框和一个按钮,修改后的代码如下:
`

<AutoCompleteTextView 
	android:layout_height="wrap_content" 
	android:text="" 
	android:id="@+id/autoCompleteTextView1" 
	android:completionThreshold="2" 
	android:completionHint="输入搜索内容"
	android:layout_weight="7" 
	android:layout_width="wrap_content"> 

</AutoCompleteTextView> 

<Button android:text="搜索" 
	android:id="@+id/button1" 
	android:layout_weight="1" 
	android:layout_marginLeft="10px" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"/> 
</LinearLayout>`

说明:在上面的代码中,通过android:completionHint属性设置下拉菜单中显示的提示标题;通过android:completionThreshold属性设置用户至少输入2个字符才会显示提示。

(2)在主活动MainActivity中,定义一个字符串数组常量,用于保存要在下拉菜单中显示的列表项,具体代码如下:

private static final String[] COUNTRIES = new String[] { "网络科技", "网络科技有限公司", "吉林省网络科技有限公司", "网络编程词典", "网络"};

3)在主活动的onCreate()方法中,首先获取布局文件中添加的自动完成文本框,然后创建一个保存下拉菜单中要显示的列表项的ArrayAdapter适配器,最后将该适配器与自动完成文本框相关联,关键代码下:

//获取自动完成文本框 
AutoCompleteTextView textView=(AutoCompleteTextView)findViewById(R.id.autoCompleteTextView1); 
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line,COUNTRIES);//创建一个ArrayAdapter适配器 
textView.setAdapter(adapter);//为自动完成文本框设置适配器

(4)获取“搜索”按钮,并为其添加单击事件监听器,在其onClick事件中通过消息提示框显示自动完成文本框中输入的内容,具体代码如下:

Button button=(Button)findViewById(R.id.button1); //获取“搜索”按钮 
//为“搜索”按钮添加单击事件监听器 
button.setOnClickListener(new OnClickListener() { 
	@Override 
	public void onClick(View v) { 
		Toast.makeText(MainActivity.this, textView.getText() .toString(), Toast.LENGTH_SHORT).show(); 
	} 
});

运行本实例,在屏幕上显示由自动完成文本框和按钮组成的搜索框,输入文字“网络”后,在下方将显示符合条件的提示信息下拉菜单,双击想要的列表项,即可将选中的内容显示到自动完 成文本框中。
在这里插入图片描述

进度条

当一个应用在后台执行时,前台界面不会有任何信息,这时用户根本不知道程序是否在执行以及执行进度等,因此需要使用进度条来提示程序执行的进度。在Android中,进度条(ProgressBar)用于向用户 显示某个耗时操作完成的百分比。 在屏幕中添加进度条,可以在XML布局文件中通过标记添加,基本语法格式如下:

< ProgressBar 属性列表 ></ProgressBar>

XML属性 描述
android:max 用于设置进度条的最大值
android:progress 用于指定进度条已完成的进度值
android:progressDrawable 用于设置进度条轨道的绘制形式

进度条组件还提供了下面两个常用方法用于操作进度。
[√]setProgress(int progress)方法:用于设置进度完成的百分比。
[√]incrementProgressBy(int diff)方法:用于设置进度条的进度增加或减少。当参数值为正数时,表示进度增加;为负数时,表示进度减少。

实现水平进度条和圆形进度条。
(1)新建项目的res\layout目录下的布局文件main19.xml,添加一个水平进度条和一个圆形进度条,修改后的代码如下:

<!-- 水平进度条 --> 
<ProgressBar android:id="@+id/progressBar1" 
	android:layout_width="match_parent" 
	android:max="100" 
	style="@android:style/Widget.ProgressBar.Horizontal" 
	android:layout_height="wrap_content"/> 
<!-- 圆形进度条 --> 
<ProgressBar android:id="@+id/progressBar2" 
	style="?android:attr/progressBarStyleLarge" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"/>

说明:在上面的代码中,通过android:max属性设置水平进度条的最大进度值;通过style属性可以为ProgressBar指定风格,常用的style属性值

XML属性 描述
?android:attr/progressBarStyleHorizontal 细水平长条进度条
?android:attr/progressBarStyleLarge 大圆形进度条
?android:attr/progressBarStyleSmall 小圆形进度条
@android:style/Widget.ProgressBar.Large 大跳跃、旋转画面的进度条
@android:style/Widget.ProgressBar.Small 小跳跃、旋转画面的进度条
@android:style/Widget.ProgressBar.Horizontal 粗水平长条进度条

(2)在主活动MainActivity中,定义两个ProgressBar类的对象(分别用于表示水平进度条和圆形进度条,一个int型的变量(用于表示完成进度)和一个处理消息的Handler类的对象,具体代码如下:

private ProgressBar horizonP; //水平进度条 
private ProgressBar circleP; //圆形进度条 
private int mProgressStatus = 0; //完成进度 
private Handler mHandler; //声明一个用于处理消息的Handler类的对象

(3)在主活动的onCreate()方法中,首先获取水平进度条和圆形进度条,然后通过匿名内部类实例化处理消息的Handler类的对象,并重写其handleMessage()方法,实现当耗时操作没有完成时更新进度,否则 设置进度条不显示,关键代码如下:

horizonP = (ProgressBar) findViewById(R.id.progressBar1); //获取水平进度条 
circleP=(ProgressBar)findViewById(R.id.progressBar2); //获取圆形进度条 
mHandler=new Handler(){ 
	@Override 
	public void handleMessage(Message msg) { 
		if(msg.what==0x111){ 
			horizonP.setProgress(mProgressStatus); //更新进度 
		}else{
			Toast.makeText(MainActivity.this, "耗时操作已经完成", Toast.LENGTH_SHORT).show(); 
			horizonP.setVisibility(View.GONE); //设置进度条不显示,并且不占用空间 
			circleP.setVisibility(View.GONE); //设置进度条不显示,并且不占用空间 
		} 
	} 
};

(4)开启一个线程,用于模拟一个耗时操作。在该线程中,调用sendMessage()方法发送处理消息,具体代码如下:

new Thread(new Runnable() { 
	public void run() { 
		while (true) { 
			mProgressStatus = doWork(); //获取耗时操作完成的百分比 
			Message m=new Message(); 
			if(mProgressStatus<100){ 
				m.what=0x111; mHandler.sendMessage(m); 
			//发送信息
			}else{
				m.what=0x110; 
				mHandler.sendMessage(m); 
			//发送消息 
				break; 
			} 
		} }
		
		//模拟一个耗时操作 
		private int doWork() { 
			mProgressStatus+=Math.random()*10; //改变完成进度 
			try {
				Thread.sleep(200); //线程休眠200毫秒 
			} catch (InterruptedException e) { 
				e.printStackTrace(); 
			} 
			return mProgressStatus; //返回新的进度 
		} 
	}).start(); //开启一个线程

拖动条和星级评分条

在Andriod中,提供了两种允许用户通过拖动来改变进度的组件,分别是拖动条(Seek Bar)和星级评分条(RatmgBar),下面分别进行介绍

  1. 拖动条 拖动条与进度条类似,所不同的是,拖动条允许用户拖动滑块来改变值,通常用于实现对某种数值的调节。例如,调节图片的透明度或是音量等。 在Android中,如果想在屏幕中添加拖动条,可以在XML布局文件中通过标记添加,基本语法格式如下:
<SeekBar android:layout_height="wrap_content" 
	android:id="@+id/seekBar1" 
	android:layout_width="match_parent"> 
</SeekBar>

SeekBar组件允许用户改变拖动滑块的外观,这可以使用android:thumb属性实现,该属性的属性值为一个Drawable对象,该Drawable对象将作为自定义滑块。 由于拖动条可以被用户控制,所以需要为其添加OnSeekBarChangeListener监听器,基本代码如下:

seekbar.setOnSeekBarChangeListener (new OnSeekBarChangeListener() { 
	@Override 
	public void onStopTrackingTouch (SeekBar seekBar) { 
		//要执行的代码 
	}
	
	@Override 
	public void onStartTrackingTouch (SeekBar seekBar) { 
		//要执行的代码 
	}
	
	@Override public void onProgressChanged (SeekBar seekBar, int progress , boolean fromUser) { 
		//其他要执行的代码 
	} 
});

说明: 在上面的代码中,onProgressChanged()方法中的参数progress表示当前进度,也就是拖动条的值。

下面通过一个具体的实例说明拖动条的应用。
实现在屏幕上显示拖动条,并为其添加OnSeekBarChangeListener监听器

<TextView android:text="当前值:50" 
	android:id="@+id/textView1" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"/> 
<!-- 拖动条 --> 
<SeekBar android:layout_height="wrap_content" 
	android:id="@+id/seekBar1"
	android:max="100" 
	android:progress="50" 
	android:padding="10px" 
	android:layout_width="match_parent"/>

2)在主活动MainActivity中,定义一个SeekBar类的对象,用于表示拖动条,具体代码如下:

private SeekBar seekbar; //拖动条

(3)在主活动的onCreate()方法中,首先获取布局文件中添加的文本视图和拖动条,然后为拖动条添加OnSeekBarChangeListener事件监听器,并且在重写的onStopTrackingTouch()和onStartTracking Touch()方法 中应用消息提示框显示对应状态,在onProgressChanged()方法中修改文本视图的值为当前进度条的进度值,具体代码如下:

final TextView result=(TextView)findViewById(R.id.textView1); //获取文本视图 
seekbar = (SeekBar) findViewById(R.id.seekBar1); //获取拖动条 
seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { 
	@Override 
	public void onStopTrackingTouch(SeekBar seekBar) { 
		Toast.makeText(MainActivity.this, "结束滑动", Toast.LENGTH_SHORT).show(); 
	}
	
	@Override 
	public void onStartTrackingTouch(SeekBar seekBar) { 
		Toast.makeText(MainActivity.this, "开始滑动", Toast.LENGTH_SHORT).show(); 
	}
	
	@Override 
	public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) { 
		result.setText("当前值:"+progress); //修改文本视图的值 
	} 
});

在这里插入图片描述

星级评分条

星级评分条与拖动条类似,都允许用户拖动来改变进度,所不同的是,星级评分条通过星星图案表示进度。通常情况下,使用星级评分条表示对某一事物的支持度或对某种服务的满意程度等。例如,淘 宝网中对卖家的好评度,就是通过星级评分条实现的。 在Android中,如果想在屏幕中添加星级评分条,可以在XML布局文件中通过标记添加,基本语法格式如下:

<RatingBar 属性列表 ></RatingBar>

XML属性 描述
android:isIndicator 用于指定该星级评分条是否允许用户改变,true为不允许改变
android:numStars 用于指定该星级评分条总共有多少个星
android:rating 用于指定该星级评分条默认的星级
android:stepSize 用于指定每次最少需要改变多少个星级,默认为0.5个

星级评分条还提供了以下3个比较常用的方法。
[√]getRating()方法:用于获取等级,表示选中了几颗星。
[√]getStepSize():用于获取每次最少要改变多少个星级。 [√]getProgress()方法:用于获取进度,获取到的进度值为getRating()方法返回值与getStepSize()方法返回值之积。

实现星级评分条
1)新建项目的res\layout目录下的布局文件main21.xml,将默认添加的TextView组件删除,并添加一个星级评分条和一个普通按钮,修改后的代码如下:

<!-- 星级评分条 --> 
<RatingBar android:id="@+id/ratingBar1" 
	android:numStars="5" 
	android:rating="3.5" 
	android:isIndicator="true" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"/> 
<!-- 按钮--> 
<Button android:text="提交" 
	android:id="@+id/button1" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"/>

(2)在主活动MainActivity中,定义一个RatingBar类的对象,用于表示星级评分条,具体代码如下:

private RatingBar ratingbar; //星级评分条

(3)在主活动的onCreate()方法中,首先获取布局文件中添加的星级评分条,然后获取提交按钮,并为其添加单击事件监听器,在重写的onClick()事件中,获取进度、等级和每次最少要改变多少个星级并显 示到日志中,同时通过消息提示框显示获得的星的个数,关键代码如下:

ratingbar = (RatingBar) findViewById(R.id.ratingBar1); //获取星级评分条 
Button button=(Button)findViewById(R.id.button1); //获取“提交”按钮 
button.setOnClickListener(new OnClickListener() { 
	@Override 
	public void onClick(View v) { 
		int result=ratingbar.getProgress(); //获取进度 
		float rating=ratingbar.getRating(); //获取等级 
		float step=ratingbar.getStepSize(); //获取每次最少要改变多少个星级 
		Log.i("星级评分条","step="+step+" result="+result+" rating="+rating); 
		Toast.makeText(MainActivity.this, "你得到了"+rating+"颗星", Toast.LENGTH_SHORT).show(); 
	} 
});

运行本实例,在屏幕中将显示5颗星的星级评分条,单击第4颗星的左半边,将显示如图4.4所示的选中效果,单击“提交”按钮,将弹出如图4.5所示的消息提示框显示选择了几颗星

选项卡

选项卡主要由TabHost、TabWidget和FrameLayout 3个组件组成,用于实现一个多标签页的用户界面,通过它可以将一个复杂的对话框分割成若干个标签页,实现对信息的分类显示和管理。使用该组件不 仅可以使界面简洁大方,还可以有效地减少窗体的个数。

在Android中,实现选项卡的一般步骤如下:
(1)在布局文件中添加实现选项卡所需的TabHost、TabWidget和FrameLayout组件。
(2)编写各标签页中要显示内容所对应的XML布局文件。
(3)在Activity中,获取并初始化TabHost组件。
(4)为TabHost对象添加标签页。

下面通过一个具体的实例来说明选项卡的应用。实现模拟显示未接来电和已接来电的选项卡。
(1)新建项目的res\layout目录下的布局文件main22.xml,将默认添加的布局代码删除,然后添加实现选项卡所需的TabHost、TabWidget和FrameLayout组件。具体的步骤是:首先添加一个TabHost组件,然后
在该组件中添加线性布局管理器,并且在该布局管理器中添加一个作为标签组的TabWidget和一个作为标签内容的FrameLayout组件。在XML布局文件中添加选项卡的基本代码如下:

<?xml version="1.0" encoding="utf-8"?> 
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
	android:id="@android:id/tabhost" 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent"> 
	
	<LinearLayout android:orientation="vertical" 
		android:layout_width="fill_parent" 
		android:layout_height="fill_parent"> 
	
	<TabWidget android:id="@android:id/tabs" 
		android:layout_width="fill_parent" 
		android:layout_height="wrap_content" /> 
		<FrameLayout android:id="@android:id/tabcontent" 
			android:layout_width="fill_parent" 
			android:layout_height="fill_parent"> 
		</FrameLayout > 
	</LinearLayout> 
</TabHost >

说明: 在应用XML布局文件添加选项卡时,必须使用系统的id来为各组件指定id属性,否则将出现异常。
(2)编写各标签页中要显示内容对应的XML布局文件。例如,编写一个XML布局文件,名称为tab1.xml,用于指定第一个标签页中要显示的内容,具体代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:id="@+id/LinearLayout01" 
	android:orientation="vertical" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content"> 
	
	<TextView android:layout_width="fill_parent" 
		android:layout_height="wrap_content" 
		android:text="简约但不简单"/> 
	<TextView android:layout_width="fill_parent" 
		android:layout_height="wrap_content" 
		android:text="风铃草"/> 
</LinearLayout>

说明:在本实例中,除了需要编写名称为tab1.xml的布局文件外,还需要编写名称为tab2.xml的布局文件,用于指定第二个标签页中要显示的内容。

(3)在Activity中,获取并初始化TabHost组件,关键代码如下:

private TabHost tabHost; //声明TabHost组件的对象 
tabHost=(TabHost)findViewById(android.R.id.tabhost); //获取TabHost对象 
tabHost.setup(); //初始化TabHost组件

4)为TabHost对象添加标签页,这里共添加了两个标签页,一个用于模拟显示未接来电,另一个用于模拟显示已接来电,关键代码如下:

LayoutInflater inflater = LayoutInflater.from(this); //声明并实例化一个LayoutInflater对象 
inflater.inflate(R.layout.tab1, tabHost.getTabContentView()); 
inflater.inflate(R.layout.tab2, tabHost.getTabContentView()); 
tabHost.addTab(tabHost.newTabSpec("tab01") 
.setIndicator("未接来电") .setContent(R.id.LinearLayout01)); //添加第一个标签页 
tabHost.addTab(tabHost.newTabSpec("tab02")
.setIndicator("已接来电") .setContent(R.id.LinearLayout02)); //添加第二个标签页

在这里插入图片描述

图像切换器

图像切换器(ImageSwitcher),用于实现类似于Windows操作系统下的“Windows照片查看器”中的上一张、下一张切换图片的功能。在使用ImageSwitcher时,必须实现ViewSwitcher.ViewFactory接口,并通过 makeView()方法来创建用于显示图片的ImageView。makeView()方法将返回一个显示图片的ImageView。在使用图像切换器时,还有一个方法非常重要,那就是setImageResource()方法,该方法用于指定要在 ImageSwitcher中显示的图片资源。

下面通过一个具体的实例来说明图像切换器的用法。实现类似于Windows照片查看器的简单的图片查看器。
(1)新建项目的res\layout目录下的布局文件main23.xml,将默认添加的垂直线性布局修改为水平线性布局,并将TextView组件删除,然后添加两个按钮和一个图像切换器ImageSwitcher,并设置图像切换器 的布局方式为居中显示。修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:orientation="vertical" 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	android:id="@+id/llayout" 
	android:gravity="center" > 
	
	<Button	android:text="上一张" 
		android:id="@+id/button1" 
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"/> 
		
		<!-- 添加一个图像切换器 --> 
		<ImageSwitcher android:id="@+id/imageSwitcher1" 
			android:layout_gravity="center" 
			android:layout_width="wrap_content" 
			android:layout_height="wrap_content"/> 
		
		<Button	android:text="下一张" 
			android:id="@+id/button2" 
			android:layout_width="wrap_content" 
			android:layout_height="wrap_content"/> 
</LinearLayout>

2)在主活动中,首先声明并初始化一个保存要显示图像id的数组,然后声明一个保存当前显示图像索引的变量,再声明一个图像切换器的对象,具体代码如下:

private int[] imageId = new int[] { R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04}; //声明并初始化一个保存要显示图像id的数组 
private int index = 0; //当前显示图像的索引 
private ImageSwitcher imageSwitcher; //声明一个图像切换器对象

(3)在主活动的onCreate()方法中,首先获取布局文件中添加的图像切换器,并为其设置淡入淡出的动画效果,然后为其设置一个ImageSwitcher.ViewFactory,并重写makeView()方法,最后为图像切换器设置 默认显示的图像,关键代码如下:

imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher1); //获取图像切换器 
//设置动画效果 
imageSwitcher.setInAnimation (AnimationUtils.loadAnimation(this,android.R.anim.fade_in)); //设置淡入动画 
imageSwitcher.setOutAnimation
(AnimationUtils.loadAnimation(this,android.R.anim.fade_out)); //设置淡出动画 
imageSwitcher.setFactory (new ViewFactory() { 
	@Override 
	public View makeView() { 
		imageView = new ImageView(MainActivity.this); //实例化一个ImageView类的对象 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); //设置保持纵横比居中缩放图像 
		imageView.setLayoutParams(new ImageSwitcher.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
		return imageView; //返回imageView对象 
	} 
}); 
imageSwitcher.setImageResource(imageId[index]); //显示默认的图片

说明:在上面的代码中,使用ImageSwitcher类的父类ViewAnimator的setInAnimation()方法和setOutAnimation()方法为图像切换器设置动画效果;调用其父类ViewSwitcher的setFactory()方法指定视图切换工厂,其 参数为ViewSwitcher.ViewFactory类型的对象。

(4)获取用于控制显示图片的“上一张”和“下一张”按钮,并分别为其添加单击事件监听器,在重写的onClick()方法中改变图像切换器中显示的图片,关键代码如下:

Button up = (Button) findViewById(R.id.button1); //获取“上一张”按钮 
Button down = (Button) findViewById(R.id.button2); //获取“下一张”按钮 
up.setOnClickListener(new OnClickListener() { 
	@Override 
	public void onClick(View v) { if (index > 0) { 
		index--; //index的值减1 
	} else { 
		index = imageId.length - 1; 
	} 
	imageSwitcher.setImageResource(imageId[index]); //显示当前图片 
	} 
}); 
down.setOnClickListener(new OnClickListener() { 
	@Override 
	public void onClick(View v) { 
		if (index < imageId.length - 1) { 
			index++; //index的值加1 
		} else { 
			index = 0; 
		}
		imageSwitcher.setImageResource(imageId[index]); //显示当前图片 
	} 
});

在这里插入图片描述

网格视图

网格视图(GridView)是按照行、列分布的方式来显示多个组件,通常用于显示图片或是图标等。在使用网格视图时,首先需要在屏幕上添加GridView组件,通常使用标记在XML布局文件中添 加,其基本语法如下:

<GridView 属性列表 ></GridView>

XML属性 描述
android:columnWidth 用于设置列的宽度
android:gravity 用于设置对齐方式
android:horizontalSpacing 用于设置各元素之间的水平间距
android:numColumns 用于设置列数,其属性值通常为大于1的值,如果只有1列,那么最好使用ListView实现
android:stretchMode 用于设置拉伸模式,其中属性值可以是none(不拉伸)、spacingWidth(仅拉伸元素之间的间距)、columnWidth(仅拉伸表格元素本身)或 spacingWidthUniform(表格元素本身、元素之间的间距一起拉伸) android:verticalSpacing 用于设置各元素之间的垂直间距

GridView与ListView类似,都需要通过Adapter来提供要显示的数据。在使用GridView组件时,通常使用SimpleAdapter或者BaseAdapter类为GridView组件提供数据。下面通过一个具体的实例演示如何通过 SimpleAdapter适配器指定内容的方式创建GridView。

(1)修改新建项目的res\layout目录下的布局文件main24.xml,将默认添加的TextView组件删除,然后添加一个id属性为gridView1的GridView组件,并设置其列数为4,也就是每行显示4张图片。修改后的代码如 下:

<GridView android:id="@+id/gridView1" 
	android:layout_height="wrap_content" 
	android:layout_width="match_parent" 
	android:stretchMode="columnWidth" 
	android:numColumns="4" ></GridView>

(2)编写用于布局网格内容的XML布局文件items.xml。在该文件中,采用垂直线性布局管理器,并在该布局管理器中添加一个ImageView组件和一个TextView组件,分别用于显示网格视图中的图片和说明 文字,具体代码如下:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:orientation="vertical" 
	android:layout_width="match_parent" 
	android:layout_height="match_parent"> 
	
	<ImageView android:id="@+id/image" 
		android:paddingLeft="10px" 
		android:scaleType="fitCenter" 
		android:layout_height="wrap_content" 
		android:layout_width="wrap_content"/> 
		
	<TextView android:layout_width="wrap_content" 
		android:layout_height="wrap_content" 
		android:padding="5px" 
		android:layout_gravity="center" 
		android:id="@+id/title" /> 

</LinearLayout>

(3)在主活动的onCreate()方法中,首先获取布局文件中添加的ListView组件,然后创建两个用于保存图片id和说明文字的数组,并将这些图片id和说明文字添加到List集合中,再创建一个SimpleAdapter简单 适配器,最后将该适配器与GridView相关联,具体代码如下:

GridView gridview = (GridView) findViewById(R.id.gridView1); //获取GridView组件 
int[] imageId = new int[] { R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img01, R.drawable.img03, R.drawable.img04, R.drawable.img01, R.drawable.img02, }; //定义并初始化保存图片id的数组 
String[] title = new String[] { "花开富贵", "海天一色", "日出", "天路", "一枝独秀","云", "独占鳌头", "蒲公英花", "花团锦簇","争奇斗艳", "和谐", "林间小路" }; //定义并初始化保存说明文字的数组 
List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>(); //创建一个List集合 //通过for循环将图片id和列表项文字放到Map中,并添加到List集合中 
for (int i = 0; i < imageId.length; i++) { 
	i = i%4;	
	Map<String, Object> map = new HashMap<String, Object>(); 
	map.put("image", imageId[i]); 
	map.put("title", title[i]); 
	listItems.add(map); //将map对象添加到List集合中 
}
SimpleAdapter adapter = new SimpleAdapter(this, listItems, R.layout.items, new String[] { "title", "image" }, new int[] {R.id.title, R.id.image } ); //创建SimpleAdapter 
gridview.setAdapter(adapter); //将适配器与GridView关联

在这里插入图片描述

画廊视图

画廊视图(Gallery)表示,能够按水平方向显示内容,并且可用手指直接拖动图片移动,一般用来浏览图片,被选中的选项位于中间,并且可以响应事件显示信息。在使用画廊视图时,首先需要在屏幕上添 加Gallery组件,通常使用标记在XML布局文件中添加,其基本语法如下:

< Gallery 属性列表 ></Gallery>

XML属性 描述
android:animationDuration 用于设置列表项切换时的动画持续时间
android:gravity 用于设置对齐方式 android:spacing 用于设置列表项之间的间距
android:unselectedAlpha 用于设置没有选中的列表项的透明度

使用画廊视图,也需要使用Adapter提供要显示的数据。通常使用BaseAdapter类为Gallery组件提供数据。下面通过一个具体的实例演示通过BaseAdapter适配器为Gallery组件提供要显示的图片。

实现在屏幕中添加画廊视图
(1)新建项目的res\layout目录下的布局文件main25.xml,将默认添加的TextView组件删除,然后添加一个id属性为gallery1的Gallery组件,并设置其列表项之间的间距为5像素,以及设置未选中项的透明度。 修改后的代码如下:

<Gallery android:id="@+id/gallery1" 
	android:spacing="5px" 
	android:unselectedAlpha="0.6" 
	android:layout_width="match_parent" 
	android:layout_height="wrap_content" />

(2)在主活动MainActivity中,定义一个用于保存要显示图片id的数组(需要将要显示的图片复制到res/drawable文件夹中),关键代码如下:

private int[] imageId = new int[] { R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08, R.drawable.img09, R.drawable.img10, R.drawable.img11, R.drawable.img12, };

3)在主活动的onCreate()方法中,获取在布局文件中添加的画廊视图,关键代码如下:

Gallery gallery = (Gallery) findViewById(R.id.gallery1); //获取Gallery组件

(4)在res\values目录中,创建一个名称为attr.xml的文件,在该文件中定义一个styleable对象,用于组合多个属性。这里只指定了一个系统自带的android:galleryItemBackground属性,用于设置各选项的背景,具 体代码如下:

<resources> 
	<declare-styleable name="Gallery"> 
		<attr name="android:galleryItemBackground" /> 
	</declare-styleable> 
</resources>

(5)创建BaseAdapter类的对象,并重写其中的getView()、getItemId()、getItem()和getCount()方法,其中最主要的是重写getView()方法来设置显示图片的格式,具体代码如下:

BaseAdapter adapter = new BaseAdapter() { 
	@Override 
	public View getView(int position, View convertView, ViewGroup parent) { 
		ImageView imageview; //声明ImageView的对象 
		if (convertView == null) { 
			imageview = new ImageView(MainActivity.this); //实例化ImageView的对象 imageview.setScaleType(ImageView.ScaleType.FIT_XY); //设置缩放方式 
			imageview.setLayoutParams(new Gallery.LayoutParams(180, 135));
			TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery); 
			imageview.setBackgroundResource(typedArray.getResourceId( R.styleable.Gallery_android_galleryItemBackground,0)); imageview.setPadding(5, 0, 5, 0); //设置ImageView的内边距 
		} else { 
			imageview = (ImageView) convertView; }
			imageview.setImageResource(imageId[position]); //为ImageView设置要显示的图片 
			return imageview; //返回ImageView 
		}/** 功能:获得当前选项的id */ 
	
		@Override
		public long getItemId(int position) { 
			return position; 
		}
		
		/** 功能:获得当前选项 */ 
		@Override 
		public Object getItem(int position) { 
			return position; 
		}
		
		/** 获得数量 */ 
		@Override 
		public int getCount() { 
			return imageId.length; 
		} 
	};

(6)将步骤(5)中创建的适配器与Gallery关联,并且让中间的图片选中,为了在用户单击某张图片时显示对应的位置,还需要为Gallery添加单击事件监听器,具体代码如下:

gallery.setAdapter(adapter); //将适配器与Gallery关联 
	gallery.setSelection(imageId.length / 2); //选中中间的图片 
	gallery.setOnItemClickListener(new OnItemClickListener() { 
		@Override 
		public void onItemClick(AdapterView<?> parent, View view,int position, long id) { 
			Toast.makeText(MainActivity.this,"您选择了第" + String.valueOf(position) + "张图片", Toast.LENGTH_SHORT).show(); 
		} 
	});

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值