android UI组件

UI组件 

ProgressBar

 

 

<LinearLayout      android:orientation="horizontal"      ... >      <ProgressBar          android:layout_width="wrap_content"          android:layout_height="wrap_content"          style="@android:style/Widget.ProgressBar.Small"          android:layout_marginRight="5dp" />      <TextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="@string/loading" />  </LinearLayout>

Toadd a progress bar to a layout file, you can use the <ProgressBar> element. By default, the progress baris a spinning wheel (an indeterminate indicator). To change to a horizontalprogress bar, apply theWidget.ProgressBar.Horizontal style,like so:

 <ProgressBar
     style="@android:style/Widget.ProgressBar.Horizontal"
     ... />

 

public class MyActivity extends Activity {      private static final int PROGRESS = 0x1;      private ProgressBar mProgress;      private int mProgressStatus = 0;      private Handler mHandler = new Handler();      protected void onCreate(Bundle icicle) {          super.onCreate(icicle);          setContentView(R.layout.progressbar_activity);          mProgress = (ProgressBar) findViewById(R.id.progress_bar);          // Start lengthy operation in a background thread          new Thread(new Runnable() {              public void run() {                  while (mProgressStatus < 100) {                      mProgressStatus = doWork();                      // Update the progress bar                      mHandler.post(new Runnable() {                          public void run() {                              mProgress.setProgress(mProgressStatus);                          }                      });                  }              }          }).start();      }  }

还可以显示在标题栏中

SeekBar

l         SeekBar.getProgress() ：获取拖动条当前值

l         调 用 setOnSeekBarChangeListener() 方 法 ， 处 理 拖 动 条 值 变 化 事 件 ， 把SeekBar.OnSeekBarChangeListener 实例作为参数传入

下面的实例可以模拟实现该进度 （ 拖动 ） 条 ， 还可以通过拖动游标改变进度值， 每次拖动之后仍会自动更新。

 

<SeekBar         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:max="1000"         android:progress="100"         android:secondaryProgress="360"         android:id="@+id/seekbar"                 />

 

public class SeekBarDemo extends Activity  implements OnSeekBarChangeListener{     protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        setContentView(R.layout.seekbar_layout);               SeekBar seekBar = (SeekBar) findViewById(R.id.seekbar);        seekBar.setOnSeekBarChangeListener(this);     }       public void onProgressChanged(SeekBar arg0, int arg1, boolean arg2) {     }       public void onStartTrackingTouch(SeekBar arg0) {        Log.d("TAG","start v="+arg0.getProgress());     }         public void onStopTrackingTouch(SeekBar seekBar) {        Log.d("TAG","stop v="+seekBar.getProgress());     } }

 

还可以换成图片

 

ImageView

android.widget.ImageView

 

直接子类   ImageButton,QuickContactBadge 

 

间接子类       ZoomButton

显示任意图像，例如图标。ImageView类可以加载各种来源的图片（如资源或图片库），需要计算图像的尺寸，比便它可以在其他布局中使用，并提供例如缩放和着色（渲染）各种显示选项。

 

android:scaleType

控制为了使图片适合 ImageView 的大小，应该如何变更图片大小或移动图片。一定是下列常量之一： 常量 值 描述 matrix 0 用矩阵来绘图 fitXY 1 拉伸图片（不按比例）以填充View的宽高 fitStart 2 按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的左边 fitCenter 3 按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的中间 fitEnd 4 按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的右边 center 5 按原图大小显示图片，但图片宽高大于View的宽高时，截图图片中间部分显示 centerCrop 6 按比例放大原图直至等于某边View的宽高显示。 centerInside 7 当原图宽高或等于View的宽高时，按原图大小居中显示；反之将原图缩放至View的宽高居中显示。 （译者注：设置图片的填充方式。）

 

<ImageView         android:layout_width="fill_parent"         android:layout_height="match_parent"         android:src="@drawable/ic_launcher"         android:background="#f00"         android:scaleType="fitStart" />

 

注：ImageView只能显示整个图象

 

 

案例：触摸截图。

<ImageView         android:id="@+id/img1"         android:layout_width="fill_parent"         android:layout_height="300dp"         android:background="#f00"         android:src="@drawable/pig" />       <ImageView         android:id="@+id/img2"         android:layout_width="100dp"         android:layout_height="100dp"         android:background="#f00"         android:scaleType="fitStart"         android:layout_marginTop="20dp"         />

 

public class ImageViewDemo extends Activityimplements OnTouchListener {       ImageView imageView1, imageView2;       protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.imageview_layout);        findViews();     }       private void findViews() {        imageView1 = (ImageView) findViewById(R.id.img1);        imageView2 = (ImageView) findViewById(R.id.img2);          imageView1.setOnTouchListener(this);     }       public boolean onTouch(View v, MotionEvent event) {          float scale = 412 / 320;        int x = (int) (event.getX() * scale);        int y = (int) (event.getY() * scale);        int width = (int) (100 * scale);        int height = (int) (100 * scale);               BitmapDrawable bitmapDrawable = (BitmapDrawable) imageView1.getDrawable();         imageView2.setImageBitmap(Bitmap.createBitmap(bitmapDrawable.getBitmap(),x,y,width,height));          return false;     } }

 

进一步考虑：尝试解决上面程序中边界溢出的问题

 

TabHost

提供选项卡（Tab页）的窗口视图容器。此对象包含两个子对象：一组是用户可以选择指定Tab页的标签；另一组是FrameLayout用来显示该Tab页的内容。通常控制使用这个容器对象，而不是设置在子元素本身的值。（译者注：即使使用的是单个元素，也最好把它放到容器对象ViewGroup里）

内部类

interfaceTabHost.OnTabChangeListener    

接口定义了当选项卡更改时被调用的回调函数

 

interface TabHost.TabContentFactory  

当某一选项卡被选中时生成选项卡的内容

 

class TabHost.TabSpec     

单独的选项卡，每个选项卡都有一个选项卡指示符,内容和tag标签,以便于记录.

 

公共方法

public void addTab(TabHost.TabSpec tabSpec)

新增一个选项卡

参数

tabSpec   指定怎样创建指示符和内容.

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent" >       <LinearLayout         android:id="@+id/tab1"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical" >           <Button             android:id="@+id/button"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:text="switch to tab2" />         <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@drawable/pig"             android:layout_marginTop="10dp"             android:scaleType="fitCenter"             />     </LinearLayout>   </TabHost>

 

public class TabHostDemo extends TabActivity {

 

 

protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);               TabHost tabHost = this.getTabHost();               LayoutInflater.from(this).inflate(R.layout.tabhost_layout, tabHost.getTabContentView(),true);                      tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("切换标签").setContent(R.id.tab1));                tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("SeekBar Demo").setContent(new Intent(this, SeekBarDemo.class)));           tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("imageView Demo").setContent(new Intent(this,ImageViewDemo.class)));               findViews();     }

 

private void findViews() {        Button btn = (Button) this.findViewById(R.id.button);        btn.setOnClickListener(new View.OnClickListener() {                   public void onClick(View v) {        //            TabHostDemo.this.getTabHost().setCurrentTab(1);                TabHostDemo.this.getTabHost().setCurrentTabByTag("tab2");            }        });        }