AdapterViewFlipper

January 9, 2013   ·   0 Comments

Screen Shot 2013-01-09 at 12.33.14 PM

AdapterViewFlipper的範例程式

 

 

 

相信各位在Android 3.0 之後的大尺寸的平板店老上面的應用程式因該常常看過這樣的ActionBar 加上Tab 的樣式的應用程式,在這個範例中,我們來介紹如何設計風格的應用程式。

 

範例程式

 

Android的 的範例程式其路徑爲: TutorialActionBarTab

其中各個文件目錄爲:

AndroidManifest.xml:各個應用描述文件

asset/:資産文件

res/:資源檔案目錄

res/layout/畫面設定資源代碼

MainActivity.java 主程式

 

概念性描述

我們會透過這一個程式範例,介紹如何設一個擁有ActionBar 和 Tab 標籤的樣式,看起來就很高級的應用程式的範例。

SDK版本: API 11 ,Android

3.0

 

畫面設定資源

 

在這裡我們準備五張圖片

 

 

 

 

放在 res\drawable-mdpi 之中

.

 

 

 

 

 

 

 

主畫面是透過

activity_main.xml ,來顯示畫面,完整的程式如下,

 

  1. <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android

  2. xmlns:tools=“http://schemas.android.com/tools”

  3. android:layout_width=“match_parent”

  4. android:layout_height=“match_parent” >

  5. <AdapterViewFlipper

  6. android:id=“@+id/adapterViewFlipper1″

  7. android:layout_width=“wrap_content”

  8. android:layout_height=“wrap_content”

  9. android:layout_below=“@+id/back”

  10. android:layout_centerHorizontal=“true” >

  11. </AdapterViewFlipper>

  12. <Button

  13. android:id=“@+id/back”

  14. android:layout_width=“wrap_content”

  15. android:layout_height=“wrap_content”

  16. android:layout_alignParentTop=“true”

  17. android:text=“Back” />

  18. <Button

  19. android:id=“@+id/next”

  20. android:layout_width=“wrap_content”

  21. android:layout_height=“wrap_content”

  22. android:layout_alignParentRight=“true”

  23. android:layout_alignParentTop=“true”

  24. android:text=“Next” />

  25. </RelativeLayout>

 

 

在這個範例中,我們會用 AdapterViewFlipper 來顯示畫面,主要目的是一種layout 用來顯示畫面上的一塊區域,你可以用它來設計一個字視窗,或是一個特定的區域。

在加上2個按鈕

這個layout 畫面如下。

 

 

 

 

 

 

 

 

程式範例

 

Android 原始檔案

MainActivity.java的代碼片段如下所示:

 

  1. package com.powenko.tutorial_ui_adapterviewflipper;

  2. import android.app.Activity;

  3. import android.graphics.Color;

  4. import android.os.Bundle;

  5. import android.view.Menu;

  6. import android.view.View;

  7. import android.widget.AdapterViewFlipper;

  8. import android.widget.Button;

  9. publicclass MainActivity extends Activity {

  10. @Override

  11. publicboolean onCreateOptionsMenu(Menu menu) {

  12. // Inflate the menu; this adds items to the action bar if it is present.

  13. getMenuInflater().inflate(R.menu.activity_main, menu);

  14. returntrue;

  15. }

  16. int[] pics = {

  17. R.drawable.apple ,

  18. R.drawable.banana,

  19. R.drawable.cherry,

  20. R.drawable.ic_launcher,

  21. R.drawable.orange,

  22. };

  23. private Button next, back;@Override

  24. publicvoid onCreate(Bundle savedInstanceState) {

  25. super.onCreate(savedInstanceState);

  26. setContentView(R.layout.activity_main);

  27. next = (Button) findViewById(R.id.next);

  28. back = (Button) findViewById(R.id.back);

  29. final AdapterViewFlipper calView = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper1);

  30. // calView.setAdapter(pics[i]);

  31. final MyBaseAdapter tMyBaseAdapter = new MyBaseAdapter(this, pics);

  32. calView.setAdapter(tMyBaseAdapter);

  33. next.setOnClickListener(new View.OnClickListener() {

  34. @Override

  35. publicvoid onClick(View v) {

  36. // TODO Auto-generated method stub

  37. calView.showNext();

  38. }

  39. });

  40. back.setOnClickListener(new View.OnClickListener() {

  41. @Override

  42. publicvoid onClick(View v) {

  43. // TODO Auto-generated method stub

  44. calView.showPrevious();

  45. }

  46. });

  47. }

  48. }

  49.  

 

 

 

 

首先程式一開始的時候,

在 onCreate(Bundle savedInstanceState)

直接呼叫

super.onCreate(savedInstanceState);

來處理啟動的動作,

並且顯示畫面

setContentView(R.layout.activity_main);

 

 

接下來處理按鍵的動作,就是取的按鍵元件的變數,按下去之後,就會呼叫裡面的動作

calView.showNext();和 calView.showPrevious();

 

next = (Button) findViewById(R.id.next);

back = (Button) findViewById(R.id.back);

 

next.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

calView.showNext();

}

});

back.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

 

calView.showPrevious();

}

});

 

 

 

在這裡,我們的重點來了,首先先取得AdapterViewFlipper的元件變數

 

final AdapterViewFlipper calView = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper1);

再來呼叫我們自己寫的tMyBaseAdapter 那是 繼承 BaseAdapter的一個class ,跟ListView 原理是一樣的。

 

// calView.setAdapter(pics[i]);

final MyBaseAdapter tMyBaseAdapter = new MyBaseAdapter(this, pics);

在這裡,我們把

 

int[] pics = {

R.drawable.apple ,

R.drawable.banana,

R.drawable.cherry,

R.drawable.ic_launcher,

R.drawable.orange,

};

 

