[Android] 噗浪姬Project - Day5 TabHost 頁面

又到了這個單元了,程式的雛型漸漸的出來了
目前我實作出來的有
.驗使資料庫的 OAuth 資訊,如果不能正常取得使用者資訊,則重新進行 OAuth 驗證動作
.主頁透過 TabHost 作出可以切換各個功能頁面的分頁(目前建好使用者資料頁)
.使用者資料頁讀入使用者的個人資料並展示
在這一個地方,又有將讀來的 JSON 轉成  JSONObject 格式並抽出裡面需要的資料以供顯示。

大致架構是這樣,以下開始進行一些介紹
因為我程式碼其實都有放在 github 上,我這次就不把全部都跳上,主要是介紹一些核心的程式碼,如果要看詳細的可以上我的 github 上看

一開始我想要作有點像噗浪肉骨獸那樣上面有 Tab 然後滑動也可以換分頁的功能,所以一開始我找的其實是 ViewPager,該功能很簡單,也可以容易作到換分頁的功能,可是發現到他其實是換 Layout 而已,而網路上教導的都是透過 LocalActivityManager 來進行 Activity 的切換
只是在開發時我就發現到,該類別被劃上刪除線,他被 deprecated 了!

雖然用些手段也能繼續使用他,但被停一定是有原因的,我就在想是否有比較正規的手段來產生分頁功能,最後就找到了 FragmentActivity 結合 TabHost 來產生一個可以換分頁的程式。

有興趣的可以看看我的 activity_main.xml ,該 layout 是建構一個 TabHost ,並透過水平捲軸的 View 把 TabWidget 包起來,並放置一個 FrameLayout 來包住我的 Tab 物件

而程式部份就是把指定的名字填到 Tab 上面,並幫 tab 設定合適寬度
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
  tabHost.setup();
  tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator(getString(R.string.TabProfile)).setContent(R.id.tab1));
  tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator(getString(R.string.TabFriendList)).setContent(R.id.tab2));

DisplayMetrics dm = new DisplayMetrics();
  getWindowManager().getDefaultDisplay().getMetrics(dm);
  int screenWidth = dm.widthPixels;
  
  TabWidget tabWidget = tabHost.getTabWidget();
  int count = tabWidget.getChildCount();
  if (count > 3) {
   for (int i = 0; i < count; i++) {
    tabWidget.getChildTabViewAt(i).setMinimumWidth((screenWidth)/3);
   }
  }
  else
  {
   for (int i = 0; i < count; i++) {
    tabWidget.getChildTabViewAt(i).setMinimumWidth((screenWidth)/count);
   }
  }

透過以上程式碼,增加了 tab1 及 tab2 並在其 Tab 上填寫相對應的文字
並自動計算,如果 tab 的數量小於等於 3 的話,把 tab 平均分配大小直到佔滿螢幕
如果大於 3 的話,則以螢幕寬度除以 3 後再開始擺置,也就是螢幕最多就出現三個 Tab

而 IntroduceSelfActivity 的部份呢,主要也是透過 AsyncTask 的方式取得使用者個人帳號資訊,並透過 JSONObject 將回傳的資料轉成  JSONObject 物件,並取出需要的相對應的物件。
     @Override
     public void onComplete(String response) {
      // TODO Auto-generated method stub
      if (response == null || response.length() <= 0){
      }
      else
      {
       try {
        JSONObject jobj = new JSONObject(response);
        JSONObject user_info = new JSONObject(jobj.getString("user_info"));
        
        TextView txtAccount =  (TextView)IntroduceSelfActivity.this.getView().findViewById(R.id.txtView_showAccount);
        txtAccount.setText(user_info.getString("nick_name"));
        
        TextView txtfull_name =  (TextView)IntroduceSelfActivity.this.getView().findViewById(R.id.txtView_showfull_name);
        txtfull_name.setText(user_info.getString("full_name"));
        
        TextView txtNickname =  (TextView)IntroduceSelfActivity.this.getView().findViewById(R.id.txtView_showNickname);
        txtNickname.setText(user_info.getString("display_name"));
        
        TextView txtKarma =  (TextView)IntroduceSelfActivity.this.getView().findViewById(R.id.txtView_showKarma);
        txtKarma.setText((Double.valueOf(user_info.getDouble("karma"))).toString());
        
        TextView txtFriendCount =  (TextView)IntroduceSelfActivity.this.getView().findViewById(R.id.txtView_showFriendCount);
        txtFriendCount.setText((Integer.valueOf(user_info.getInt("friends_count"))).toString());
        
        TextView txtFanCount =  (TextView)IntroduceSelfActivity.this.getView().findViewById(R.id.txtView_showFanCount);
        txtFanCount.setText((Integer.valueOf(user_info.getInt("fans_count"))).toString());
       } catch (JSONException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
       }
      }
     }
可以看到其實這頁作的動作就是很簡單的轉型並將資料填寫到指定的 textView 上面去
至此,我們簡易的個人頁面就作好了,接下來打算製作相對應的好友清單頁面。

後記:
之前把整個檔案全附上來實在太佔版面空間了,我想就針對一些比較核心的程式碼放上來就行
程式的開發其實真的不難,而且全弄出來會有股成就感!
只是這隻程式還不夠好,因為我想要的還是滑動手指就能直接換 tab ,而不是還要移動手指頭上去上面點,雖然這方面有找到一些資料,但還是沒能在今天把這部份解決掉
如果知道可能可以依什麼方式來作切換的,也可以跟我討論,說不定程式就這樣作出來了XD

參考:
【Android】解析JSON格式文字進行資料讀取
如何使用Fragment建立TabActivity之一

留言

這個網誌中的熱門文章

DB 資料庫呈現復原中

Outlook 刪除大量重覆信件

[VB.Net] If vs IIf ,兩者的差異