2015年3月28日 星期六

Android中的各種Adapter View (ListView、Spinner、與Gallery)

Android中有一種類型的View,其都繼承了AdapterView類,都使用Adapter來當做顯示與資料之間的橋梁。ListView、Spinner、和Gallery是非常常見的三種AdapterView元件,在這裡我將實做簡單的ListView、Spinner、和Gallery範例,並從程式碼讓大家觀察到它們的實做程式碼有多麼的相似,在學習時應當一同學習而不是把每個元件都當成一個全新的元件來學習,方可增加學習的效率與理解。

  1. 首先,我們先為三種不同的AdapterView建立共同使用來顯示資料的Layout:
  2. my_base_adapter_layout.xml:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
        android:orientation="horizontal" android:layout_width="match_parent"
    
        android:layout_height="match_parent"
    
        android:gravity="center_vertical">
    
    
        <ImageView
    
            android:layout_width="50dp"
    
            android:layout_height="50dp"
    
            android:id="@+id/imageView" />
    
    
        <TextView
    
            android:layout_width="wrap_content"
    
            android:layout_height="wrap_content"
    
            android:textAppearance="?android:attr/textAppearanceLarge"
    
            android:text="Large Text"
    
            android:id="@+id/textView" />
    
    
    </LinearLayout>
    
    
  3. 在這裡,我在res資料夾中設置了arrays.xml,紀錄了圖片資源的名稱:
  4. <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <string-array name="pictrueNames">
            <item>菊花</item>
            <item>沙漠</item>
            <item>繡球花</item>
            <item>水母</item>
        </string-array>
    
    </resources>
    
    
    
    
  5. 再來,為展示三種不同AdapterView的Activity建立它們各自的Layout,其中都各自在右下角有一個按鈕,用來切換到不同的Activity:

2015年3月26日 星期四

Android的畫廊 - Gallery與ImageSwitcher

Android有提供Gallery及ImageSwitcher的控件,結合這個兩個控件可以很容易地做出一個簡單的小畫廊。

Gallery:

  1. 可以配合Adapter,將圖片的資放進Adapter中,在用Gallery的setAdapter()方法就可以讓Gallery能夠顯示相應的圖片,其中還可以配合OnItemSelectedListener來取得是哪一張圖片被Select。
  2. 在這裡所謂被Select是指哪一張圖案在Gallery的正中央。
  3. 記得Gallery要設置Spacing的屬性,圖片才不會擠在一起。

ImageSwitcher:

  1. ImageSwitcher可以容易的切換兩張ImageView,並且可以為切換圖片的動作設定動畫(Animation)。
  2. 當呼叫ImageSwitcher的setImageResource()方法時,ImageSwitcher其實是設定好下一個ImageView再切換到下一個ImageView。
  3. 在使用ImageSwitcher時要用setFactory()方法設定ViewFactory,而ViewFactory要Override一個makeView()方法並回傳一個ImageView,也就是ImageSwitcher要用來顯示圖的ImageView。
  4. 對於ImageSwitcher的細節原理,在這篇Android_TextSwitcher和ImageSwitcher有非常詳盡的解說。
下面我就用程式碼來製作一個小型簡單的畫廊來做示範:

2015年3月24日 星期二

Android的小工具(App Widget)

App Widget就是我們很常見到的Android桌面小工具,要製App Widget需要有一些步驟,這裡也一個有三個按鈕的小工具來做示範:

  1. 製作要給小工具用的Layout,程式碼如下所示

  2. appwidgetlayout.xml :
    <?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" >
    
        <Button
            android:id="@+id/buttonToToast"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按下後跳出訊息(Toast)" />
    
        <Button
            android:id="@+id/buttonToNotify"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按下後發送通知(Notification)" />
    
        <Button
            android:id="@+id/buttonToOpenActivity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按下後前往另一個Activity" />
    
    </LinearLayout>
    

2015年3月19日 星期四

用Matlab與Arduino的序列阜溝通

Arduino可以以序列阜(Serial Port)的方式與電腦溝通,只要雙方設置好對應的Baud Rate即可,電腦有許多種選擇,不管是什麼程式語言,只要找到能夠跟序列阜溝通的方法,就能夠以序列阜的方式跟Arduino溝通。

之前的一篇有介紹到以Java來跟Arduino溝通,這篇是要介紹使用Matlab的方式。

在網上搜查之後,找到了兩種主要的常見方法,可以參考這篇文,寫得非常詳細:
【經驗分享】Matlab和Arduino
,其中也寫到了如何用Simulink來跟Arduino溝通。

兩種主要的方法為:
1.使用Matlab Arduino Support package。
2.使用Matlab本身的指令去跟Serial Port連接。

第一種方法在【經驗分享】Matlab和Arduino有詳細的解說,要把其所附的程式燒錄到Arduino枚子上,然後用Matlab只接控制Arduino,使用方便,但其缺點為Arduino上不行燒錄自己所寫的Arduino程式,可以把它想成把原來在Arduino上寫的程式全部搬到了Matlab上面去執行。