這五張圖片,放進去。

再來設定AdapterViewFlipper的元件的顯是內容是指向剛剛的tMyBaseAdapter。

calView.setAdapter(tMyBaseAdapter);

}

 

 

所以看到這裡,你可以看到

 

AdapterViewFlipper元件,的處理方法,非常像是ListView 的作法。

 

 

 

 

MyBaseAdaoter.java的代碼片段如下所示:

 

  1. package com.powenko.tutorial_ui_adapterviewflipper;

  2. import java.util.ArrayList;

  3. import java.util.List;

  4. import android.content.Context;

  5. import android.view.View;

  6. import android.view.ViewGroup;

  7. import android.widget.BaseAdapter;

  8. import android.widget.ImageView;

  9. publicclass MyBaseAdapter extends BaseAdapter {

  10. Context Con;

  11. //array to hold the values of image resources

  12. int [] Resources;

  13. List<ImageView> views;

  14. public MyBaseAdapter(Context con,int[] resources)

  15. {

  16. Con=con;

  17. Resources=resources;

  18. views=new ArrayList<ImageView>(resources.length);

  19. }

  20. @Override

  21. publicint getCount() {

  22. // TODO Auto-generated method stub

  23. returnResources.length;

  24. }

  25. @Override

  26. public Object getItem(int position) {

  27. // TODO Auto-generated method stub

  28. returnviews.get(position);

  29. //return position;

  30. }

  31. @Override

  32. publiclong getItemId(int position) {

  33. // TODO Auto-generated method stub

  34. //return views.get(position).getId();

  35. return position;

  36. }

  37. @Override

  38. public View getView(int position, View convertView, ViewGroup parent) {

  39. // TODO Auto-generated method stub

  40. ImageView img=new ImageView(Con);

  41. img.setImageResource(Resources[position]);

  42. views.add(img);

  43. return img;

  44. }

  45. }

 

 

 

這一段程式MyBaseAdapter 的作法,

因為是繼承BaseAdapter 的關係,

所以幾乎跟之前列表的方式是一樣的。

 

 

首先初始化的時候,我們現取得要顯示的內容,並放在

List<ImageView> views;之中。

 

Context Con;

 

int [] Resources;

List<ImageView> views;

 

public MyBaseAdapter(Context con,int[] resources)

{

Con=con;

Resources=resources;

views=new ArrayList<ImageView>(resources.length);

}

 

 

接下來處理筆數。

 

 

public int getCount() {

return Resources.length;

}

 

和每一個要顯示的內容

@Override

public Object getItem(int position) {

// TODO Auto-generated method stub

return views.get(position);

//return position;

}

@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

//return views.get(position).getId();

return position;

}

 

接下來,那畫面的成縣市如何處理?這一段寫在getView之中。

 

@Override

public View getView(int position, View convertView, ViewGroup parent) {

……

}

 

 

首先

先取得畫面到ImageView 之中,

ImageView img=new ImageView(Con);

img.setImageResource(Resources[position]);

在把要顯示的內容,加到畫面上去

views.add(img);

 

這樣就可以了。

 

 

 

好,我們來看看完成後的效果。如果你執行程式的話,會看到一個小小的動畫效果。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

p在程式一開始的時候,透過

public void onCreate(Bundle savedInstanceState) {..}

開始執行程式,

並且透過繼承的關係,

先請父類的onCreate先執行。

super.onCreate(savedInstanceState);

設定畫面

setContentView(R.layout.main);

取得 TextView的元件的指標。

final TextView txt1 = (TextView) findViewById(R.id.textView1 );

 

接下來,我們的重點了,

 

new Thread(new Runnable() {

public void run(){

txt1.setText(“Thread!!”);

}

}).start();

 

 

我們透過Thread 多執行緒的方法,可以讓程式可以同時間執行多樣的動作,在這裡有個特別的地方,

以Thread 多執行緒的,因為無法直處理有關畫面的關係,因為我們的thread 的關係,他是新增一個新的執行緒,而畫面的處理是放在主要程式的執行緒。

 

 

 

 

完成

 

這是程式的執行畫面,

執行時畫面看起來如下:

 

 

 

 

 

 

 

 

 

現在跟你說一下,這個Thread 多執行緒是對android 的開發者來說是非常重要的功能,因為在android 的應用程式,常常會出現一個討厭的訊息,那就是ANR

 

ANR (Application Not Responding)

 

首先我們了解一下,為何會出現個訊息,

當你用戶點選你應用程式上面的元件,如果在15秒內畫面沒有任何反應的話,那就會跳出這個訊息,

那這問題要如何解決? 最快的方法就用,這一個應用程式的範例,Thread 多執行緒的方法讓應用程式先做反應,然後再更新資料,那就可以節決這一個問題。

 

 

 

 

 

補充資料

 

 

 

 

 

那我們在舉個例子,下面是一小斷程式,可以讓你在背景中下載圖片,在背景下載完畢後,就可以顯示在畫面上,

這個動作都是在背景執行,完全不會影響你的程式。

 

 

public void onClick(View v) {

new Thread(new Runnable() {

public void run() {

final Bitmap bitmap = loadImageFromNetwork(“http://example.com/image.png”);

mImageView.post(new Runnable() {

public void run() {

mImageView.setImageBitmap(bitmap);

}

});

}

}).start();

}

 

 

 

shareShare on FacebookShare on Google+Share on LinkedInEmail this to someonePrint this pageBuffer this pageDigg thisFlattr the authorShare on RedditPin on PinterestShare on StumbleUponShare on TumblrTweet about this on Twitter

By


Readers Comments (0)


You must be logged in to post a comment.

PowenKo’s Online Store

powenko_arduinoBook
Android7

Amazon

adsbygoogle

Recent Posts

Categories

Amazon