元智實用化課程用DW將網站轉為APP(2015)
這是在元智大學的課程，主要是如何將之前學習用DW CS6所製作的網站，轉為APP的簡易流程，包含建立HTML頁面與導覽列等，
最後利用PHONEGAP網站協助將網站ZIP轉為APP，並產生QR碼，讓製作APP更為簡單，但是原版PHONEAGAP支援外部連結，
不過新的服務似乎取消外部連結，造成GOOGLE地圖等無法正常顯示問題，
也許可以再找其他方式，
目前找到EZOAPP網站(https://ezoui.com/app/zh-tw/)有提供類似功能，
也許在之後課程再來補充說明，
以下是上課的畫面：
01_APP應用與註冊PHONEGAP帳號
02_如何建立第1個APP(多頁面瀏覽)
03_如何加上超連結與按鈕
04_如何更改按鈕技巧與變化顏色
05_將資料加入並上傳到PHONEGAP網站轉APP
06_相關網站介紹與102APP說明
07_如何新增網站與HTML5網頁並產生4個頁面
08_製作頁首圖檔與導覽列
09_如何設定導覽列的背景顏色
10_如何設計ListView清單檢視效果
11_如何增加回上頁按鈕(1增加2顏色3文字)
12_如何增加下一頁按鈕與變換顏色圖示
13_如何刪除舊APP與上傳新的APP
14_上星期102APP重點與106APP說明
15_如何建立106APP與新增五個頁面
16_如何將項目清單改為ListView
17_如何在頁尾增加導覽列與ICON與變更顏色
18_如何將導覽列固定在下方
19_如何將入回首頁與下一頁的頁首按鈕
20_如何將按鈕複製到其他頁面
21_106APP重點回顧
22_如何更改佈景設定與自訂新的佈景色
23_如何利用官網ThemeRoller做佈景並下載
24_增加ThemeRoller佈景並再次下載與嵌入綠島地圖
25_如何上傳APP
上課影片連結：
https://www.youtube.com/playlist?list=PLgzs-Q3byiYPqPq4yAXbcH4tRXHmlIPJl
教學相關連結：
PhoneGap APP教學研習懶人包 http://terry55wu.blogspot.tw/p/phonegapappjquery-mobile.html
EZoApp 中文教學手冊 http://ezoapp.gitbooks.io/ezoapp-tutorials/
EZoApp 教學影片 https://www.youtube.com/user/EZoService/videos
EZoApp gallery http://ezoui.com/gallery/index.html
HTML 教程 http://www.w3schools.com/html/
CSS 教程 http://www.w3schools.com/css/
JavaScript 教程 http://www.w3schools.com/js/
jQuery 教程 http://www.w3schools.com/jquery/default.asp
jQuery Mobile 教程 http://www.w3schools.com/jquerymobile/
上課書目
用Dreamweaver CS6，我也會開發APP
作者： 鄧文淵 總監製/文淵閣工作室 編著
內容特色
用Dreamweaver CS6，你也會開發APP! 能快速完成作品、擁有視覺化的質感介面，更可以驅動手機的硬體設備，舉凡照相錄影、錄音放音、GPS定位、無線網路、語音導覽全都沒問題!
結合HTML5、CSS3、PhoneGap，讓你的網頁瞬間昇華為跨平台的APP應用程式。不用擔心HTML5、CSS3與PhoneGap的內容，交給Dreamweaver CS6一次就搞定!利用jQuery Mobile快速打造專業手機使用者介面，只要善用操作面板的設定。在Dreamweaver CS6一次開發，就能跨iOS、Android等多種不同平台，讓你的APP無遠弗屆！開發 APP 的新領域混合式應用程式是以 Web 應用程式做為基礎，使用網頁技術開發應用程式，因此絕大多數網頁設計者可以踏入行動裝置應用程式開發者之路，大幅降低設計行動裝置應用程式的門檻。
APP開發, Dreamweaver, JavaScript, PhoneGap, 吳老師, 網站設計理論與實務, 網站轉APP,jquery mobile tutorial,dreamweaver jquery mobile教學,phonegap jquery mobile教學,jquery mobile php教學
android listview自訂 在 Re: [分享] 利用自定的ListView動態新增/刪除列- 看板AndroidDev 的推薦與評價
※ 引述《givemepass (〆)》之銘言：
: 最近,我朋友問我怎麼用自訂的ListView動態增減列,
: 剛好可以分享一下,
: 如果對如何自訂ListView不了解,
: 可以參考一下#1DbiQ5jJ,
: 將代碼貼到板上任何一個地方,就可以找到我上一篇文章:)
: 那麼如何利用自訂的ListView來動態增加或刪除呢？
: 我們首先利用Menu讓使用者能夠動態的增加或刪除,
: 因此先在Menu裡面加入兩個選項,分別是add item及remove item,
: @Override
: public boolean onCreateOptionsMenu(Menu menu) {
: // TODO Auto-generated method stub
: menu.add(0, Menu.FIRST, 0, "add item");
: menu.add(0, Menu.FIRST+1, 0, "remove item");
: return super.onCreateOptionsMenu(menu);
: }
: 就會看到這樣的一個畫面,
: https://uploadingit.com/file/jrlg3a2bwwykwkyo/menu1.png
: 接著我們想要按下add item的時候,讓ListView多出一列,
: 在加入public boolean onOptionsItemSelected(MenuItem item) ,
: 當你按下menu選項的處理事件,
: @Override
: public boolean onOptionsItemSelected(MenuItem item) {
: // TODO Auto-generated method stub
: switch(item.getItemId()){
: case Menu.FIRST:
: myAdapter.addItem(myAdapter.getCount()+1);
this.setSelection(myAdapter.getCount()+1);
//上面這行是在增加新列之後，讓ListView順便移到新列
: break;
: case Menu.FIRST+1:
: break;
: }
: return super.onOptionsItemSelected(item);
: }
: 這時候,切換到MyAdapter.java的頁面,新增兩個方法,分別是:
: public void addItem(int position)
: public void removeItem(int position)
: 當按下add item的時候,就會呼叫addItem(),
: 而按下remove item的時候,就會呼叫removeItem(),
: 這時候我們的MyAdapter需要作一下變動,
: 還記得自訂的ListView裡面的getView()嗎？
: 它是用來顯示ListView所有的列,但是我們要將每一列存成一個一個的物件,
: 所以需要改變一下寫法,
: 首先,宣告一個ArrayList來儲存每一個列的View,
: private ArrayList<View> arrayList;
不好意思，我的做法跟你有點不一樣，因為我認為arrayList存的應該是資料
所以在這個例子裡我是private ArrayList<Integer> arrayList;
: 並且在建構子初始化它,
: arrayList = new ArrayList<View>();
arrayList = new ArrayList<Integer>();
: 這時候就可以開始使用它了,
: 再來就是在getCount()的return變成arrayList的大小,
: @Override
: public int getCount() {
: // TODO Auto-generated method stub
: return arrayList.size();
: }
: 接著將getView所有的內容搬到addItem()裡面,
: public void addItem(int position){
: TagView tag;
: View view = adapterLayoutInflater.inflate(R.layout.adapter, null);
: tag = new TagView(
: (Button)view.findViewById(R.id.AdapterButton),
: (ImageView)view.findViewById(R.id.AdapterImage),
: (TextView)view.findViewById(R.id.AdapterText));
: view.setTag(tag);
: arrayList.add(view);
: tag.image.setBackgroundResource(R.drawable.icon);
: tag.button.setText("button"+arrayList.size());
: tag.text.setText("text"+arrayList.size());
: this.notifyDataSetChanged();
: }
我覺得addItem要做的事是，單純增加資料、及對系統說資料更新了
public void addItem(int position){
arrayList.add(position);
this.notifyDataSetChanged();
}
: 比較要注意的是arrayList.add(view);
: 我們每新增一列,就必須把那一列的view加入到arrayList裡面,
: 最後的this.notifyDataSetChanged()是通知baseAdapter我們已經將資料更新了,
: 它就會執行getCount()取得列數並且重跑一次getView(),
: 在getView()這邊我們只需要改變return值即可,
: @Override
: public View getView(int position, View view, ViewGroup parent) {
: // TODO Auto-generated method stub
: return arrayList.get(position);
: }
在getView這裡反而要多做點事，關於顯示的部份
@Override
public View getView(int position, View view, ViewGroup parent) {
// TODO Auto-generated method stub
final TagView tag;
if (view == null) {
view = adapterLayoutInflater.inflate(R.layout.adapter, null);
tag = new TagView(
(Button)view.findViewById(R.id.AdapterButton),
(ImageView)view.findViewById(R.id.AdapterImage),
(TextView)view.findViewById(R.id.AdapterText));
view.setTag(tag);
} else {
tag = (TagView) view.getTag();
}
tag.image.setBackgroundResource(R.drawable.icon);
tag.button.setText("button"+arrayList.get(position));
tag.text.setText("text"+arrayList.get(position));
return view;
}
: 現在你可以跑看看程式,一開始什麼都沒有,當按下Menu->add item,
: 就會跑出一列我們自訂的ListView了,
: 接著我們來寫remove item部份,
: 回到onOptionsItemSelected()這個函式,
: 在case Menu.FIRST+1:後面加入呼叫removeitem,
: case Menu.FIRST+1:
: myAdapter.removeItem(myAdapter.getCount()-1);
: break;
: 再到MyAdapter.java裡面修改removeItem()
: public void removeItem(int position){
: if(!arrayList.isEmpty()){
: arrayList.remove(position);
: this.notifyDataSetChanged();
: }
: }
: 到這裡為止,我們就可以操作新增/刪除的功能了,
: 如果成功就會出現下面的畫面,
: https://uploadingit.com/file/hkqtqu1qure25r4o/menu2.png
: https://uploadingit.com/file/cfbkdtpclgebrf3e/menu3.png
: 如果沒有出現預期的結果,沒關係,
: https://uploadingit.com/file/d5cr1yp8l0i1ykay/MyListView.zip
: 下載這個檔案就可以看到所有的程式碼,
: 其實我覺得這樣的寫法有點粗糙,
: 我比較偏向SimpleAdapter那樣寫,
: 可能需要在研究一下怎麼寫比較好
: 如果有錯誤或有更好的寫法
: 請務必告訴小弟,避免誤導大家,謝謝。
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.list);
myAdapter = new MyAdapter(this);
setListAdapter(myAdapter);
//↓這是測試用的
for (int i=0;i<1000;i++){
myAdapter.addItem(myAdapter.getCount()+1);
}
//↑這是測試用的
}
原本的作法是每新增一列view就把view存起來
當今天新增了1000筆view，佔了記憶體約7MB(9.8MB-2.8MB 沒資料時記憶體約2.8MB)
若將arrayList改成只存資料，並且在getView重覆利用view
假設你的螢幕能顯示n列，那它就會存n+1列
佔記憶體約0.3MB(3.1MB-2.8MB)，這樣做可以省下很多資源
以上是小弟的拙見，敬請指教，謝謝^^
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.160.210.180
※ 編輯: badhabit 來自: 218.160.210.180 (04/21 22:27)
忘記附這篇的完整程式碼了
https://uploadmirrors.com/download/1BQAI8BW/MyListView.zip
※ 編輯: badhabit 來自: 61.231.71.160 (04/22 05:06)
... <看更多>