android開發我的新浪微博客戶端-用戶授權頁面UI篇(3.1)

     上一篇講了講OAuth授權認證的事情,大概的介紹了OAuth的原理，並且完成了一個OAuth.java的類庫，提供了幾個OAuth認證必要的方法，本篇開始具體講本項目的用戶授權功能，用戶授權頁面是當用戶第一次使用本軟件的時候自動從載入頁面跳轉過來的顯示的頁面，涉及OAuth認證相關都是在上一篇的OAuth.java的類基礎上開發。用戶授權頁面分為UI篇和功能篇兩篇，本篇先來講講UI的實現，這次就不貼PS的效果圖了直接貼實現後的功能截圖如下：

 

      看上面的圖，其實這個頁面的UI實現不復雜，首先是背景部分的實現這個參考 android開發我的新浪微博客戶端-載入頁面UI篇(1.1)，重點來講講這個半透明的彈出對話框窗口是如何實現的，首先新建名為AuthorizeActivity.java的Activity，並且在AndroidManifest.xml文件中添加這個Activity，這樣這個Activity才能被使用，接下來為這個Activity新建名為authorize.xml的Layout,這個Layout很簡單只負責logo小圖標顯示，背景部分和透明窗口都是有代碼來實現，所以非常簡單參考 android開發我的新浪微博客戶端-載入頁面UI篇(1.1)。

       完成Layout建立後在AuthorizeActivity的onCreate方法添加如下代碼，設置authorize.xml為AuthorizeActivity的頁面Layout:

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.authorize);
        .......
}

      接下來是本文的重點部分，半透明彈窗用Dialog控件進行實現，首先為這個半透明彈窗新建一個名為dialog.xml的Layout,這個Layout主要是對4個元素進行布局，如圖所示分別為i小圖標、信息提示、中間文字、開始按鈕，首先用LinearLayout對i小圖標和信息提示進行水平布局，中間文字以一個TextView跟在下面，對於開始按鈕是用RelativeLayout進行底部對齊顯示。具體代碼如下：

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:padding="10dip">
  <LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/info_icon">
  </ImageView>
  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="信息提示"
  android:textSize="13px"
  android:textColor="#219ac6"
  android:layout_marginLeft="5dip">
  </TextView>
  </LinearLayout>
  <TextView
  android:id="@+id/text_info"
  android:layout_marginTop="6px"
  android:layout_width="200px"
  android:layout_height="wrap_content"
  android:textColor="#686767"
  android:textSize="14px"
  android:text="第一次使用需要輸入您的新浪微博賬號和密碼進行登錄授權">
  </TextView>
  <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="40px">
      <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_centerHorizontal="true"
      android:layout_alignParentBottom="true">
          <ImageButton
          android:id="@+id/btn_start"
          android:layout_width="80px"
          android:layout_height="31px"
          android:src="@drawable/btn_start_selector">
          </ImageButton>
          <ImageButton
          android:id="@+id/btn_cancel"
          android:layout_width="80px"
          android:layout_height="31px"
          android:layout_marginLeft="8px"
          android:src="@drawable/btn_cancel_selector">
          </ImageButton>
      </LinearLayout>
  </RelativeLayout>
 
</LinearLayout>

 

      完成了半透明彈窗的Layout定義接下來我們要做的就是為它寫一個自定義樣式來實現我們想要的顯示效果，首先我們需准備一個圓角的半透明png圖片名為dia_bg.png並且添加到drawable中，接下來再res/values文件夾新建名為 dialogStyle.xml的resources樣式文件，具體代碼如下：

代碼 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="dialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/dia_bg</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>
</resources>

 

這個樣式文件的說明如下

parent="@android:style/Theme.Dialog" ：在系統Dialog樣式基礎上，相當於繼承系統樣式

<item name="android:windowFrame">@null</item> ：Dialog的windowFrame框為無

<item name="android:windowIsFloating">true</item>：是否浮現在activity之上

<item name="android:windowIsTranslucent">false</item>:是否半透明 <item name="android:windowNoTitle">true</item>:是否顯示title <item name="android:windowBackground">@drawable/dia_bg</item>:設置dialog的背景

<item name="android:backgroundDimEnabled">false</item>: 背景是否模糊顯示

     接下來寫java代碼把這個半透明彈窗顯示出來，在AuthorizeActivity的onCreate方法添加如下代碼：

......
View diaView=View.inflate(this, R.layout.dialog, null);
dialog=new Dialog(AuthorizeActivity.this,R.style.dialog);
dialog.setContentView(diaView);
dialog.show();
......

 

    最後運行查看效果，到這裡我們的任務已經完成了。請關注下一篇功能篇。