您的位置:首页 > 移动开发 > Android开发

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();//

   }

   

  });

 




 

 

 

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: