android高级用户界面设计他
2013-07-17 18:00
330 查看
1:自动完成文本框AutoCompleteTextView。。。他的属性有
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/autoCompleteTextView1"
android:completionThreshold="2" 用于指定用户至上输入多少个字符才会显示提示
android:completionHint="输入搜索的内容" 用于弹出的下拉菜单指定提示标题
android:layout_weight="7"
android:text="" />
dropDownHeight 用于指定下拉菜单的高度
dropDownHorizontalOffset 用于指定下拉菜单与文本之间的水平偏移,默认下拉菜单与文本框左对齐
dropDownVerticalOffset 用于指定下拉菜单与文本之间的垂直偏移,下拉菜单默认紧跟文本框
dropDownWidth用于指定下拉菜单的宽度
popuBackground 用于为下拉菜单设置背景
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="@drawable/background7"
>
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/autoCompleteTextView1"
android:completionThreshold="2"
android:completionHint="输入搜索的内容"
android:layout_weight="7"
android:text="" />
<Button
android:text="搜索"
android:id="@+id/button1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
/>
</LinearLayout>
//定义数组
private static final String[] COUNTRIES=new String[]{
"明日科技","明日科技有限公司","吉林省明日科技有限公司","明日编程词典","明日","湖南长沙"
};
//取得自动完成文本框的组件
final AutoCompleteTextView textView=(AutoCompleteTextView)findViewById(R.id.autoCompleteTextView1);
//创建适配器
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line,
COUNTRIES);
textView.setAdapter(adapter);//给组件加入适配器
Log.i("选择", textView.getText().toString());
//得到按钮的组件
Button button=(Button)findViewById(R.id.button1);
//为按钮添加监听事件
button.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this,textView.getText().toString(), Toast.LENGTH_SHORT).show();
}
});
2进度条的ProgressBar
属性有:max用于设置进度条的最大值
progress用于指定进度已完成的进度
progressDrawable由于设置进度条轨道的绘制形式
setProgress()用于设置进度完成的百分比
incrementProgressBy()用于设置进度条的进度增加或者减少,值为正则增加,否则减少
@android:style/Widget.ProgressBar.Horizontal粗水平长度条
@android:style/Widget.ProgressBar.Small小跳跃,旋转画面的进度条
@android:style/Widget.ProgressBar.Large大跳跃,旋转画面的进度条
?android:attr/progressBarStyleLarge大圆形进度条
?android:attr/progressBarStyleSmall小圆形进度条
?android:attr/progressBarStyleHorizontal 细水平长条进度条
eg:
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
style="@android:style/Widget.ProgressBar.Horizontal"
/>
<!-- 圆形进度条 -->
<ProgressBar
android:id="@+id/progressBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleLarge"
/>
private ProgressBar horizonP;//水平进度条
private ProgressBar circleP;//圆形进度条
private int mProgressStatus=0;//完成进度
private Handler mHandler;//声明一个用于处理消息的Handler类的对象
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);//设置进度条不显示,并且不占用空间
}
}
};
new Thread(new Runnable(){//
@Override
public void run() {
// TODO Auto-generated method stub
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() {
// TODO Auto-generated method stub
mProgressStatus+=Math.random()*10;//改变完成的进度
try{
Thread.sleep(200);//线程休眠200毫秒
}catch(InterruptedException e){
e.printStackTrace();
}
return mProgressStatus;//返回新的进度
}
}).start();//开启一个线程
上面就是用以个线程控制的进度条
这是一个简单的进度条的图形
3:----------拖动条SeekBar
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="当前值:50"/>
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="50"
android:padding="10dp"
/>
private SeekBar seekbar;//拖动条
thumb属性可以设置滑动块的外观,改属性的属性值是一个Drawable的对象
final TextView result=(TextView)findViewById(R.id.textView1);//获取文本视图
seekbar=(SeekBar)findViewById(R.id.seekBar1);//获取拖动条
seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){
@Override
public void onProgressChanged(SeekBar seekBar, int progress, 这个函数可以说用了设置拖动条的值
boolean fromUser) {
// TODO Auto-generated method stub
result.setText("当前值:"+progress);//修改文本的视图的值
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) { 当拖动条开始的时候调用这个函数
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "开始滑动",Toast.LENGTH_SHORT).show();//消息提示框
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) { 当拖动条停止的时候调用这个函数
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "停止滑动",Toast.LENGTH_SHORT).show();//消息提示框
}
});
4:星级评条----RatingBar
一些基本属性
isIndicator用于指定该星级是否允许用户改变,true 为不允许改变
numStars用于指定该星级评分条共有多少个星星
rating用于指定该星级评分条默认的星级
stepSize每次最少要改变多少个星级
getRating。。用于获取等级,表示选中了几颗星
getStepSize。。。。用于获取每次最少要改变多少个星级
getProgress 。。。。用于获取进度,获取到的进度只为getRating()方法返回值和getStep()方法返回值之积
<!-- 星级评分条 -->
<RatingBar
android:id="@+id/ratingBar1"
android:numStars="5"
android:rating="3.5"
android:isIndicator="false"
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"
/>
private RatingBar ratingbar;//星级评条
ratingbar=(RatingBar)findViewById(R.id.ratingBar1);//获取星级评条
Button button=(Button)findViewById(R.id.button1);//获取提交按钮
button.setOnClickListener(new OnClickListener(){//条件监听事件
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
int result=ratingbar.getProgress();//获取进度
float rating=ratingbar.getRating();//获取等级
float step=ratingbar.getStepSize();//获取每次最少要改边多少个星级
Log.i("星级评条", "step="+step+"reult="+result+"rating="+rating);//显示对话框
Toast.makeText(MainActivity.this, "你的到了"+rating+"颗星", Toast.LENGTH_SHORT).show();//
}
});
5:----------------选项卡
注意:在应用xml文件布局文件添加选项卡时,必须使用系统的id来为各组件指定id属性,否则将出现异常
选项卡主要由TabHost,TabWidget和FrameLayout 3个组件组成,用于实现一个多标签页的用户界面,通过它可以将一个复杂的对话框分割成若干个标签页,实现对信息的分类管理,使用该组件不仅可以是界面简洁大方还可以有效的减少窗体的个数。
步骤:在Android中实现选项卡的一般步骤
一:在布局文件中添加实现选项卡所需的TabHost,TabWidget和FrameLayout 组件
<?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"
/>
</LinearLayout>
</TabHost>
二:编写各个标签页中要显示内容所对应的xml文件
tab1文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/LinearLayout01"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="简约但不简单"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="风铃草"
/>
</LinearLayout>
tab2文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/LinearLayout02">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="爱你一万年"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="很爱很爱你"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的爱,你在哪里"
/>
</LinearLayout>
三:在Activity中获取并初始化TabHost组件
private TabHost tabHost;//声明TabHost组件的对象
tabHost=(TabHost)findViewById(android.R.id.tabhost);//获取TabHost组件的对象
tabHost.setup();//初始TabHost组件
四:为TabHost对象添加标签
//为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));//添加第二个标签页
5:图片切换器--ImageSwitcher。。。。这使用ImageSwitcher时必须实现ViewSwitcher.ViewFactory接口,并通过makeView()方法来创建用于显示图片的ImageView,
makeView()方法返回一个显示图片的ImageView。。。在使用图像切换器是,还有一个方法非常重要,那就是setImageResoure()方法,改方法用于指定要在ImageSwitcher中显示的图片资源。。。
一:创建项目了文件的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/llayout"
android:gravity="center"
android:background="@drawable/background7"
>
<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>
二:在住活动中,声明并初始化一个保存要显示图像id的数组,然后声明一个保存当前显示图像索引的变量,在声明一个图像切换器的对象
//声明并初始化一个保存呀显示图像id的数组
private int [] imageId=new int[]{R.drawable.j1,R.drawable.j2,R.drawable.j3,R.drawable.j4,R.drawable.j5,
R.drawable.j6,R.drawable.j7,R.drawable.j8,R.drawable.j9,
R.drawable.j10,R.drawable.j11,R.drawable.j12,R.drawable.j13,R.drawable.j14,
R.drawable.j15};
private int index=0;//当前图像的索引
private ImageSwitcher imageSwitcher;//声明一个图像切换器对象
三:在主活动中获取布局文件中添加的图像的切换器,并为其设置淡入淡出的动画效果,然后为其设置一个ViewSwitcher.ViewFactory,并重写makeView()方法,最后为图像切换器设置默认显示的图像
imageSwitcher=(ImageSwitcher)findViewById(R.id.imageSwitcher1);//获取图像切换器
//设置动画效果
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));//设置淡入动画
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));//设置淡出动画
imageSwitcher.setFactory(new ViewFactory(){//
@Override
public View makeView() {
// TODO Auto-generated method stub
ImageView 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]);//显示默认的图片
四:获取用于控制图片的上一张和下一张的按钮,并为其添加单击事件的监听,在重新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) {
// TODO Auto-generated method stub
if(index>0){
index--;//index的值减一
}else{
index=imageId.length-1;//
}
imageSwitcher.setImageResource(imageId[index]);//显示当前的图片
}
});
down.setOnClickListener(new OnClickListener(){//
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(index<imageId.length-1){
index++;//index的值加一
}else{
index=0;//
}
imageSwitcher.setImageResource(imageId[index]);//显示当前的图片
}
});
6:网个视图GridView:是按照行和列的方式显示多个组件,通常用于显示的图片或者图标等
属性:columnWidth用于设置列的宽度
gravity用于设置对齐方式
horizontalSpacing用于设置各元素之间的水平间距
numColumns用于设置列数,其属性值通常为大于1的值,如果只有一列,那么最好使用ListView实现
stretchMode用于设置拉伸模式,其中属性值可以是none(不拉伸),spacingWidth(仅拉伸元素之间的间距),columnWidth(仅拉伸表格元素本身),或者spacingWidthUniform(表格元素本身,元素之间的间距一起拉伸)
verticalSpacing用于设置各元素之间的垂直间距
GridView与ListView类似都需要通过适配器来提供显示的数据,在使用GridView是通常使用SimpleAdapter或者BaseAdapter类为GridView组件提供数据。
一:在main.xml文件里面布局GridView组件
<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"
>
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchMode="columnWidth"
android:numColumns="4" />
</LinearLayout>
二:编写用于布局网格内容的xml文件。。文件名是items
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/image"
android:padding="10dp"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_gravity="center"
android:id="@+id/title"
/>
</LinearLayout>
三:在主活动中获取到布局文件中添加的 GridView组件,然后创建2个用于保存图片id和说明文字的数组,并把这些图片id和说明文字添加到List集合中,在创建一个SimpleAdapter简单适配器,最后将该适配器与 GridView相关联,具体代码如下:
GridView gridview=(GridView)findViewById(R.id.gridView1);//获取GridView组件
//定义并初始化保持图片id的数组
int [] imageId=new int[]{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,};
//定义并初始化保存图片说明文字的数组
String [] title=new String[]{"图片1","图片2","图片3","图片4","图片5","图片6","图片7","图片8","图片9",
"图片10","图片11","图片12"};
List<Map<String,Object>> listItems=new ArrayList<Map<String,Object>>();//创建一个List集合
//for循环将图片id和列表项文字放到Map中,并加到List集合中
for(int i=0;i<imageId.length;i++){
Map<String,Object> map=new HashMap<String,Object>();
map.put("image", imageId[i]);//添加到map中的id
map.put("title", title[i]);//添加到map中的文字说明
listItems.add(map);//
}
//创建SimpleAdapter适配器
SimpleAdapter adapter=new SimpleAdapter(this,listItems,R.layout.items,new String[]{"title","image"},
new int[]{R.id.title,R.id.image});
gridview.setAdapter(adapter);//将适配器和GridView关联
7:画廊视图Gallery(该类只用用在API14里面了,其他的API不支持了)
属性:animationDuration用于设置列表项切换是的动画持续时间
gravity用于设置对齐方式
spacing用于设置列表项之间的间距
unselectedAlpha用于设置没有选中的列表项的透明度
项目创建:
1:在xml文件中Gallery设置布局
<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"
>
<!--
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchMode="columnWidth"
android:numColumns="4" />
-->
<Gallery
android:id="@+id/gallery1"
android:spacing="5dp"
android:unselectedAlpha="0.6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
2:在主活动中定义保存要显示图片的id数组
private int [] imageId=new int[]{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,};//定义并初始化保持图片id的数组
3:在主活动中获取布局文件
Gallery gallery=(Gallery)findViewById(R.id.gallery1);//获取Gallery
4:在res\values下创建attr的xml文件
由于我用的版本问题不支持就不删掉了,不然有错误
5:创建BaseAdapter类的对象,并重写其中的方法
BaseAdapter adapter=new BaseAdapter(){//创建BaseAdapter类的对象
@Override
public int getCount() {//获得数量
// TODO Auto-generated method stub
return imageId.length;
}
@Override
public Object getItem(int arg0) {//获的到当前选项
// TODO Auto-generated method stub
return arg0;
}
@Override
public long getItemId(int arg0) {//获取当前选项的id
// TODO Auto-generated method stub
return arg0;
}
@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
ImageView imageview;//声明ImageView的对象
if(arg1==null){
imageview=new ImageView(MainActivity.this);//实例化ImageView的对象
imageview.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放方式
imageview.setLayoutParams(new Gallery.LayoutParams(180,135));
/* TypedArray typeArray=obtainStyledAttributes(R.styleable.Gallery);
imageview.setBackgroundResource(typeArray.getResourceId(
R.styleable.Gallery_android_galleryItermBackground, 0));*/
imageview.setPaddingRelative(5, 0, 5,0);//设置ImageView的内边距
}else{
imageview=(ImageView)arg1;
}
imageview.setImageResource(imageId[arg0]);//为ImageView设置要显示的图片
return imageview;//返回ImageView
}
};
gallery.setAdapter(adapter);//将适配器与Gallery相关联
gallery.setSelection(imageId.length/2);//选中中间的图片
6:为Gallery添加单击事件监听
gallery.setOnItemClickListener(new OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this,"你选择了第"+String.valueOf(arg2)+"张图片",
Toast.LENGTH_SHORT).show();//
}
});
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/autoCompleteTextView1"
android:completionThreshold="2" 用于指定用户至上输入多少个字符才会显示提示
android:completionHint="输入搜索的内容" 用于弹出的下拉菜单指定提示标题
android:layout_weight="7"
android:text="" />
dropDownHeight 用于指定下拉菜单的高度
dropDownHorizontalOffset 用于指定下拉菜单与文本之间的水平偏移,默认下拉菜单与文本框左对齐
dropDownVerticalOffset 用于指定下拉菜单与文本之间的垂直偏移,下拉菜单默认紧跟文本框
dropDownWidth用于指定下拉菜单的宽度
popuBackground 用于为下拉菜单设置背景
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="@drawable/background7"
>
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/autoCompleteTextView1"
android:completionThreshold="2"
android:completionHint="输入搜索的内容"
android:layout_weight="7"
android:text="" />
<Button
android:text="搜索"
android:id="@+id/button1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
/>
</LinearLayout>
//定义数组
private static final String[] COUNTRIES=new String[]{
"明日科技","明日科技有限公司","吉林省明日科技有限公司","明日编程词典","明日","湖南长沙"
};
//取得自动完成文本框的组件
final AutoCompleteTextView textView=(AutoCompleteTextView)findViewById(R.id.autoCompleteTextView1);
//创建适配器
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line,
COUNTRIES);
textView.setAdapter(adapter);//给组件加入适配器
Log.i("选择", textView.getText().toString());
//得到按钮的组件
Button button=(Button)findViewById(R.id.button1);
//为按钮添加监听事件
button.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this,textView.getText().toString(), Toast.LENGTH_SHORT).show();
}
});
2进度条的ProgressBar
属性有:max用于设置进度条的最大值
progress用于指定进度已完成的进度
progressDrawable由于设置进度条轨道的绘制形式
setProgress()用于设置进度完成的百分比
incrementProgressBy()用于设置进度条的进度增加或者减少,值为正则增加,否则减少
@android:style/Widget.ProgressBar.Horizontal粗水平长度条
@android:style/Widget.ProgressBar.Small小跳跃,旋转画面的进度条
@android:style/Widget.ProgressBar.Large大跳跃,旋转画面的进度条
?android:attr/progressBarStyleLarge大圆形进度条
?android:attr/progressBarStyleSmall小圆形进度条
?android:attr/progressBarStyleHorizontal 细水平长条进度条
eg:
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
style="@android:style/Widget.ProgressBar.Horizontal"
/>
<!-- 圆形进度条 -->
<ProgressBar
android:id="@+id/progressBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleLarge"
/>
private ProgressBar horizonP;//水平进度条
private ProgressBar circleP;//圆形进度条
private int mProgressStatus=0;//完成进度
private Handler mHandler;//声明一个用于处理消息的Handler类的对象
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);//设置进度条不显示,并且不占用空间
}
}
};
new Thread(new Runnable(){//
@Override
public void run() {
// TODO Auto-generated method stub
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() {
// TODO Auto-generated method stub
mProgressStatus+=Math.random()*10;//改变完成的进度
try{
Thread.sleep(200);//线程休眠200毫秒
}catch(InterruptedException e){
e.printStackTrace();
}
return mProgressStatus;//返回新的进度
}
}).start();//开启一个线程
上面就是用以个线程控制的进度条
这是一个简单的进度条的图形
3:----------拖动条SeekBar
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="当前值:50"/>
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="50"
android:padding="10dp"
/>
private SeekBar seekbar;//拖动条
thumb属性可以设置滑动块的外观,改属性的属性值是一个Drawable的对象
final TextView result=(TextView)findViewById(R.id.textView1);//获取文本视图
seekbar=(SeekBar)findViewById(R.id.seekBar1);//获取拖动条
seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){
@Override
public void onProgressChanged(SeekBar seekBar, int progress, 这个函数可以说用了设置拖动条的值
boolean fromUser) {
// TODO Auto-generated method stub
result.setText("当前值:"+progress);//修改文本的视图的值
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) { 当拖动条开始的时候调用这个函数
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "开始滑动",Toast.LENGTH_SHORT).show();//消息提示框
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) { 当拖动条停止的时候调用这个函数
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "停止滑动",Toast.LENGTH_SHORT).show();//消息提示框
}
});
4:星级评条----RatingBar
一些基本属性
isIndicator用于指定该星级是否允许用户改变,true 为不允许改变
numStars用于指定该星级评分条共有多少个星星
rating用于指定该星级评分条默认的星级
stepSize每次最少要改变多少个星级
getRating。。用于获取等级,表示选中了几颗星
getStepSize。。。。用于获取每次最少要改变多少个星级
getProgress 。。。。用于获取进度,获取到的进度只为getRating()方法返回值和getStep()方法返回值之积
<!-- 星级评分条 -->
<RatingBar
android:id="@+id/ratingBar1"
android:numStars="5"
android:rating="3.5"
android:isIndicator="false"
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"
/>
private RatingBar ratingbar;//星级评条
ratingbar=(RatingBar)findViewById(R.id.ratingBar1);//获取星级评条
Button button=(Button)findViewById(R.id.button1);//获取提交按钮
button.setOnClickListener(new OnClickListener(){//条件监听事件
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
int result=ratingbar.getProgress();//获取进度
float rating=ratingbar.getRating();//获取等级
float step=ratingbar.getStepSize();//获取每次最少要改边多少个星级
Log.i("星级评条", "step="+step+"reult="+result+"rating="+rating);//显示对话框
Toast.makeText(MainActivity.this, "你的到了"+rating+"颗星", Toast.LENGTH_SHORT).show();//
}
});
5:----------------选项卡
注意:在应用xml文件布局文件添加选项卡时,必须使用系统的id来为各组件指定id属性,否则将出现异常
选项卡主要由TabHost,TabWidget和FrameLayout 3个组件组成,用于实现一个多标签页的用户界面,通过它可以将一个复杂的对话框分割成若干个标签页,实现对信息的分类管理,使用该组件不仅可以是界面简洁大方还可以有效的减少窗体的个数。
步骤:在Android中实现选项卡的一般步骤
一:在布局文件中添加实现选项卡所需的TabHost,TabWidget和FrameLayout 组件
<?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"
/>
</LinearLayout>
</TabHost>
二:编写各个标签页中要显示内容所对应的xml文件
tab1文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/LinearLayout01"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="简约但不简单"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="风铃草"
/>
</LinearLayout>
tab2文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/LinearLayout02">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="爱你一万年"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="很爱很爱你"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的爱,你在哪里"
/>
</LinearLayout>
三:在Activity中获取并初始化TabHost组件
private TabHost tabHost;//声明TabHost组件的对象
tabHost=(TabHost)findViewById(android.R.id.tabhost);//获取TabHost组件的对象
tabHost.setup();//初始TabHost组件
四:为TabHost对象添加标签
//为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));//添加第二个标签页
5:图片切换器--ImageSwitcher。。。。这使用ImageSwitcher时必须实现ViewSwitcher.ViewFactory接口,并通过makeView()方法来创建用于显示图片的ImageView,
makeView()方法返回一个显示图片的ImageView。。。在使用图像切换器是,还有一个方法非常重要,那就是setImageResoure()方法,改方法用于指定要在ImageSwitcher中显示的图片资源。。。
一:创建项目了文件的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/llayout"
android:gravity="center"
android:background="@drawable/background7"
>
<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>
二:在住活动中,声明并初始化一个保存要显示图像id的数组,然后声明一个保存当前显示图像索引的变量,在声明一个图像切换器的对象
//声明并初始化一个保存呀显示图像id的数组
private int [] imageId=new int[]{R.drawable.j1,R.drawable.j2,R.drawable.j3,R.drawable.j4,R.drawable.j5,
R.drawable.j6,R.drawable.j7,R.drawable.j8,R.drawable.j9,
R.drawable.j10,R.drawable.j11,R.drawable.j12,R.drawable.j13,R.drawable.j14,
R.drawable.j15};
private int index=0;//当前图像的索引
private ImageSwitcher imageSwitcher;//声明一个图像切换器对象
三:在主活动中获取布局文件中添加的图像的切换器,并为其设置淡入淡出的动画效果,然后为其设置一个ViewSwitcher.ViewFactory,并重写makeView()方法,最后为图像切换器设置默认显示的图像
imageSwitcher=(ImageSwitcher)findViewById(R.id.imageSwitcher1);//获取图像切换器
//设置动画效果
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));//设置淡入动画
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));//设置淡出动画
imageSwitcher.setFactory(new ViewFactory(){//
@Override
public View makeView() {
// TODO Auto-generated method stub
ImageView 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]);//显示默认的图片
四:获取用于控制图片的上一张和下一张的按钮,并为其添加单击事件的监听,在重新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) {
// TODO Auto-generated method stub
if(index>0){
index--;//index的值减一
}else{
index=imageId.length-1;//
}
imageSwitcher.setImageResource(imageId[index]);//显示当前的图片
}
});
down.setOnClickListener(new OnClickListener(){//
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(index<imageId.length-1){
index++;//index的值加一
}else{
index=0;//
}
imageSwitcher.setImageResource(imageId[index]);//显示当前的图片
}
});
6:网个视图GridView:是按照行和列的方式显示多个组件,通常用于显示的图片或者图标等
属性:columnWidth用于设置列的宽度
gravity用于设置对齐方式
horizontalSpacing用于设置各元素之间的水平间距
numColumns用于设置列数,其属性值通常为大于1的值,如果只有一列,那么最好使用ListView实现
stretchMode用于设置拉伸模式,其中属性值可以是none(不拉伸),spacingWidth(仅拉伸元素之间的间距),columnWidth(仅拉伸表格元素本身),或者spacingWidthUniform(表格元素本身,元素之间的间距一起拉伸)
verticalSpacing用于设置各元素之间的垂直间距
GridView与ListView类似都需要通过适配器来提供显示的数据,在使用GridView是通常使用SimpleAdapter或者BaseAdapter类为GridView组件提供数据。
一:在main.xml文件里面布局GridView组件
<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"
>
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchMode="columnWidth"
android:numColumns="4" />
</LinearLayout>
二:编写用于布局网格内容的xml文件。。文件名是items
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/image"
android:padding="10dp"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_gravity="center"
android:id="@+id/title"
/>
</LinearLayout>
三:在主活动中获取到布局文件中添加的 GridView组件,然后创建2个用于保存图片id和说明文字的数组,并把这些图片id和说明文字添加到List集合中,在创建一个SimpleAdapter简单适配器,最后将该适配器与 GridView相关联,具体代码如下:
GridView gridview=(GridView)findViewById(R.id.gridView1);//获取GridView组件
//定义并初始化保持图片id的数组
int [] imageId=new int[]{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,};
//定义并初始化保存图片说明文字的数组
String [] title=new String[]{"图片1","图片2","图片3","图片4","图片5","图片6","图片7","图片8","图片9",
"图片10","图片11","图片12"};
List<Map<String,Object>> listItems=new ArrayList<Map<String,Object>>();//创建一个List集合
//for循环将图片id和列表项文字放到Map中,并加到List集合中
for(int i=0;i<imageId.length;i++){
Map<String,Object> map=new HashMap<String,Object>();
map.put("image", imageId[i]);//添加到map中的id
map.put("title", title[i]);//添加到map中的文字说明
listItems.add(map);//
}
//创建SimpleAdapter适配器
SimpleAdapter adapter=new SimpleAdapter(this,listItems,R.layout.items,new String[]{"title","image"},
new int[]{R.id.title,R.id.image});
gridview.setAdapter(adapter);//将适配器和GridView关联
7:画廊视图Gallery(该类只用用在API14里面了,其他的API不支持了)
属性:animationDuration用于设置列表项切换是的动画持续时间
gravity用于设置对齐方式
spacing用于设置列表项之间的间距
unselectedAlpha用于设置没有选中的列表项的透明度
项目创建:
1:在xml文件中Gallery设置布局
<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"
>
<!--
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchMode="columnWidth"
android:numColumns="4" />
-->
<Gallery
android:id="@+id/gallery1"
android:spacing="5dp"
android:unselectedAlpha="0.6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
2:在主活动中定义保存要显示图片的id数组
private int [] imageId=new int[]{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,};//定义并初始化保持图片id的数组
3:在主活动中获取布局文件
Gallery gallery=(Gallery)findViewById(R.id.gallery1);//获取Gallery
4:在res\values下创建attr的xml文件
由于我用的版本问题不支持就不删掉了,不然有错误
5:创建BaseAdapter类的对象,并重写其中的方法
BaseAdapter adapter=new BaseAdapter(){//创建BaseAdapter类的对象
@Override
public int getCount() {//获得数量
// TODO Auto-generated method stub
return imageId.length;
}
@Override
public Object getItem(int arg0) {//获的到当前选项
// TODO Auto-generated method stub
return arg0;
}
@Override
public long getItemId(int arg0) {//获取当前选项的id
// TODO Auto-generated method stub
return arg0;
}
@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
ImageView imageview;//声明ImageView的对象
if(arg1==null){
imageview=new ImageView(MainActivity.this);//实例化ImageView的对象
imageview.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放方式
imageview.setLayoutParams(new Gallery.LayoutParams(180,135));
/* TypedArray typeArray=obtainStyledAttributes(R.styleable.Gallery);
imageview.setBackgroundResource(typeArray.getResourceId(
R.styleable.Gallery_android_galleryItermBackground, 0));*/
imageview.setPaddingRelative(5, 0, 5,0);//设置ImageView的内边距
}else{
imageview=(ImageView)arg1;
}
imageview.setImageResource(imageId[arg0]);//为ImageView设置要显示的图片
return imageview;//返回ImageView
}
};
gallery.setAdapter(adapter);//将适配器与Gallery相关联
gallery.setSelection(imageId.length/2);//选中中间的图片
6:为Gallery添加单击事件监听
gallery.setOnItemClickListener(new OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this,"你选择了第"+String.valueOf(arg2)+"张图片",
Toast.LENGTH_SHORT).show();//
}
});
相关文章推荐
- Android从入门到精通第4章:高级用户界面设计
- Android 针对多种屏幕进行设计 (三)实施自适应用户界面流程
- Android用户界面设计:线性布局“.NET研究”
- Android 4.0用户界面设计和元素-ICS简介
- Android用户界面设计
- 第三讲 高级用户界面设计-视图组件 View
- Android[高级教程] 设计模式之三 原型模式
- Android用户界面设计
- Android——用户界面设计(布局)
- Android简明开发教程六:用户界面设计
- 设计Android的用户界面
- Android[高级教程] 设计模式之一 解释器模式
- Android用户界面设计:布局基础
- iOS与Android用户界面(UI)设计规范
- Android下基于XML的Graphics shape的高级UI设计,定义圆角背景等
- Android用户界面设计:线性布局
- 【Android用户界面设计:使用片段】
- Android用户界面设计:使用片段
- Android用户界面设计:框架布局
- Android UI高级交互设计Demo