Android仿新浪微博发送菜单界面的实现

效果图

接下来就是一波贴代码的过程

自定义Dialog

public class SinaSendView extends Dialog {
 private ImageButton ib_dialog_sina_close;
 private LinearLayout ll_dialog_sina_write;
 private LinearLayout ll_dialog_sina_time;
 private LinearLayout ll_dialog_sina_map;
 private LinearLayout ll_dialog_sina_menu;
 private ImageView iv_dialog_sina_bg,iv_dialog_sina_des;
 private Context mContext;
 private Boolean hideDes;
 private Bitmap screenShot;
 private Bitmap bitmap;
 private ByteArrayOutputStream baos;
 private byte[] bytes;

public SinaSendView(Context context) {
   super(context);
   this.mContext = context;
 }

public SinaSendView(Context context, int themeResId,Boolean hideDes) {
   super(context, themeResId);
   this.mContext = context;
   this.hideDes = hideDes;
 }

protected SinaSendView(Context context, boolean cancelable, OnCancelListener cancelListener) {
   super(context, cancelable, cancelListener);
   this.mContext = context;
 }

@Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   this.setContentView(R.layout.layout_sina_send_dialog);
   ib_dialog_sina_close = (ImageButton) findViewById(R.id.ib_dialog_sina_close);
   ll_dialog_sina_write = (LinearLayout) findViewById(R.id.ll_dialog_sina_write);
   ll_dialog_sina_time = (LinearLayout) findViewById(R.id.ll_dialog_sina_time);
   ll_dialog_sina_map = (LinearLayout) findViewById(R.id.ll_dialog_sina_map);
   ll_dialog_sina_menu = (LinearLayout) findViewById(R.id.ll_dialog_sina_menu);
   iv_dialog_sina_bg = (ImageView) findViewById(R.id.iv_dialog_sina_bg);
   iv_dialog_sina_des = (ImageView) findViewById(R.id.iv_dialog_sina_des);
   initView();
 }

private void initView() {
   setBrulBg();
   ll_dialog_sina_menu.setVisibility(View.VISIBLE);
   ll_dialog_sina_menu.setAnimation(AnimationUtil.moveToViewLocationFromTop());
   ib_dialog_sina_close.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
       ll_dialog_sina_menu.setAnimation(AnimationUtil.moveToViewBottom());
       ll_dialog_sina_menu.setVisibility(View.GONE);
       dismiss();
     }
   });
   if(hideDes){
     iv_dialog_sina_des.setVisibility(View.GONE);
   }
 }

/**
  * 设置模糊背景
  */
 private void setBrulBg(){
   screenShot = CommonUtils.getInstance().getScreenShot((Activity) mContext);
   bitmap = CommonUtils.getInstance().zoomImg(screenShot, 0.2f);
   baos = new ByteArrayOutputStream();
   bitmap.compress(Bitmap.CompressFormat.JPEG, 1, baos);
   bytes = baos.toByteArray();
   Glide.with(mContext)
       .load(bytes)
       .asBitmap()
       .transform(new BlurTransformation(CommonUtils.getInstance().getContext(), 25))
       .into(iv_dialog_sina_bg);
 }

public void setClick(final SinaSendDialog mSinaSendDialog){
   this.show();

ll_dialog_sina_write.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
       mSinaSendDialog.onNormalClick();
       dismiss();
     }
   });

ll_dialog_sina_map.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
       mSinaSendDialog.onMapClick();
       dismiss();
     }
   });

ll_dialog_sina_time.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
       mSinaSendDialog.onTimeClick();
       dismiss();
     }
   });

}

@Override
 public void dismiss() {
   super.dismiss();
   if(screenShot != null && !screenShot.isRecycled()){
     screenShot.recycle();
     screenShot = null;
   }
   if(bitmap != null && !bitmap.isRecycled()){
     bitmap.recycle();
     bitmap = null;
   }
   try {
     baos.close();
   } catch (IOException e) {
     e.printStackTrace();
   }
   bytes = null;
   System.gc();
 }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
 >

<ImageView
   android:id="@+id/iv_dialog_sina_bg"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:scaleType="fitXY"
   />
 <ImageButton
   android:id="@+id/ib_dialog_sina_close"
   android:layout_width="15dp"
   android:layout_height="15dp"
   android:src="@drawable/dialog_sina_send_close"
   android:background="@null"
   android:layout_gravity="bottom|center_horizontal"
   android:layout_marginBottom="17dp"
   />

