系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab, Spinner, Chronometer, ScrollView

[索引页]
[源码下载]

系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab, Spinner, Chronometer, ScrollView

作者： webabcd


介绍
在 Android 中使用各种控件(View)

• ZoomControls - 放大/缩小按钮控件
• Include - 整合控件
• VideoView - 视频播放控件
• WebView - 浏览器控件
• RatingBar - 评分控件
• Tab - 选项卡控件
• Spinner - 下拉框控件
• Chronometer - 计时器控件
• ScrollView - 滚动条控件

1、ZoomControls 的 Demo
zoomcontrols.xml

代码

<? 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" >

     <!--
        放大/缩小按钮控件
     -->
     < ZoomControls  android:id ="@+id/zoomControls"
        android:layout_width ="wrap_content"  android:layout_height ="wrap_content" ></ ZoomControls >

</ LinearLayout >

_ZoomControls.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.os.Bundle;
import  android.view.View;
import  android.view.View.OnClickListener;
import  android.widget.Toast;
import  android.widget.ZoomControls;

public   class  _ZoomControls  extends  Activity {

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.zoomcontrols);

        setTitle( " ZoomControls " );

        ZoomControls zoomControls  =  (ZoomControls)  this .findViewById(R.id.zoomControls);
         //  setOnZoomInClickListener() - 响应单击放大按钮的事件
        zoomControls.setOnZoomInClickListener( new  OnClickListener() {
             public   void  onClick(View v) {
                Toast.makeText(_ZoomControls. this ,  " 单击了放大按钮 " , Toast.LENGTH_SHORT).show();
            }
        });
        
         //  setOnZoomOutClickListener() - 响应单击缩小按钮的事件
        zoomControls.setOnZoomOutClickListener( new  OnClickListener() {
             public   void  onClick(View v) {
                Toast.makeText(_ZoomControls. this ,  " 单击了缩小按钮 " , Toast.LENGTH_SHORT).show();    
            }
        });

    }
}

2、Include 的 Demo
include.xml

代码

<? 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" >

     <!--
        include - 整合控件，将指定的 layout 整合进来
            layout - 指定需要整合 layout
     -->
     < include  android:id ="@+id/cell1"  layout ="@layout/include_1"   />
     < include  android:id ="@+id/cell2"  android:layout_width ="fill_parent"  layout ="@layout/include_2"   />

</ LinearLayout >

include_1.xml

代码

<? xml version="1.0" encoding="utf-8" ?>
< TextView  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:text ="TextView01"  android:layout_width ="wrap_content"
    android:layout_height ="wrap_content" >
</ TextView >

include_2.xml

代码

<? xml version="1.0" encoding="utf-8" ?>
< TextView  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:text ="TextView02"  android:layout_width ="wrap_content"
    android:layout_height ="wrap_content" >
</ TextView >

_Include.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.os.Bundle;

public   class  _Include  extends  Activity {

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.include);

        setTitle( " Include " );
    }
}

3、VideoView 的 Demo
videoview.xml

代码

<? 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" >

     <!--
        VideoView - 视频播放控件
     -->
     < VideoView  android:id ="@+id/videoView"  android:layout_width ="wrap_content"
        android:layout_height ="wrap_content" >
     </ VideoView >
        
</ LinearLayout >

_VideoView.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.net.Uri;
import  android.os.Bundle;
import  android.widget.MediaController;
import  android.widget.VideoView;

public   class  _VideoView  extends  Activity {

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.videoview);

        setTitle( " VideoView " );
        
        VideoView videoView  =  (VideoView) findViewById(R.id.videoView);
        
         //  指定需要播放的视频的地址
        videoView.setVideoURI(Uri.parse( " android.resource://com.webabcd.view/ "   +  R.raw.demo));
         //  videoView.setVideoPath();
         
         //  设置播放器的控制条
        videoView.setMediaController( new  MediaController( this ));
         //  开始播放视频
        videoView.start();
    }
}

4、WebView 的 Demo
webview.xml

代码

<? 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" >

     <!--
        WebView - 浏览器控件（WebKit 内核）
     -->
     < WebView  android:layout_width ="fill_parent"
        android:layout_height ="wrap_content"  android:id ="@+id/webView"   />
        
</ LinearLayout >

_WebView.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.os.Bundle;
import  android.webkit.WebSettings;
import  android.webkit.WebView;

