当前位置: 代码迷 >> Android >> android UI总结(三)
  详细解决方案

android UI总结(三)

热度:73   发布时间:2016-04-28 03:38:16.0
android UI小结(三)
一、自动完成文本框 AutoCompleteTextView
当用户选择某个菜单项之后,AutoCompleteTextView会按用户选择自动填写该文本框。使用时必须为他设置一个Adapter,该Adapter封装了AutoCompleteTextView预设的提示文本。
eg.布局文件:
<AutoCompleteTextView  	android:id="@+id/auto"	android:layout_width="fill_parent" 	android:layout_height="wrap_content" 	android:completionHint="选择您喜欢的商品:"	android:dropDownHorizontalOffset="10dp"	android:completionThreshold="1"/>

为AutoCompleteTextView设置Adapter的代码:
String[] books = new String[]{		"商品XXX",		"商品XXXXX",		"商品XXXXXX",		"商品XXXXXXXX"	};// 创建一个ArrayAdapter,封装数组		ArrayAdapter<String> aa = new ArrayAdapter<String>(this,			android.R.layout.simple_dropdown_item_1line, books);		actv = (AutoCompleteTextView)findViewById(R.id.auto);		// 设置Adapter		actv.setAdapter(aa);


二、GridView
GridView和ListView组件有相同的父类AbsListView; 区别在于ListView只显示一列而GridView可显示多列。GridView也需要Adapter来提供显示的数据。
eg.布局文件:
<GridView  	android:id="@+id/grid01"	android:layout_width="fill_parent" 	android:layout_height="wrap_content" 	android:horizontalSpacing="1pt"	android:verticalSpacing="1pt"	android:numColumns="4"	android:gravity="center"	/>

为GridView提供Adapter
// 创建一个SimpleAdapter		SimpleAdapter simpleAdapter = new SimpleAdapter(this,				listItems				// 使用/layout/cell.xml文件作为界面布局				, R.layout.cell, new String[] { "image" },				new int[] { R.id.image1 });		grid = (GridView) findViewById(R.id.grid01);		// 为GridView设置Adapter		grid.setAdapter(simpleAdapter);


三、ExpandableListView 可展开的列表项组件
是ListView的子类,在普通ListView上进行了扩展,把列表项分为几组,每组又可以包含多个子列表项。
//创建一个BaseExpandableListAdapter对象		ExpandableListAdapter adapter = new BaseExpandableListAdapter()		{			int[] logos = new int[]			{				R.drawable.yf,				R.drawable.sm,				R.drawable.sp			}; 			private String[] goodsTypes = new String[]				{ "衣服", "数码", "食品"};			private String[][] goods = new String[][]			{				{ "xxx", "xxx", "xxx", "xxx" },				{ "yyy", "yyy", "yyy", "yyy" },				{ "zzz", "zzz" , "zzz" }			};			// 获取指定组位置、指定子列表项处的子列表项数据			@Override			public Object getChild(int groupPosition, int childPosition)			{				return goods[groupPosition][childPosition];			}			@Override			public long getChildId(int groupPosition, int childPosition)			{				return childPosition;			}                          //返回特定组所包含的子列表项的数量			@Override			public int getChildrenCount(int groupPosition)			{				return goods[groupPosition].length;			}			private TextView getTextView()			{				AbsListView.LayoutParams lp = new AbsListView.LayoutParams(						ViewGroup.LayoutParams.MATCH_PARENT, 64);				TextView textView = new TextView(ExpandableListViewTest.this);				textView.setLayoutParams(lp);				textView.setGravity(Gravity.CENTER_VERTICAL | Gravity.LEFT);				textView.setPadding(36, 0, 0, 0);				textView.setTextSize(20);				return textView;			}			// 该方法决定每个子选项的外观			@Override			public View getChildView(int groupPosition, int childPosition,					boolean isLastChild, View convertView, ViewGroup parent)			{				TextView textView = getTextView();				textView.setText(getChild(groupPosition, childPosition)						.toString());				return textView;			}			// 获取指定组位置处的组数据			@Override			public Object getGroup(int groupPosition)			{				return goodsTypes[groupPosition];			}                          //包含组列表的数量			@Override			public int getGroupCount()			{				return goodsTypes.length;			}			@Override			public long getGroupId(int groupPosition)			{				return groupPosition;			}			// 该方法决定每个组选项的外观			@Override			public View getGroupView(int groupPosition, boolean isExpanded,					View convertView, ViewGroup parent)			{				LinearLayout ll = new LinearLayout(ExpandableListViewTest.this);				ll.setOrientation(0);				ImageView logo = new ImageView(ExpandableListViewTest.this);				logo.setImageResource(logos[groupPosition]);				ll.addView(logo);				TextView textView = getTextView();				textView.setText(getGroup(groupPosition).toString());				ll.addView(textView);				return ll;			}			@Override			public boolean isChildSelectable(int groupPosition,					int childPosition)			{				return true;			}			@Override			public boolean hasStableIds()			{				return true;			}		};		ExpandableListView expandListView = (ExpandableListView) findViewById(R.id.list);		expandListView.setAdapter(adapter);	}


