高仿微信界面

来源：互联网发布：矩阵scalar 编辑：程序博客网时间：2024/06/05 16:33

在上一篇《是男人就下100层【第一层】——高仿微信界面（6）》中我们已经对主界面的的各个菜单进行了简单实现，接下来我们完成两个比较有趣的功能，一个是上部的下弹式菜单，另一个是摇一摇功能。

效果如下图：

我们先做一个位于右上方的对话框样子，布局代码很简单，外面是一个相对布局，内部是一个线性布局，布局如下：

[html] view plaincopyprint?
<?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）

[html] view plaincopyprint?
<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>  

切换动画

[html] view plaincopyprint?
<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>  

[html] view plaincopyprint?
<?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" />   

[html] view plaincopyprint?
<?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设置主题

[html] view plaincopyprint?
<activity android:name="com.example.weixin.activity.MainTopRightDialog" android:theme="@style/MyDialogStyleTop">  
      
</activity>  

设置主题样式后的运行结果和第一个图相同，这里就不贴图了，运行后如何让这个菜单消失，这就需要重写onTouchEvent了，Activity内的代码如下：

[java] view plaincopyprint?
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;  
    @Override  
    protected 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() {  
              
            @Override  
            public void onClick(View v) {  
                // TODO Auto-generated method stub  
                Toast.makeText(getApplicationContext(), "提示：点击窗口外部关闭窗口！",   
                        Toast.LENGTH_SHORT).show();   
            }  
        });  
    }  
  
    @Override  
    public boolean onTouchEvent(MotionEvent event){  
        finish();  
        return true;  
    }  
}  

这样就实现了上面的下弹式菜单了，呵呵。

下一篇我们来看一下如何实现摇一摇功能，不仅仅是实现，而是要实现的和微信上面的一模一样（代码下一篇中贴出）。

0 0