HappyIdiom之二主界面的設計

目標：實現HappyIdiom的主界面的設計

整體佈局actvity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:padding="5dp" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" >

            <TextView
                android:id="@+id/content1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/padding_medium"
                android:text="@string/title_study" />

            <TextView
                android:id="@+id/content2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/padding_medium"
                android:text="@string/title_search" />

            <TextView
                android:id="@+id/content3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/padding_medium"
                android:text="@string/title_game" />

            <TextView
                android:id="@+id/content4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/padding_medium"
                android:text="@string/title_save" />

            <TextView
                android:id="@+id/content5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/padding_medium"
                android:text="@string/title_help" />
        </FrameLayout>
    </LinearLayout>

</TabHost>

MainActivity核心代碼

/**
 * 主界面設計
 * @author cabbage
 *
 */
public class MainActivity extends TabActivity {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//獲取選項卡組
		TabHost tabHost = getTabHost();
		//創建每個選項卡
		TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1").setIndicator(
				getString(R.string.title_study),
				getResources().getDrawable(R.drawable.study_study)).setContent(R.id.content1);
		TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2").setIndicator(
				getString(R.string.title_search),
				getResources().getDrawable(R.drawable.study_search)).setContent(R.id.content2);
		TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3").setIndicator(
				getString(R.string.title_game),
				getResources().getDrawable(R.drawable.study_game)).setContent(R.id.content3);
		TabHost.TabSpec tab4 = tabHost.newTabSpec("tab4").setIndicator(
				getString(R.string.title_save),
				getResources().getDrawable(R.drawable.study_save)).setContent(R.id.content4);
		TabHost.TabSpec tab5 = tabHost.newTabSpec("tab5").setIndicator(
				getString(R.string.title_help),
				getResources().getDrawable(R.drawable.study_help)).setContent(R.id.content5);
        tabHost.addTab(tab1);
        tabHost.addTab(tab2);
        tabHost.addTab(tab3);
        tabHost.addTab(tab4);
        tabHost.addTab(tab5);     
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}
}

如何實現可滾動的標題欄呢？

• 自定義標題欄佈局 title_marquee.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">

	<TextView
		android:id="@+id/tv_showSave" android:layout_gravity="left|bottom"
		android:layout_width="fill_parent" android:layout_height="wrap_content"
		android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever"
		android:focusableInTouchMode="true" android:singleLine="true"
		android:focusable="true" android:textColor="#F5FFFA"
		android:scrollHorizontally="true"
		android:background="#7e7e7e" />

</LinearLayout>

• 修改MainActivity
  

public class MainActivity extends TabActivity {
    private TextView showSave;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//注意此句要放在setContentView之前
		getWindow().requestFeature(Window.FEATURE_CUSTOM_TITLE);
		setContentView(R.layout.activity_main);
		//獲取選項卡組
		TabHost tabHost = getTabHost();
		//創建每個選項卡
		TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1").setIndicator(
				getString(R.string.title_study),
				getResources().getDrawable(R.drawable.study_study)).setContent(R.id.content1);
		TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2").setIndicator(
				getString(R.string.title_search),
				getResources().getDrawable(R.drawable.study_search)).setContent(R.id.content2);
		TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3").setIndicator(
				getString(R.string.title_game),
				getResources().getDrawable(R.drawable.study_game)).setContent(R.id.content3);
		TabHost.TabSpec tab4 = tabHost.newTabSpec("tab4").setIndicator(
				getString(R.string.title_save),
				getResources().getDrawable(R.drawable.study_save)).setContent(R.id.content4);
		TabHost.TabSpec tab5 = tabHost.newTabSpec("tab5").setIndicator(
				getString(R.string.title_help),
				getResources().getDrawable(R.drawable.study_help)).setContent(R.id.content5);
        tabHost.addTab(tab1);
        tabHost.addTab(tab2);
        tabHost.addTab(tab3);
        tabHost.addTab(tab4);
        tabHost.addTab(tab5);     
        //引入自定義標題的佈局文件
         getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title_marquee);
        showSave=(TextView) this.findViewById(R.id.tv_showSave);
        showSave.append("一心一意"+" ");
        showSave.append("三心二意"+" ");
        showSave.append("有情有意"+" ");
        showSave.append("一葉知秋"+" ");
        showSave.append("風和日麗"+" ");
        showSave.append("四平八穩"+" ");
        showSave.append("一葉障目"+" ");
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}
}