四、Spinner Gallery(画廊视图)
Spinner就是一个垂直的列表选择框。为Spinner指定android:entries属性或者为Spinner设置ArrayAdapter即可实现Spinner

Gallery显示一个水平的列表选择框。不过他没有android:entries属性,所以只能为他设置一个Adapter

五、ProgressBar进度条组件
进度条组件通常用于向用户显示某个耗时操作完成的百分比。可通过style属性来指定进度条的样式,如:
<ProgressBar 	android:layout_width="wrap_content" 	android:layout_height="wrap_content"	style="@android:style/Widget.ProgressBar.Small"	/>

下面通过填充数组来模拟一个耗时操作,以进度条来标识任务完成的百分比。
// 该程序模拟填充长度为200的数组	private int[] data = new int[200];	int hasData = 0;	// 记录ProgressBar的完成进度	int status = 0;		ProgressBar bar , bar2;	// 创建一个负责更新的进度的Handler	Handler mHandler = new Handler()	{		@Override		public void handleMessage(Message msg)		{			// 表明消息是由该程序发送的			if (msg.what == 0x111)			{				bar.setProgress(status);				bar2.setProgress(status);			}		}	};		@Override	public void onCreate(Bundle savedInstanceState)	{		super.onCreate(savedInstanceState);		setContentView(R.layout.main);		bar = (ProgressBar) findViewById(R.id.bar);		bar2 = (ProgressBar) findViewById(R.id.bar2);			// 启动线程来执行任务		new Thread()		{			public void run()			{				while (status < 200)				{					// 获取耗时操作的完成百分比					status = doWork();					// 发送消息					mHandler.sendEmptyMessage(0x111);				}			}		}.start();	}	// 模拟一个耗时的操作	public int doWork()	{		// 为数组元素赋值		data[hasData++] = (int) (Math.random() * 100);		try		{			Thread.sleep(100);		}		catch (InterruptedException e)		{			e.printStackTrace();		}		return hasData;	}

而对于显示在标题上的进度条,可以通过设置窗口特征控制显示进度条。
//设置窗口特征:启用显示进度的进度条		requestWindowFeature(Window.FEATURE_PROGRESS);  		//设置窗口特征:启用不显示进度的进度条		requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS); 


六、ViewSwitcher、ImageSwitcher、TextSwitcher、ViewFlipper
1.ViewSwitcher代表了视图切换组件,它本身继承了FrameLayout.可将多个View层叠在一起每次只显示一个组件。
<!-- 定义一个ViewSwitcher组件 -->	<ViewSwitcher		android:id="@+id/viewSwitcher"		android:layout_width="fill_parent"		android:layout_height="fill_parent" />

