2013年3月16日 星期六

Tab View: Different Tab Content in different Activity

since: 2013/03/16
update: 2013/03/16

reference:
Chickenrice's Workshop: [Android] 建立Tab View的三種方式(下)

A. 在專案的 res/layout 目錄下新增 tab1.xmltab2.xml
// tab1.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" >

    <TextView android:id ="@+id/tab1_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I'm Tab 1"
        android:textSize="18sp" /> 

</LinearLayout>


// tab2.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" >
   
    <TextView android:id ="@+id/tab2_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I'm Tab 2"
        android:textSize="18sp" /> 
   
</LinearLayout>


---------------------------------------------------------------------------

B. 在專案的 src 套件目錄下新增 Tab1.javaTab2.java:

// Tab1.java
package home.android.hello;

import android.app.Activity;
import android.os.Bundle;

public class Tab1 extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab1);
    }    

}


// Tab2.java
package home.android.hello;

import android.app.Activity;
import android.os.Bundle;

public class Tab2 extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab2);
    }

}

---------------------------------------------------------------------------

C. 修改專案的 AndroidManifest.xml 檔案
     新增以下的設定:
....

        <activity android:name="home.android.hello.Tab1"
                  android:label="這是Tab1" >
        </activity>
       
        <activity android:name="home.android.hello.Tab2"
                  android:label="這是Tab2" >
        </activity>  
     
       
    </application>

</manifest>


---------------------------------------------------------------------------

D. 修改專案 src 套件目錄下的 MainActivity.java 如下:
package home.android.hello;

import android.os.Bundle;
import android.app.AlertDialog;
//import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;


public class MainActivity extends TabActivity implements OnTabChangeListener {   

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        //取得Tabhost參考
        TabHost tabHost = getTabHost();       
       
        //設定各tab頁面
        tabHost.addTab(tabHost
        .newTabSpec("tab1")
        .setIndicator("TAB1")
        .setContent(new Intent(this, Tab1.class))
        );
                     
        tabHost.addTab(tabHost
        .newTabSpec("tab2")
        .setIndicator("TAB2")
        .setContent(new Intent(this, Tab2.class))
        );
       
        tabHost.setOnTabChangedListener(this);   


    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


    @Override
    public void onTabChanged(String tabId) {
        // TODO Auto-generated method stub
        new AlertDialog.Builder(this).setTitle("Hint").setMessage(tabId)
        .setPositiveButton("OK", null).show();
       
    }

   
}

2013年3月13日 星期三

How to support all the different resolutions of android products

since: 2013/03/13
update: 2013/03/13

reference:
馬克周.技術隨筆: [Android] 滿足各種不同螢幕尺寸


A. 說明:
     1. 先不考慮不同裝置大小的版面配置, 在此先以依裝置大小來縮放版面的方式處理.
         屬於通用的處理方式, 並不能保證任何 android 裝置都能適用.
 
     2. 在版面設計上長度(位置)單位要使用 spdp

----------------------------------------------------------------------------------------

B. 假設 UI 設定檔(activity_main.xml)有ㄧ TextView 元件如下:
    <TextView id="@+id/txtHello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25sp"
        android:layout_marginTop="45sp"
        android:text="Hello World !"
        android:textSize="20sp"
        android:textColor="#000"/>

----------------------------------------------------------------------------------------

C. 在 Eclipse 的 Package Explore 專案中的 res/ 目錄下新增以下資料夾:
     values-hdpi, values-ldpi, values-mdpivalues-xdpi
     (p.s. 預設只有: values 資料夾)
     分別新增 dimens.xml 如下: (在此以 res/values/res/values-hdpi/ 為例)

// ---> res/values/dimens.xml 的內容
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- normal dpi -->
    <dimen name="txtHello_layout_marginLeft">25sp</dimen>
    <dimen name="txtHello_layout_marginTop">45sp</dimen>
    <dimen name="txtHello_textSize">20sp</dimen>
</resources>


// ---> res/values-hdpi/dimens.xml 的內容
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- hdpi  -->
    <dimen name="txtHello_layout_marginLeft">50sp</dimen>
    <dimen name="txtHello_layout_marginTop">108sp</dimen>
    <dimen name="txtHello_textSize">32sp</dimen>   
</resources>

----------------------------------------------------------------------------------------

D. 將原本 UI 設定檔的 TextView 元件修改如下:
    <TextView android:id="@+id/txtHello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/txtHello_layout_marginLeft"
        android:layout_marginTop="@dimen/txtHello_layout_marginTop"
        android:text="Hello World !"
        android:textSize="@dimen/txtHello_textSize"
        android:textColor="#000"/>