android應用開發之ImageView，SeekBar，TableHost，ProgressBar的使用 – Android移動開發技術文章_手機開發 Android移動開發教學課程

先讓大傢看一個效果圖

怎麼樣，效果炫嗎？

讓我們來分析一下，這種效果怎麼樣才能實現呢？

首先我們註意一下，上方幾個橫著切換的功能是TabHost

TabHost

提供選項卡（Tab頁）的窗口視圖容器。此對象包含兩個子對象：一組是用戶可以選擇指定Tab頁的標簽；另一組是FrameLayout用來顯示該Tab頁的內容。通常控制使用這個容器對象，而不是設置在子元素本身的值。（譯者註：即使使用的是單個元素，也最好把它放到容器對象ViewGroup裡）

內部類

interfaceTabHost.OnTabChangeListener

接口定義瞭當選項卡更改時被調用的回調函數

interface TabHost.TabContentFactory

當某一選項卡被選中時生成選項卡的內容

class TabHost.TabSpec

單獨的選項卡，每個選項卡都有一個選項卡指示符,內容和tag標簽,以便於記錄.

公共方法

public void addTab(TabHost.TabSpec tabSpec)

新增一個選項卡

參數

tabSpec 指定怎樣創建指示符和內容.

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <Button android:id="@+id/button" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:text="切換到第3個標簽" />
        <ImageView android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:src="@drawable/background" android:layout_marginTop="30dp"/>
    </LinearLayout>
</TabHost>

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

public class TableHostTest extends TabActivity {

    private TabHost tabHost = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        tabHost = this.getTabHost();
        LayoutInflater inflater = LayoutInflater.from(this);
        /*註意true的作用*/
        inflater.inflate(R.layout.tablehost, tabHost.getTabContentView(),true);
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("界面1").setContent(R.id.tab1));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("界面2").setContent(new Intent(this,SeekBarDemo.class)));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("界面3").setContent(new Intent(this,UITest4Activity.class)));
    }

}

進度條顯示：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="進度條演示" /> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:max="1000" android:progress="100" android:id="@+id/progressbar1" /> <ProgressBar style="@android:style/Widget.ProgressBar.Horizontal" android:layout_marginTop="30dp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="1000" android:progress="500" android:secondaryProgress="300" android:id="@+id/progressbar2" /> </LinearLayout>

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.widget.ProgressBar;

public class ProgressBarDemo extends Activity{

    ProgressBar progressbar = null;
    static int i = 0;
    int progressbarMax = 0;

    Handler handler = new Handler();

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.progressbar_layout);

        findViews();
    }

    private void findViews() {
        progressbar = (ProgressBar) this.findViewById(R.id.progressbar2);
        progressbar.setMax(1000);
        progressbarMax = progressbar.getMax();

        new Thread(new Runnable(){

            public void run(){
                while(i< progressbarMax){
                    i=doWork();

                    handler.post(new Runnable(){

                        public void run(){
                            progressbar.setProgress(i);
                        }
                    });
                    try {
                        Thread.sleep(50);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                }
            }
        }).start();

    }

    public int doWork(){
        Log.d("TAG", String.valueOf(i));
        return ++i;
    }

/* //不能用！！！！
    public void run(){
        Log.d("TAG","thread starting…");

        while(i++ < progressbarMax){
            progressbar.setProgress(i);
            try {
                Thread.sleep(50);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }
    */
}

下面用ImageView實現圖片預覽功能

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class ImageViewDemo extends Activity implements OnTouchListener {

    ImageView imageView1, imageView2;

    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.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;
    }

}

<?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/img1"
        android:layout_width="fill_parent"
        android:layout_height="300dp"
        android:background="#cccccc"
        android:src="@drawable/pig" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#cccccc"
        android:scaleType="fitStart"
        android:layout_marginTop="20dp"
        />

</LinearLayout>

調節音量等的控制條：

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

public class SeekBarDemo extends Activity implements OnSeekBarChangeListener {

    SeekBar seekbar = null;

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

        findViews();
    }

    private void findViews() {
        seekbar = (SeekBar) this.findViewById(R.id.seekbar);
        seekbar.setOnSeekBarChangeListener(this);
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress,
            boolean fromUser) {
        Log.d("TAG", "changed: "+ String.valueOf(seekBar.getProgress()));

    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        Log.d("TAG", "start: "+ String.valueOf(seekBar.getProgress()));

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        Log.d("TAG", "stop: "+ String.valueOf(seekBar.getProgress()));

    }

}

摘自瀟灑哥的專欄

Related posts:

發佈留言 取消回覆

發佈留言取消回覆