在這裡我主要介紹第二種方法,此方法不用任何套件,單純就Matlab本身去跟Seriao Port去溝通。

2015年3月15日 星期日

使用線上免費網頁樣式CSS風格(以JSP為例)

在撰寫網頁時,我們通常會為html另外寫CSS來設定其樣式,讓網頁各頁面的版面可以有一個統一的樣式風格,也比較好管理。

除了自己撰寫CSS外,還可以從網路上找到許多免費的樣式資源,可以免費的下載下來使用,有的是就是一個單統的CSS檔,而有的稍微用了其他的方法來匯入CSS檔(例如JQuery),而CSS的路徑的也要設正確。總之根據不同的免費CSS資源,需要稍微的修改一下才能使用。

Templated是一個提供各種網頁樣式的網站,有許多的免費樣式可以下載使用。因為在之前的使用上花了一點時間搞定,特在此紀錄一下以Templated網站中的一個樣式Transit為例的使用方法。

進入Transit頁面後(如下圖),可以在上面橫幅的右邊下載其樣式,在Elements的連結中可以點進去看到此樣式的各個html元件的樣子,可以看看自己喜不喜歡在下載使用。


下載下來解壓縮後,可以看到如下的檔案結構,其中根目錄的三個html是網頁範例,css、fonts、images、js各是CSS、字型、圖片和JQuery資料夾。

2015年3月5日 星期四

用Java與Arduino的序列阜溝通(使用RXTX)

最近在玩Arduino,研究如何使用Java利用序列阜跟Arduino溝通,找到了幾篇蠻不錯實用的資料:

基本上有兩種常用的方法:
  1. 使用Java Communications,它原本是Sun公司維護的,不過似乎現在已經沒有人再做了,在Oracle網站上只能找到API的說明書但卻沒有下載點。
  2. 使用RXTX,語法跟Java Communications很像但寫法有一點不一樣,使用RXTX可以讓Java使用Serial port(序列阜),達到經由Serial port來傳送資料給Arduino或從Arduino接收資料。
  3. 2016/11/27 更新,第三種方法,使用Ardulink,請參考Ardulink - Arduino的Java控制方案
在這裡,我使用第二種方法,也就是RXTX,RXTX可以在這裡下載,也可從它的RXTX Wiki上進去找,其中也有很多有用的資料,下載完以後,裡面會有兩個dll檔及jar檔,jar的使用方式就跟其它jar使用方式一樣,在編譯器中Add JAR就好,而兩個dll檔,需將它們放到兩處地方:

  1. 為了開發,要放在Java JDK安裝目錄下的bin資料夾下面,參考自
  2. 放在C:\Windows\System32下(當然,是指在Windows平台下)。

上面的提到的資料中,第二個資料是RXTX官方的例子,使用了兩個thread分別執行Serial port的輸入及輸出,使用者可以即時看到接收到的資料和即是的打上資料送出去,需要注意的是,其中這行
serialPort.setSerialPortParams(57600,SerialPort.DATABITS_8,SerialPort.STOPBITS_1,SerialPort.PARITY_NONE);
中的57600是Serial port的通訊速率( baud rate),需要自行修改成與Arduino板子中程式所定的通訊速率一樣,例如Arduino程式的
Serial.begin(9600)
中的9600,不然在接收和傳送訊息時會有問題。
因為覺得官方的例子優雅又實用,為了怕以後忘記,特轉載在最底下(57600已改成9600),可配合我寫的Arduino程式(SerialLightLevelControl)用Serial port的方式用電腦打數字進Console中控制LED燈的亮暗程度。

2015年3月1日 星期日

LaTeXx多個子圖排列,使用subfigure和minipage

在LaTeX中可以使用subfigure和minipage達成多個子圖的排列,跟只使用subfigure不同,如果只使用subfigure的話,只能做到垂直的直向排列。配合minipage的話就可以實現2x2或上2下1等的圖形排列,以下的例子為三張子圖,排列成上2張下1張的情形(在使用subfigure指令時不要忘了使用subfigure的package,例如加上:\usepackage{subfigure})
\begin{figure}[htb]
     \centering
     \subfigure[]{
          \begin{minipage}[b]{0.2\textwidth}
               \includegraphics[width=1\textwidth]{FirstFigure.eps}
          \end{minipage}
          \label{FirstFigure}
     }
     \subfigure[]{
          \begin{minipage}[b]{0.2\textwidth}
          \includegraphics[width=1\textwidth]{SecondFigure.eps}
          \end{minipage}
          \label{SecondFigure}
     }
     \subfigure[]{
          \begin{minipage}[b]{0.2\textwidth}
               \includegraphics[width=1\textwidth]{ThirdFigure.eps}
          \end{minipage}
          \label{ThirdFigure}
     }
     \caption{Optical spectrum of (a)BS1, (b)BS2 and (c) Amplified Signal wave.}
\end{figure}