Android仿微信右侧顶部下拉对话框

       我们使用微信都知道，其右侧顶部有一个下拉对话框，我们可以执行添加好友，扫一扫等功能，今天我们就来模仿实现一下这个功能（实现的方式有很多种，我今天只说一种借助透明主题Activity的方式实现；如果有兴趣还可以移步至仿淘宝底部导航栏）；本篇的实现的效果如下：

下面就来说一说实现的思路（重要）：

• 第一步：创建弹出对话框布局

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
 
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="45dp"
        android:layout_marginRight="20dp">

        <LinearLayout
            android:id="@+id/id_pop_dialog_layout"
            android:layout_width="@dimen/pop_list_width"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/pop_item_normal"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/upload_record_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_marginTop="5dp"
                android:background="@drawable/pop_list_selector" >

                <ImageView
                    android:id="@+id/id_imageView1"
                    android:layout_width="@dimen/pop_dialog_icon_size"
                    android:layout_height="@dimen/pop_dialog_icon_size"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="8dp"
                    android:src="@drawable/upload_icon_record" />

                <TextView
                    android:layout_width="@dimen/pop_list_width"
                    android:layout_height="wrap_content"
                    android:padding="8dp"
                    android:text="@string/uploadRecord"
                     android:layout_gravity="center_vertical"
                    android:textColor="#fff"
                    android:textSize="16sp" />
            </LinearLayout>

            <ImageView
                android:id="@+id/id_imageView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/pop_line" />

            <LinearLayout
                android:id="@+id/register_record_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/pop_list_selector" >

                <ImageView
                    android:id="@+id/id_imageView2"
                    android:layout_width="@dimen/pop_dialog_icon_size"
                    android:layout_height="@dimen/pop_dialog_icon_size"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="8dp"
                    android:src="@drawable/register_icon_record" />

                <TextView
                    android:layout_width="@dimen/pop_list_width"
                    android:layout_height="wrap_content"
                    android:padding="8dp"
                    android:text="@string/registerRecord"
                      android:layout_gravity="center_vertical"
                    android:textColor="#fff"
                    android:textSize="16sp" />
            </LinearLayout>

            <ImageView
                android:id="@+id/id_imageView7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/pop_line" />

            <LinearLayout
                android:id="@+id/new_massage_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/pop_list_selector" >

                <ImageView
                    android:id="@+id/id_imageView3"
                    android:layout_width="@dimen/pop_dialog_icon_size"
                    android:layout_height="@dimen/pop_dialog_icon_size"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="8dp"
                    android:src="@drawable/message_icon_tip" />

                <TextView
                    android:id="@+id/new_message"
                    android:layout_width="@dimen/pop_list_width"
                    android:layout_height="wrap_content"
                    android:padding="8dp"
                    android:text="@string/defaultMessage"
                    android:layout_gravity="center_vertical"
                    android:textColor="#fff"
                    android:textSize="16sp" />
            </LinearLayout>

            <ImageView
                android:id="@+id/id_imageView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/pop_line" />

        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

• 第二步：创建一个用于显示该对话框布局Activity

package com.hfut.popdialogtest;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.LinearLayout;

/**
 * @author why
 * @date 2018-10-3
 */
public class MyDialogActivity extends Activity implements OnClickListener{

   private LinearLayout uploadRecord;
   private LinearLayout registerRecord;
   private LinearLayout newMessage;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      requestWindowFeature(Window.FEATURE_NO_TITLE);
      setContentView(R.layout.pop_dialog);

