AdapterViewFlipper

January 9, 2013   ·   0 Comments

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;

3. import android.app.Activity;

4. import android.graphics.Color;

5. import android.os.Bundle;

6. import android.view.Menu;

7. import android.view.View;

8. import android.widget.AdapterViewFlipper;

9. import android.widget.Button;

11. publicclass MainActivity extends Activity {

14. @Override

15. publicboolean onCreateOptionsMenu(Menu menu) {

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

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

18. returntrue;

19. }

21. int[] pics = {

22. R.drawable.apple ,

23. R.drawable.banana,

24. R.drawable.cherry,

25. R.drawable.ic_launcher,

26. R.drawable.orange,

27. };

28. private Button next, back;@Override

29. publicvoid onCreate(Bundle savedInstanceState) {

30. super.onCreate(savedInstanceState);

31. setContentView(R.layout.activity_main);

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

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

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

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

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

37. calView.setAdapter(tMyBaseAdapter);

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

39. @Override

40. publicvoid onClick(View v) {

41. // TODO Auto-generated method stub

42. calView.showNext();

43. }

44. });

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

46. @Override

47. publicvoid onClick(View v) {

48. // TODO Auto-generated method stub

49. calView.showPrevious();

50. }

51. });

52. }

54. }

55.  

 

 

 

 

首先程式一開始的時候，

在 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;

3. import java.util.ArrayList;

4. import java.util.List;

6. import android.content.Context;

7. import android.view.View;

8. import android.view.ViewGroup;

9. import android.widget.BaseAdapter;

10. import android.widget.ImageView;

12. publicclass MyBaseAdapter extends BaseAdapter {

13. Context Con;

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

15. int [] Resources;

16. List<ImageView> views;

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

19. {

20. Con=con;

21. Resources=resources;

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

23. }

25. @Override

26. publicint getCount() {

27. // TODO Auto-generated method stub

28. returnResources.length;

29. }

30. @Override

31. public Object getItem(int position) {

32. // TODO Auto-generated method stub

33. returnviews.get(position);

34. //return position;

35. }

36. @Override

37. publiclong getItemId(int position) {

38. // TODO Auto-generated method stub

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

40. return position;

41. }

42. @Override

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

44. // TODO Auto-generated method stub

45. ImageView img=new ImageView(Con);

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

47. views.add(img);

49. return img;

50. }

51. }

 

 

 

這一段程式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();

}

 

 

 

By admin-powenko