第一步, activity的代码, 关键代码是进出动画采用淡入淡出方式,让蔗罩出现消失更自然,全屏
public class RobotGuidceV2Activity extends RoboActivity implements View.OnClickListener { @InjectView(R.id.iv_iknow) private ImageView mIvIknow; private Context context; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); //全屏 setContentView(R.layout.activity_robot_guidcev2); context = this; mIvIknow.setOnClickListener(this); overridePendingTransition(R.anim.fadein, R.anim.fadeout); //动画 } @Override public void onClick(View v) { switch (v.getId()) { case R.id.iv_iknow: PreferencesUtils.putBoolean(context, AppConst.ROBOT2_ASKTIMES_GUIDCE_OPENED, true); finish(); overridePendingTransition(R.anim.fadein, R.anim.fadeout); break; } } }
动画布局,fadein.xml, fadeout.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="300" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set>
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="300" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set>
第二步, 界面布局文件,背景采用带透明度的颜色背景
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rel_msg_popup_container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#aa000000"> //透明背景 <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent"> <ImageView android:id="@+id/iv_iknow" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/rel_vp_container" android:layout_centerInParent="true" android:layout_gravity="center" android:layout_marginBottom="20dp" android:layout_marginTop="10dp" android:background="@android:color/transparent" android:src="@drawable/btn_iknow" /> <ImageView android:id="@+id/iv_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/rel_vp_container" android:layout_gravity="bottom" android:layout_marginBottom="2dp" android:layout_marginLeft="25dp" android:src="@drawable/oval1" /> <ImageView android:id="@+id/iv_arraw1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="70dp" android:layout_marginLeft="80dp" android:src="@drawable/arrow1" /> <ImageView android:id="@+id/iv_text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="220dp" android:layout_marginLeft="30dp" android:src="@drawable/text1" /> <ImageView android:id="@+id/iv_arraw2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_marginBottom="70dp" android:layout_marginRight="80dp" android:src="@drawable/arrow2" /> <ImageView android:id="@+id/iv_text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_marginBottom="120dp" android:layout_marginRight="30dp" android:src="@drawable/text2" /> <ImageView android:id="@+id/iv_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_marginBottom="2dp" android:layout_marginRight="20dp" android:src="@drawable/oval2" /> </FrameLayout> </RelativeLayout>
静态效果图
第三步, 在androidmanifest.xml文件配置Activity属性这一步很关键,第二次搞这个效果的时候,我就在在这一步被坑了很久,所以才决心做个笔记。activity必须指定一个透明的style,否则布局中的透明设置不生效
<activity android:name=".android.activity.robotqa.RobotGuidceV2Activity" android:screenOrientation="portrait" android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen" /> <activity
带translucent的theme基本上都有透明效果