      if(getActionBar()!=null){
         getActionBar().hide();
      }
      CommonTools.setNavbarVisibility(this);
      initView();
   }


   private void initView(){
      uploadRecord = findViewById(R.id.upload_record_layout);
      registerRecord = findViewById(R.id.register_record_layout);
      newMessage = findViewById(R.id.new_massage_layout);

      uploadRecord.setOnClickListener(this);
      registerRecord.setOnClickListener(this);
      newMessage.setOnClickListener(this);
   }
   
   @Override
   public boolean onTouchEvent(MotionEvent event){
      finish();
      return true;
   }
   
   @Override
   public void onClick(View v) {
      switch (v.getId()){
         case R.id.upload_record_layout:
            SharedData.resultID=1;
            break;
         case R.id.register_record_layout:
            SharedData.resultID=2;
            break;
         case R.id.new_massage_layout:
            SharedData.resultID=3;
            break;
         default:
            SharedData.resultID=0;
            break;
      }
      this.finish();
   }
}

• 第三步：创建一个主界面

MainActivity.java代码：

package com.hfut.popdialogtest;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

/**
 * @author why
 * @date 2018-10-3 9:35:35
 */
public class MainActivity extends AppCompatActivity {

    TextView resultShow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        resultShow = findViewById(R.id.show_choosen_result);

        if(getActionBar()!=null){
            getActionBar().hide();
        }
        CommonTools.setNavbarVisibility(this);
    }


    @Override
    protected void onResume() {
        switch (SharedData.resultID) {
            case 0:
                resultShow.setText("默认显示");
                break;
            case 1:
                resultShow.setText(getResources().getString(R.string.uploadRecord));
                break;
            case 2:
                resultShow.setText(getResources().getString(R.string.registerRecord));
                break;
            case 3:
                resultShow.setText(getResources().getString(R.string.defaultMessage));
                break;
            default:
                resultShow.setText("默认显示");
                break;

        }
        super.onResume();
    }

    public void openPopDialog(View view) {
        Intent intent = new Intent(this, PopDialogActivity.class);
        startActivity(intent);
    }
}

activity_main.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hfut.popdialogtest.MainActivity">

  <ImageView
      android:onClick="openPopDialog"
      android:id="@+id/pop_dialog_icon"
      app:layout_constraintRight_toRightOf="parent"
      android:layout_marginRight="10dp"
      app:layout_constraintTop_toTopOf="parent"
      android:layout_marginTop="5dp"
      android:background="@drawable/message_tip"
      android:layout_width="50dp"
      android:layout_height="50dp" />

    <TextView
        android:gravity="center"
        android:textColor="@color/colorAccent"
        android:textSize="30sp"
        android:id="@+id/show_choosen_result"
        app:layout_constraintTop_toBottomOf="@id/pop_dialog_icon"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

• 第四步：设置对话框Activity主题为透明主题

AndroidManifest.xml文件代码：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hfut.popdialogtest">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MyDialogActivity"  android:theme="@android:style/Theme.Translucent" />
    </application>

</manifest>

• 第五步：其他辅助代码

CommonTools.java代码：

package com.hfut.popdialogtest;

import android.app.Activity;
import android.view.View;

/**
 * author:why
 * created on: 2018/9/11 13:34
 * description:
 */
public class CommonTools {

    /**
     * to controll the visibility of the Activity's navigator bar
     * @param activity
     */
    public static void setNavbarVisibility(Activity activity) {
        View decorView = activity.getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
    }

}

Values目录下的dimens.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="pop_list_width">160dp</dimen>
    <dimen name="pop_dialog_icon_size">60dp</dimen>
    <dimen name="pop_dialog_icon_tip_size">40dp</dimen>
</resources>

Values目录下的strings.xml代码：

<resources>
    <string name="app_name">仿微信右侧顶部下拉弹出测试</string>

    <string name="uploadRecord">上传记录</string>
    <string name="registerRecord">注册记录</string>
    <string name="defaultMessage">消息提示</string>
    
</resources>

其他资源文件就不添加了。我们总结一下其实就是这样的步骤：

• 点击主Activity的弹窗对话框图标，打开一个新的透明的Acitivity
• 在新的Activity中做完逻辑处理把结果存放在主Activity可访问的数据域，然后finish自己
• 主Activity再次可交互，并在onResume中实现对处理结果分析和处理，比如修改主Activity UI；