由于原理一样，so 就写了仿斗鱼demo，左图为demo，右图为斗鱼平台的登录界面

写这篇文章时，顺便吐槽一下美团满减活动越来越坑了，从满25减4到满30减2，周末伙食也不敢点贵的了。不过还是每天习惯性的点开看看今天抽到的满减多少。

从我研究的几个App中来看，就苏宁的是直接使用View 覆盖在当前的页面上面，其他都是另外开启一个Activity，我想这样的目的是为了不让用户可以点到背后的内容，逻辑也更清晰。这里就只讲Activity形式的实现。

一、简介及结论

一般在刚进美团app时，出现下面弹窗：

看到没有！！！，虽然截图没截全，很明显是满34 减 4的通用红包！！！默默下楼吃馒头

通过Hierarchy View 工具可以看出这个弹窗分为3个部分

1. com.facebook.drawee.view.SimpleDraweeView 其本质是ImageView，第三方库，用来通过Uri进行加载图片

2. ListView //显示具体内容

3. Button //用来进入主界面，直接finish本Activity

再看看这布局在哪个页面中：

可以看到，该页面为MainActivity ，那么为啥有2个MainActivity呢？

其实弹窗是由下面那MainActivity 通过Intent 传入弹出信息，再开启第二个MainActivity，第二个则通过Intent判断，如果判断为弹窗则加载弹窗的布局文件。

结论：那么从上面的讲述之中，我们可以发现，该弹窗其实就是一个背景为透明的Activity。

再看看其他应用的一些场景，比如网易邮箱的更新、美团的更新、斗鱼的登录

这几个例子，都和美团那个一样，使用开启Activity的方式弹窗，那么下面来用demo，实现类似的效果。

二、demo解析

这边讲解2种方式，一种为启动另一个activity，一种为启动自身重新加载布局( 这种设置透明主题特别坑)

1. 启动另一个activity

步骤：

(1) 给button设置点击事件，开启AdvertDialogActivity

(2)给该Activity 进行配置透明主题，以及不需要其他的一些动画效果

(3) 各个按钮都有监听事件，进行下一步的处理(本demo没加上)

MainActivity:

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.click:
                Intent intent = new Intent(this, AdvertDialogActivity.class);
                startActivity(intent);
                break;

AdvertDialogActivity.java

package com.example.stormxz.vasdialog;

import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.View;
import android.widget.ImageView;

/**
 * Created by stormxz on 2017/9/15.
 */

public class AdvertDialogActivity extends Activity implements View.OnClickListener{

    private ImageView advert_close = null;
    private ImageView advert_img = null;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login_dialog);

//        initData();      //需要加载的图片 处理

        initView();  //初始化view

//        memoryThis();  //记录下是否打开过 ， 一般打开一次
    }

    private void initView() {
    }

    @Override
    public void onClick(View view) {
        int viewId = view.getId();
        switch (viewId) {
        }
    }

    @Override
    public void finish()
    {
        super.finish();
        overridePendingTransition(0, 0);       //没有效果的退出
    }
}

设置该Activity 主题：

<!-- 弹窗 -->
        <activity
            android:name=".AdvertDialogActivity"
            android:configChanges="fontScale|orientation|keyboardHidden|screenSize|smallestScreenSize|layoutDirection|screenLayout"  //旋转屏幕相关
            android:exported="false"          //不能为外部调用
            android:launchMode="singleTop"    //必须在栈顶
           android:theme="@style/AdvertDialogActivity.Theme.NoTitleBar">    //设置主题
        </activity>

    <!-- 弹窗页面样式 -->
    <style name="AdvertDialogActivity.Theme.NoTitleBar" parent="android:Theme.Translucent.NoTitleBar">      //系统的透明主题
        <item name="android:windowAnimationStyle">@style/Animation</item>             //取消Activity的一些动画，比如进入，退出等
    </style>

    <style name="Animation">
        <item name="android:activityOpenEnterAnimation">@null</item>
        <item name="android:activityOpenExitAnimation">@null</item>
        <item name="android:activityCloseEnterAnimation">@null</item>
        <item name="android:activityCloseExitAnimation">@null</item>
        <item name="android:taskOpenEnterAnimation">@null</item>
        <item name="android:taskOpenExitAnimation">@null</item>
        <item name="android:taskCloseEnterAnimation">@null</item>
        <item name="android:taskCloseExitAnimation">@null</item>
        <item name="android:taskToFrontEnterAnimation">@null</item>
        <item name="android:taskToFrontExitAnimation">@null</item>
        <item name="android:taskToBackEnterAnimation">@null</item>
        <item name="android:taskToBackExitAnimation">@null</item>
    </style>

