January 9, 2013 · 0 Comments
AdapterViewFlipper的範例程式
相信各位在Android 3.0 之後的大尺寸的平板店老上面的應用程式因該常常看過這樣的ActionBar 加上Tab 的樣式的應用程式,在這個範例中,我們來介紹如何設計風格的應用程式。
Android的 的範例程式其路徑爲: TutorialActionBarTab
其中各個文件目錄爲:
AndroidManifest.xml:各個應用描述文件
asset/:資産文件
res/:資源檔案目錄
res/layout/畫面設定資源代碼
MainActivity.java 主程式
我們會透過這一個程式範例,介紹如何設一個擁有ActionBar 和 Tab 標籤的樣式,看起來就很高級的應用程式的範例。
在這裡我們準備五張圖片
放在 res\drawable-mdpi 之中
.
主畫面是透過
activity_main.xml ,來顯示畫面,完整的程式如下,
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android“
xmlns:tools=“http://schemas.android.com/tools”
android:layout_width=“match_parent”
android:layout_height=“match_parent” >
<AdapterViewFlipper
android:id=“@+id/adapterViewFlipper1″
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_below=“@+id/back”
android:layout_centerHorizontal=“true” >
</AdapterViewFlipper>
<Button
android:id=“@+id/back”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_alignParentTop=“true”
android:text=“Back” />
<Button
android:id=“@+id/next”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_alignParentRight=“true”
android:layout_alignParentTop=“true”
android:text=“Next” />
</RelativeLayout>
在這個範例中,我們會用 AdapterViewFlipper 來顯示畫面,主要目的是一種layout 用來顯示畫面上的一塊區域,你可以用它來設計一個字視窗,或是一個特定的區域。
在加上2個按鈕
這個layout 畫面如下。
Android 原始檔案
MainActivity.java的代碼片段如下所示:
package com.powenko.tutorial_ui_adapterviewflipper;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterViewFlipper;
import android.widget.Button;
publicclass MainActivity extends Activity {
@Override
publicboolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
returntrue;
}
int[] pics = {
R.drawable.apple ,
R.drawable.banana,
R.drawable.cherry,
R.drawable.ic_launcher,
R.drawable.orange,
};
private Button next, back;@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
next = (Button) findViewById(R.id.next);
back = (Button) findViewById(R.id.back);
final AdapterViewFlipper calView = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper1);
// calView.setAdapter(pics[i]);
final MyBaseAdapter tMyBaseAdapter = new MyBaseAdapter(this, pics);
calView.setAdapter(tMyBaseAdapter);
next.setOnClickListener(new View.OnClickListener() {
@Override
publicvoid onClick(View v) {
// TODO Auto-generated method stub
calView.showNext();
}
});
back.setOnClickListener(new View.OnClickListener() {
@Override
publicvoid onClick(View v) {
// TODO Auto-generated method stub
calView.showPrevious();
}
});
}
}
首先程式一開始的時候,
在 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的代碼片段如下所示:
package com.powenko.tutorial_ui_adapterviewflipper;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
publicclass MyBaseAdapter extends BaseAdapter {
Context Con;
//array to hold the values of image resources
int [] Resources;
List<ImageView> views;
public MyBaseAdapter(Context con,int[] resources)
{
Con=con;
Resources=resources;
views=new ArrayList<ImageView>(resources.length);
}
@Override
publicint getCount() {
// TODO Auto-generated method stub
returnResources.length;
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
returnviews.get(position);
//return position;
}
@Override
publiclong getItemId(int position) {
// TODO Auto-generated method stub
//return views.get(position).getId();
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ImageView img=new ImageView(Con);
img.setImageResource(Resources[position]);
views.add(img);
return img;
}
}
這一段程式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();
}