// 创建LayoutInflater对象	LayoutInflater inflater = LayoutInflater.from(ViewSwitcherTest.this);ViewSwitcher switcher = (ViewSwitcher) findViewById(R.id.viewSwitcher);switcher.setFactory(new ViewFactory()		{			// 实际上就是返回一个GridView组件			@Override			public View makeView()			{				// 加载R.layout.slidelistview组件,实际上就是一个GridView组件。				return inflater.inflate(R.layout.slidelistview, null);			}		});

ViewSwitcher常用的方法:
// 为ViewSwitcher的组件显示过程设置动画			switcher.setInAnimation(this, R.anim.slide_in_right);			// 为ViewSwitcher的组件隐藏过程设置动画			switcher.setOutAnimation(this, R.anim.slide_out_left);// 控制下一屏将要显示的GridView对应的 Adapter			((GridView) switcher.getNextView()).setAdapter(adapter);			// 显示下一屏,			switcher.showNext();  


2.ImageSwitcher图像切换器
<!-- 定义一个ImageSwitcher组件 --><ImageSwitcher android:id="@+id/switcher"	android:layout_width="300dp"	android:layout_height="300dp"	android:layout_gravity="center_horizontal"	android:inAnimation="@android:anim/fade_in"	android:outAnimation="@android:anim/fade_out"	/>

ImageView常用方法:
ImageSwitcher switcher = (ImageSwitcher) findViewById(R.id.switcher);	// 为ImageSwitcher设置图片切换的动画效果		switcher.setFactory(new ViewFactory()		{			@Override			public View makeView()			{				// 创建ImageView对象				ImageView imageView = new ImageView(ImageSwitcherTest.this);				imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);				imageView.setLayoutParams(new ImageSwitcher.LayoutParams(					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));				// 返回ImageView对象				return imageView;			}		});// 显示当前被选中的图片				switcher.setImageResource(XXX);


3.TextSwitcher 文本切换器
<!-- 定义一个TextSwitcher,并指定了文本切换时的动画效果 --><TextSwitcher    android:id="@+id/textSwitcher"	android:layout_width="match_parent"	android:layout_height="wrap_content"	android:inAnimation="@android:anim/slide_in_left"	android:outAnimation="@android:anim/slide_out_right"	android:onClick="next"/>

textSwitcher.setFactory(new ViewSwitcher.ViewFactory()		{			public View makeView()			{				TextView tv = new TextView(TextSwitcherTest.this);				tv.setTextSize(40);				tv.setTextColor(Color.MAGENTA);				return tv;			}		});textSwitcher.setText(String str);


4.ViewFlipper组件
ViewFlipper组件继承了ViewAnimator,可调用addView(View)添加多个组件。一旦向ViewFlipper中添加多个组件之后,ViewFlipper可以使用动画控制多个组件之间的切换效果:
<ViewFlipper		android:id="@+id/details"		android:layout_width="match_parent"		android:layout_height="match_parent"		android:persistentDrawingCache="animation"		android:flipInterval="1000">		<ImageView			android:src="@drawable/java"			android:layout_width="fill_parent"			android:layout_height="wrap_content">		</ImageView>		<ImageView			android:src="@drawable/android"			android:layout_width="fill_parent"			android:layout_height="wrap_content">		</ImageView>		<ImageView			android:src="@drawable/ee"			android:layout_width="fill_parent"			android:layout_height="wrap_content">		</ImageView>	</ViewFlipper>

常用方法如下:
viewFlipper.setInAnimation(this, R.anim.slide_in_right);		viewFlipper.setOutAnimation(this, R.anim.slide_out_left);		// 显示上一个组件		viewFlipper.showPrevious();                  // 显示下一个组件。		viewFlipper.showNext();		// 停止自动播放		viewFlipper.stopFlipping();
  相关解决方案