由于原理一样,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解析
1. 启动另一个activity
@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>