是男人就下100層【第一層】——高仿微信介面（7）

在上一篇《是男人就下100層【第一層】——高仿介面（6）》中我們已經對主介面的的各個菜單進行了簡單實現，接下來我們完成兩個比較有趣的功能，一個是上部的下彈式菜單，另一個是搖一搖功能。

效果如：

我們先做 一個位於右上方的對話方塊樣子，布局代碼很簡單，外面是一個相對布局，內部是一個線性布局，布局如下：

<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="fill_parent"          >      <RelativeLayout       android:layout_width="fill_parent"       android:layout_height="fill_parent"         android:layout_marginTop="46dp"                    >            <LinearLayout        android:id="@+id/main_dialog_layout"      android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:orientation="vertical"        android:background="@drawable/title_function_bg" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >    <ImageView        android:id="@+id/imageView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:layout_marginLeft="8dp"        android:src="@drawable/mm_title_btn_compose_normal" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="8dp"        android:text="發起聊天"        android:textColor="#fff"        android:textSize="18sp" />            </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >    <ImageView        android:id="@+id/imageView2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:layout_marginLeft="8dp"        android:src="@drawable/mm_title_btn_receiver_normal" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="8dp"        android:text="耳機模式"        android:textColor="#fff"        android:textSize="18sp" />            </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >    <ImageView        android:id="@+id/imageView3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:layout_marginLeft="8dp"        android:src="@drawable/mm_title_btn_keyboard_normal" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="8dp"        android:text="登入網頁版"        android:textColor="#fff"        android:textSize="18sp" />            </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >    <ImageView        android:id="@+id/imageView4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:layout_marginLeft="8dp"        android:src="@drawable/mm_title_btn_qrcode_normal" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="8dp"        android:text="掃一掃"        android:textColor="#fff"        android:textSize="18sp" />            </LinearLayout>                          </LinearLayout>    </RelativeLayout></RelativeLayout>

效果：

這個背景是黑色是因為主題的原因，既然和主題有個那麼我們能不能修改主題使背景透明呢，答案是可行的。

自訂佈景主題樣式（有關自訂佈景主題請看我的另外一篇博文：http://blog.csdn.net/dawanganban/article/details/17732701）

    <style name="MyDialogStyleTop" parent="android:Theme.Dialog" >        <item name="android:windowAnimationStyle">@style/AnimTop2</item>        <item name="android:windowFrame">@null</item><!--邊框-->        <item name="android:windowIsFloating">true</item><!--是否浮現在activity之上-->        <item name="android:windowIsTranslucent">true</item><!--半透明-->        <item name="android:windowNoTitle">true</item><!--無標題-->        <item name="android:windowBackground">@android:color/transparent</item><!--背景透明-->        <item name="android:backgroundDimEnabled">false</item><!--模糊-->             </style>

切換動畫

    <style name="AnimTop2" parent="@android:style/Animation">      <item name="android:windowEnterAnimation">@anim/push_top_in2</item>        <item name="android:windowExitAnimation">@anim/push_top_out2</item>    </style>

<?xml version="1.0" encoding="utf-8"?><!-- 上下滑入式 --><scale   xmlns:android="http://schemas.android.com/apk/res/android"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"          android:fromXScale="1.0"           android:toXScale="1.0"           android:fromYScale="0"           android:toYScale="1.0"           android:pivotX="0"          android:pivotY="10%"          android:duration="200" /> 

<?xml version="1.0" encoding="utf-8"?><scale   xmlns:android="http://schemas.android.com/apk/res/android"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"          android:fromXScale="1.0"           android:toXScale="1.0"           android:fromYScale="1.0"           android:toYScale="0"           android:pivotX="0"          android:pivotY="10%"          android:duration="200" /> 

給該Activity設定主題

        <activity android:name="com.example.weixin.activity.MainTopRightDialog" android:theme="@style/MyDialogStyleTop">                    </activity>

設定主題樣式後的運行結果和第一個圖相同，這裡就不貼圖了，運行後 如何讓這個菜單消失，這就需要重寫onTouchEvent了，Activity內的代碼如下：

package com.example.weixin.activity;import android.app.Activity;import android.os.Bundle;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.widget.LinearLayout;import android.widget.Toast;import com.example.weixin.R;public class MainTopRightDialog extends Activity {//private MyDialog dialog;private LinearLayout layout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main_top_right_dialog);//dialog=new MyDialog(this);layout=(LinearLayout)findViewById(R.id.main_dialog_layout);layout.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubToast.makeText(getApplicationContext(), "提示：點擊視窗外部關閉視窗！", Toast.LENGTH_SHORT).show();}});}@Overridepublic boolean onTouchEvent(MotionEvent event){finish();return true;}}

這樣就實現了上面的下彈式菜單了，呵呵。

下一篇我們來看一下如何?搖一搖功能，不僅僅是實現，而是要實現的和上面的一模一樣（代碼下一篇中貼出）。