public   class  _WebView  extends  Activity {

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.webview);

        setTitle( " WebView " );
        
        WebView webView  =  (WebView) findViewById(R.id.webView);

         //  配置浏览器，使其可支持 JavaScript
        WebSettings webSettings  =  webView.getSettings();
        webSettings.setJavaScriptEnabled( true );
        
         //  清除浏览器缓存
        webView.clearCache( true );
         //  指定浏览器需要解析的 url 地址
        webView.loadUrl( " http://webabcd.cnblogs.com/ " );
         //  指定浏览器需要解析的 html 数据
         //  webView.loadData("<a href=' http://webabcd.cnblogs.com/ '>webabcd</a>", "text/html", "utf-8");
    }
}

5、RatingBar 的 Demo
ratingbar.xml

代码

<? 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" >

     <!--
        RatingBar - 评分控件
            numStars - 评分控件的星星的数量
            rating - 当前评分的值    
     -->
     < RatingBar  android:id ="@+id/ratingBar"  android:numStars ="5"
        android:rating ="1.5"  android:layout_width ="wrap_content"
        android:layout_height ="wrap_content" >
     </ RatingBar >

     < TextView  android:id ="@+id/textView"  android:layout_width ="wrap_content"
        android:layout_height ="wrap_content"   />

</ LinearLayout >

_RatingBar.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.os.Bundle;
import  android.widget.RatingBar;
import  android.widget.TextView;

public   class  _RatingBar  extends  Activity  implements  RatingBar.OnRatingBarChangeListener {

     private  RatingBar mRatingBar;
     private  TextView mTextView;

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.ratingbar);

        setTitle( " RatingBar " );

        mTextView  =  (TextView) findViewById(R.id.textView);
        mRatingBar  =  (RatingBar) findViewById(R.id.ratingBar);

         //  setOnRatingBarChangeListener() - 响应评分值发生改变的事件
        mRatingBar.setOnRatingBarChangeListener( this );
    }

    @Override
     public   void  onRatingChanged(RatingBar ratingBar,  float  rating,
             boolean  fromUser) {
        mTextView.setText(String.valueOf(rating));
    }
}

6、Tab 的 Demo
tab.xml

代码

<? xml version="1.0" encoding="utf-8" ?>
< FrameLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:layout_width ="fill_parent"  android:layout_height ="fill_parent" >

     <!--  Tab 1 的内容　 -->
     < TextView  android:id ="@+id/view1"  android:layout_width ="fill_parent"
        android:layout_height ="fill_parent"  android:text ="tab1 content"   />
        
     <!--  Tab 2 的内容  -->
     < TextView  android:id ="@+id/view2"  android:layout_width ="fill_parent"
        android:layout_height ="fill_parent"  android:text ="tab2 content"   />

</ FrameLayout >

_Tab.java

代码

package  com.webabcd.view;

import  android.app.TabActivity;
import  android.content.Intent;
import  android.os.Bundle;
import  android.view.LayoutInflater;
import  android.widget.TabHost;

//  实现 Tab 功能的话要继承 TabActivity
public   class  _Tab  extends  TabActivity {

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);

        TabHost tabHost  =  getTabHost();
        LayoutInflater.from( this ).inflate(R.layout.tab, tabHost.getTabContentView(),  true );

         //  Tab 1 的内容
        tabHost.addTab(tabHost.newTabSpec( " tab1 " )
                .setIndicator( " tab1 " )
                .setContent(R.id.view1));
        
         //  Tab 2 的内容（设置了 Tab 图片）
        tabHost.addTab(tabHost.newTabSpec( " tab2 " )
                .setIndicator( " tab2 " , getResources().getDrawable(R.drawable.icon01))
                .setContent(R.id.view2));
        
         //  Tab 3 的内容（设置 Tab 的内容为指定的 Activity）
        tabHost.addTab(tabHost.newTabSpec( " tab3 " )
                .setIndicator( " tab3 " )
                .setContent( new  Intent( this , _TextView. class )));

    }
}

7、Spinner 的 Demo
spinner.xml

代码

<? 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" >

     < TextView  android:layout_width ="fill_parent"
        android:layout_height ="wrap_content"  android:id ="@+id/textView"   />

     <!--
        Spinner - 下拉框控件
     -->         
     < Spinner  android:id ="@+id/spinner"  android:layout_width ="fill_parent"
        android:layout_height ="wrap_content"   />

</ LinearLayout >

_Spinner.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.os.Bundle;
import  android.view.View;
import  android.widget.AdapterView;
import  android.widget.ArrayAdapter;
import  android.widget.Spinner;
import  android.widget.TextView;

