系出名門Android(7) - 控件(View)之ZoomControls, Include...

系出名門Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab,

Spinner, Chronometer, ScrollView

做者：webabcd
介紹
在 Android 中使用各類控件(View)
ZoomControls - 放大/縮小按鈕控件
Include - 整合控件
VideoView - 視頻播放控件
WebView - 瀏覽器控件
RatingBar - 評分控件
Tab - 選項卡控件
Spinner - 下拉框控件
Chronometer - 計時器控件
ScrollView - 滾動條控件
一、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();    
            }
        });
    }
}
二、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");
    }
}
三、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();
    }
}
四、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");
    }
}
五、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));
    }
}
六、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)));
    }
}
七、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) {
                                
            }
        });
    }
}
八、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());
        }
    };
}
九、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