<ImageView
   android:layout_width="match_parent"
   android:layout_height="0.5dp"
   android:background="@color/line_gray"
   android:layout_gravity="bottom"
   android:layout_marginBottom="50dp"
   />

<LinearLayout
   android:id="@+id/ll_dialog_sina_menu"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="bottom|center_horizontal"
   android:layout_marginBottom="120dp"
   android:orientation="horizontal"
   android:visibility="gone"
   >

<LinearLayout
     android:id="@+id/ll_dialog_sina_write"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:gravity="center_horizontal"
     >
     <ImageView
       android:layout_width="75dp"
       android:layout_height="75dp"
       android:src="@drawable/dialog_sina_send_write"
       />

<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textSize="13sp"
       android:textColor="@color/text_gray"
       android:text="一般内容"
       android:layout_marginTop="8dp"

/>
   </LinearLayout>
   <LinearLayout
     android:id="@+id/ll_dialog_sina_time"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:gravity="center_horizontal"
     android:layout_marginLeft="35dp"
     android:layout_marginRight="35dp"
     >
     <ImageView
       android:layout_width="75dp"
       android:layout_height="75dp"
       android:src="@drawable/dialog_sina_send_time"
       />

<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textSize="13sp"
       android:textColor="@color/text_gray"
       android:text="时间胶囊"
       android:layout_marginTop="8dp"

/>
   </LinearLayout>
   <LinearLayout
     android:id="@+id/ll_dialog_sina_map"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:gravity="center_horizontal"
     >
     <ImageView
       android:layout_width="75dp"
       android:layout_height="75dp"
       android:src="@drawable/dialog_sina_send_map"
       />

<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textSize="13sp"
       android:textColor="@color/text_gray"
       android:text="地点胶囊"
       android:layout_marginTop="8dp"

/>
   </LinearLayout>

</LinearLayout>

<ImageView
   android:id="@+id/iv_dialog_sina_des"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/dialog_sina_send_des"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="70dp"
   />

</FrameLayout>

Style

 <style name="SinaSendDialog">
   <item name="android:windowFullscreen">true</item>
   <item name="android:windowNoTitle">true</item>
   <item name="android:windowBackground">@android:color/transparent</item>
</style>

工具方法

 /**
  * 从控件的顶部移动到控件所在位置
  *
  * @return
  */
 public static TranslateAnimation moveToViewLocationFromTop() {
   TranslateAnimation mHiddenAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
       Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
       -1.0f, Animation.RELATIVE_TO_SELF, 0.0f);
   mHiddenAction.setDuration(500);
   return mHiddenAction;
 }

/**
  * 截取当前屏幕
  * @param activity
  * @return
  */
 public Bitmap getScreenShot(Activity activity) {
   // 获取windows中最顶层的view
   View view = activity.getWindow().getDecorView();
   view.buildDrawingCache();

// 获取状态栏高度
   Rect rect = new Rect();
   view.getWindowVisibleDisplayFrame(rect);
   int statusBarHeights = rect.top;
   Display display = activity.getWindowManager().getDefaultDisplay();

// 获取屏幕宽和高
   int widths = display.getWidth();
   int heights = display.getHeight();

// 允许当前窗口保存缓存信息
   view.setDrawingCacheEnabled(true);

// 去掉状态栏
   Bitmap bmp = Bitmap.createBitmap(view.getDrawingCache(), 0,
       0, widths, heights);

// 销毁缓存信息
   view.destroyDrawingCache();

return bmp;
 }

/**
  * 改变bitmap宽高
  * @param bm
  * @param f
  * @return
  */
 public Bitmap zoomImg(Bitmap bm,float f){

int width = bm.getWidth();
   int height = bm.getHeight();

float scaleWidth = f;
   float scaleHeight = f;

Matrix matrix = new Matrix();
   matrix.postScale(scaleWidth, scaleHeight);

Bitmap newbm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
   return newbm;
    }

接口

public interface SinaSendDialog {

void onNormalClick();

void onTimeClick();

void onMapClick();
}

基本讲一下逻辑，背景采用截屏高斯模糊处理，这里一定要降图片质量，不然会慢，按钮采用一个动画从上向下划出，虽然不是特别完美，但是多少有个样子。

源码地址：

https://github.com/bertsir/SinaSendView

到这里就结束啦.

来源：https://mp.weixin.qq.com/s/qr0iifLv94cX4sOWTp9tYg