Android UI 設計之TitleBar

       今天上Android課老師讓做一個app的界面，不過界面實在是簡單，僅僅是拖幾個控件來就完成任務。是以我想自己好好研究一下，界面設計到底是如何做的。下面就先從系統自帶的TitleBar開始。

首先，在建立一個Activity時，我感覺TitleBar很醜，

然後就想設成全屏的比較好看。是以有了：

<!--将AndroidManifest.xml修改一下就行了-->
android:theme="@style/AppTheme"
<!--改為-->
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
           

能夠将TitleBar直接去掉，不過去掉我感覺更加的難看，于是就有了這篇文章的由來。我要自定義TitleBar，我要讓TitleBar随着我的想法來展現而不是直接去掉！！！！

在網上找了一堆的資源，來說明如何自定義Titlebar的，總結了一下有幾種方法(下面隻是一種)：

//layout下加入新的界面配置檔案作為TitleBar的樣式可以添加各種控件，Textview啊，Button啊。
//在style.xml裡對Titlebar的大小及背景顔色進行修改。
           

//在AndroidManifest.xml将主題加入
//最後再在mainActivity中進行響應，就大功告成啦
           

</pre><pre name="code" class="java"><pre name="code" class="html"><span style="font-size:18px;"><!--<span style="font-family: Arial, Helvetica, sans-serif;">step 1 : 建立</span>mytitlebar.xml--></span>
           

</pre><pre name="code" class="html"><?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:layout_gravity="center_vertical"
    android:gravity="center_vertical|top">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mytitlebar"
        android:text="@string/btn_title_back"
        android:textSize="20dp"
        android:textColor="#3366cc"
    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txt_title_string"
        android:text="@string/app_title"
        android:textSize="20dp"
        android:textColor="#3366cc"
        android:gravity="top" />
</LinearLayout>
           

</pre><pre name="code" class="html">
           

<span style="font-size:18px;"><!--Step 2: 修改style.xml--></span>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme">
        <!-- Customize your theme here. -->

    </style>

    <style name="style_color" parent="android:Theme">
        <item name="android:background">#342312</item>


    </style>
    <style name="My_Title_Style" parent="android:Theme">
        <item name="android:windowTitleBackgroundStyle">@style/style_color</item>
        <item name="android:windowTitleSize">50dp</item>
    </style>

</resources>
           

<span style="font-size:18px;"><!--Step 3：修改AndroidManifest.xml--></span>
           

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.like.java_study_helper" >

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_title"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_title"
            <span style="color:#ff0000;">android:theme="@style/My_Title_Style"></span>
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
           

</pre><pre name="code" class="html">
           

<span style="font-size:18px;">//Step 4:修改MainActivity.java中的onCreate函數</span>
           

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        setContentView(R.layout.activity_main);
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,R.layout.mytitlebar);

    }
           

}

按着這四個步驟就能簡單的進行TitleBar的自定義布局啦!!!!

不過我這個時有點醜啦，，

不過也算是能夠勉強達到要求，，

這些内容在網上大緻相同，但是這不是我的目的；

未完待續。。。。。

在後續的開發中，還是遇到了一個很重要的問題！！！！

這種方式自定義的TitleBar隻能在一個Activity中使用，在其他Activity中會出現程式自動stop的情況，具體如何解決，我将整理成一片部落格來深入讨論這個問題。