是男人就下100層【第一層】——高仿微信介面(7)
阿新 • • 發佈:2019-01-26
在上一篇《是男人就下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;
@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;
}
}
這樣就實現了上面的下彈式選單了,呵呵。下一篇我們來看一下如何實現搖一搖功能,不僅僅是實現,而是要實現的和微信上面的一模一樣(程式碼下一篇中貼出)。