public   class  _Spinner  extends  Activity {

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.spinner);

        setTitle( " Spinner " );

        Spinner spinner  =  (Spinner) findViewById(R.id.spinner);
        
         //  设置下拉框控件的标题文本
        spinner.setPrompt( " 请选择 " );
         //  实例化适配器，指定显示格式及数据源
        ArrayAdapter < CharSequence >  adapter  =  ArrayAdapter.createFromResource(
                 this , R.array.colors, android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter);

         //  setOnItemSelectedListener() - 响应下拉框的选中值发生变化的事件
        spinner.setOnItemSelectedListener( new  AdapterView.OnItemSelectedListener() {
            @Override
             public   void  onItemSelected(AdapterView <?>  arg0, View arg1,
                     int  arg2,  long  arg3) {
                TextView textView  =  (TextView)_Spinner. this .findViewById(R.id.textView);
                textView.setText(((TextView)arg1).getText());
            }

            @Override
             public   void  onNothingSelected(AdapterView <?>  arg0) {
                                
            }
        });
    }
}

8、Chronometer 的 Demo
chronometer.xml

代码

<? 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" >

     <!--
        Chronometer - 计时器控件
     -->
     < Chronometer  android:id ="@+id/chronometer"
        android:layout_width ="wrap_content"  android:layout_height ="wrap_content"   />

     < Button  android:id ="@+id/btnStart"  android:layout_width ="wrap_content"
        android:layout_height ="wrap_content"  android:text ="开始计时" >
         < requestFocus  />
     </ Button >

     < Button  android:id ="@+id/btnStop"  android:layout_width ="wrap_content"
        android:layout_height ="wrap_content"  android:text ="停止计时" >
     </ Button >

     < Button  android:id ="@+id/btnReset"  android:layout_width ="wrap_content"
        android:layout_height ="wrap_content"  android:text ="计时器复位" >
     </ Button >

</ LinearLayout >

_Chronometer.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.os.Bundle;
import  android.os.SystemClock;
import  android.view.View;
import  android.view.View.OnClickListener;
import  android.widget.Button;
import  android.widget.Chronometer;

public   class  _Chronometer  extends  Activity {

     private  Chronometer mChronometer;

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.chronometer);

        setTitle( " Chronometer " );

        Button button;

        mChronometer  =  (Chronometer) findViewById(R.id.chronometer);
         //  设置计时器所显示的时间格式
        mChronometer.setFormat( " 计时：(%s) " );
        
        button  =  (Button) findViewById(R.id.btnStart);
        button.setOnClickListener(mStartListener);

        button  =  (Button) findViewById(R.id.btnStop);
        button.setOnClickListener(mStopListener);

        button  =  (Button) findViewById(R.id.btnReset);
        button.setOnClickListener(mResetListener);
    }

    View.OnClickListener mStartListener  =   new  OnClickListener() {
         public   void  onClick(View v) {
             //  启动计时器
            mChronometer.start();
        }
    };

    View.OnClickListener mStopListener  =   new  OnClickListener() {
         public   void  onClick(View v) {
             //  暂停计时器
            mChronometer.stop();
        }
    };

    View.OnClickListener mResetListener  =   new  OnClickListener() {
         public   void  onClick(View v) {
             //  复位计时器，即停止计时器
            mChronometer.setBase(SystemClock.elapsedRealtime());
        }
    };
}

9、ScrollView 的 Demo
scrollview.xml

代码

<? 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" >

     <!--
        ScrollView - 滚动条控件
            scrollbarStyle - 滚动条的样式
     -->
     < ScrollView  android:id ="@+id/scrollView"
        android:layout_width ="fill_parent"  android:layout_height ="200px"
        android:scrollbarStyle ="outsideOverlay"  android:background ="@android:drawable/edit_text" >
         < TextView  android:layout_width ="fill_parent"
            android:layout_height ="wrap_content"  android:id ="@+id/textView"   />
     </ ScrollView >

</ LinearLayout >

_ScrollView.java

代码

package  com.webabcd.view;

import  android.app.Activity;
import  android.os.Bundle;
import  android.widget.TextView;

public   class  _ScrollView  extends  Activity {

    @Override
     protected   void  onCreate(Bundle savedInstanceState) {
         //  TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
         this .setContentView(R.layout.scrollview);

        setTitle( " ScrollView " );

        TextView textView  =  (TextView) this .findViewById(R.id.textView);
        textView.setText( " a\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na " );
    }
}

OK
[源码下载]