2. 启动自身activity

思路：通过Intent 传递参数，判断加载的布局

MainActivity.java

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.click:
                Intent intent = new Intent(this, MainActivity.class);
                intent.putExtra("isUpdate", true);
                startActivity(intent);
                break;
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (isUpdate) {
            setContentView(R.layout.login_dialog);    //类似斗鱼登录界面的布局
        } else {
            setContentView(R.layout.activity_main);   //带有button的布局
            initView(); 
        }

    }

难点，给MainActivity添加透明主题

一般这个时候会想到使用动态设置主题，调用setTheme(主题id)，此操作没毛病啊，但是实际运行过程中，设置透明主题（和第一个例子一样的主题）并没有效果。

楼主试过将setTheme的位置放在setContentView之前也是无效的。

这时，解决方法如下：

在MainActivity中重写方法setTheme()

    //设置透明主题
    @Override
    public void setTheme(@StyleRes int resid) {
        Intent intent = getIntent();
        isUpdate = intent.getBooleanExtra("isUpdate", false);
        if (isUpdate) {
            super.setTheme(R.style.AdvertDialogActivity_Theme_NoTitleBar);  //透明主题
        } else {
            super.setTheme(R.style.AppTheme);   //普通主题
        }
    }

光这样还是不够的，必须在AndroidManifest.xml中给MainActivity设置透明主题才有效果,如下设置：

        <activity android:name=".MainActivity"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"    //加其他主题是没有效果的，亲测
            >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

至此，透明主题设置完毕，接下来就是写布局了

登录界面布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#BF000000"
    android:orientation="vertical"
    >

    <LinearLayout
        android:layout_gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="80dp"
        android:background="@drawable/bacgr">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center_horizontal"
                    android:layout_marginTop="20dp"
                    >

                    <TextView
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:textSize="0.5dp"
                        android:background="#CDC5BF"/>

                    <TextView
                        android:text="选择登录方式"
                        android:textColor="#CDC5BF"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <TextView
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:textSize="0.5dp"
                        android:background="#CDC5BF"/>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginRight="30dp"
                    android:background="@drawable/weixin"
                    android:gravity="center"
                    android:clickable="true">

                    <TextView
                        android:text="微信登录"
                        android:shadowRadius="5"
                        android:textColor="#00FF00"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginRight="30dp"
                    android:background="@drawable/qq"
                    android:gravity="center"
                    android:clickable="true">

                    <TextView
                        android:text="QQ登录"
                        android:shadowRadius="5"
                        android:textColor="#00BFFF"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginRight="30dp"
                    android:background="@drawable/weibo"
                    android:gravity="center"
                    android:clickable="true">

                    <TextView
                        android:text="微博登录"
                        android:shadowRadius="5"
                        android:textColor="#FF0000"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="10dp"
                    >

                    <TextView
                        android:text="or"
                        android:textSize="15sp"
                        android:gravity="center_horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginRight="30dp"
                    android:background="@drawable/douyu"
                    android:gravity="center"
                    android:clickable="true">

                    <TextView
                        android:text="斗鱼账号登录"
                        android:shadowRadius="5"
                        android:textColor="#FFFFFF"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    >

                    <TextView
                        android:text="快速注册"
                        android:textColor="#EE7600"
                        android:gravity="center_horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:layout_gravity="center_horizontal">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center">

                    <TextView
                        android:text="* 使用即为同意"
                        android:textSize="8sp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <TextView
                        android:text="《斗鱼注册协议及版权声明》"
                        android:textSize="8sp"
                        android:textColor="#EE7600"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />
                    </LinearLayout>
                </LinearLayout>

            </LinearLayout>

        </FrameLayout>


    </LinearLayout>



</LinearLayout>

圆角布局，这边就给微信的圆角，其他一样，重写改下颜色，圆角角度即可

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"/>
    <stroke android:width="1dp" android:color="#7CFC00" />
</shape>

仿斗鱼、美团、网易邮箱等弹窗效果

一、简介及结论

二、demo解析

1. 启动另一个activity

2. 启动自身activity

猜你喜欢

仿斗鱼、美团、网易邮箱等 弹窗效果

一、简介及结论

二、demo解析

1. 启动另一个activity

2. 启动自身activity

猜你喜欢

仿斗鱼、美团、网易邮箱等弹窗效果