SmartSwipe的侧滑透明效果主要体现在以下两种特效：
283.gif
284.gif
SmartSwipe中TranslucentSlidingConsumer可以实现以上效果。
代码如下：
TranslucentSlidingConsumer.java
/**
* Sliding with no drawer view, the view below will gradually show up as the contentView moves
* <pre>
* Note:
* {@link TranslucentSlidingConsumer} works similar to {@link SpaceConsumer}, differences are:
* 1. {@link SpaceConsumer} is simple, just make contentView movable
* 2. {@link TranslucentSlidingConsumer} can do something like {@link SlidingConsumer}, such as:
* 2.1 show shadow while swiping;
* 2.2 delete from data list with ListView/RecyclerView... on fully swiped
* 3. {@link TranslucentSlidingConsumer} is the base class of {@link ActivitySlidingBackConsumer}
* </pre>
* @author billy.qi
*/
public class TranslucentSlidingConsumer extends SlidingConsumer {
public TranslucentSlidingConsumer() {
//set drawer view not required
setDrawerViewRequired(false);
}
@Override
protected void initChildrenFormXml() {
//do nothing
}
@Override
public View getDrawerView(int direction) {
//no drawer view
return null;
}
@Override
protected void layoutDrawerView() {
//no drawer to layout
}
@Override
public TranslucentSlidingConsumer setDrawerView(int direction, View drawerView) {
// add no drawer view
return this;
}
@Override
protected void changeDrawerViewVisibility(int visibility) {
// no drawer view to show
}
@Override
public SwipeConsumer setOverSwipeFactor(float overSwipeFactor) {
// no over scale
return this;
}
}
TranslucentSlidingConsumer是SlidingConsumer的子类，所以它具备滑动特性。
【RecyclerView中Item删除效果实现】
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(mContext).inflate(R.layout.recycleview_item, parent, false);
TranslucentSlidingConsumer translucentSlidingConsumer = SmartSwipe.wrap(itemView)
.addConsumer(new TranslucentSlidingConsumer())
.enableHorizontal()
.as(TranslucentSlidingConsumer.class);
SmartSwipeWrapper wrapper = translucentSlidingConsumer.getWrapper();
ViewHolder holder = new ViewHolder(wrapper, translucentSlidingConsumer);
return holder;
}
public class ViewHolder extends RecyclerView.ViewHolder {
TextView tvName;
private ImageView ivAvatar;
public ViewHolder(SmartSwipeWrapper wrapper, TranslucentSlidingConsumer translucentSlidingConsumer) {
super(wrapper);
translucentSlidingConsumer.addListener(new SimpleSwipeListener(){
@Override
public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
int position = getAdapterPosition();
if (position >= 0 && position < mData.size()) {
mData.remove(position);
notifyItemRemoved(position);
}
}
});
tvName = itemView.findViewById(R.id.text);
ivAvatar = itemView.findViewById(R.id.iv_avatar);
((View)ivAvatar.getParent()).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(mContext, ImageViewerActivity.class);
intent.putExtra(ImageViewerActivity.IMAGE_EXTRA, R.mipmap.avatar_1);
mContext.startActivity(intent);
}
});
}
}
侧滑删除效果的本质其实就是SlidingConsumer，SlidingConsumer依赖一个抽屉布局，滑动的时候会慢慢的将抽屉布局给显示出来，然而TranslucentSlidingConsumer去除了抽屉布局，仅仅保留SlidingConsumer的侧滑效果。
【下滑关闭Activity效果】
就拿现在比较流行的即时通讯软件微信为例，打开一张图片，下滑图片时会有透明缩放的效果，如上图。
那么，我们开始使用TranslucentSlidingConsumer达到上图效果。
【第一步】 直接使用TranslucentSlidingConsumer
public class ImageViewerActivity extends AppCompatActivity {
public static String IMAGE_EXTRA = "image";
private View activityContentView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ImageView imageView = new ImageView(this);
imageView.setImageResource(getIntent().getIntExtra(IMAGE_EXTRA, 0));
setContentView(imageView);
activityContentView = findViewById(android.R.id.content);
activityContentView.setBackgroundColor(0xFF000000);
SmartSwipe.wrap(imageView)
.addConsumer(new TranslucentSlidingConsumer())
.enableTop();
}
}
新建一个ImageViewerActivity，点击某按钮跳转到这个Activity，这个Activity的主要作用是展示图片，现在，将侧滑效果添加到图片上，效果如下：
285.gif
【第二步】 让Activity中布局的背景逐渐透明
SmartSwipe.wrap(imageView)
.addConsumer(new TranslucentSlidingConsumer())
.enableTop()
.addListener(new SimpleSwipeListener(){
@Override
public void onSwipeStart(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
}
@Override
public void onSwipeProcess(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction, boolean settling, float progress) {
activityContentView.setAlpha(1 - progress);
}
@Override
public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
//关闭当前界面
ImageViewerActivity.this.finish();
}
});
添加一个SimpleSwipeListener监听，重写三个方法，分别是onSwipeStart、onSwipeProcess、onSwipeOpened，onSwipeStart代码滑动的开始，onSwipeProcess代表正在滑动并返回滑动的进度，onSwipeOpened表示滑动结束。
当滑动结束的时候，我们销毁当前Activity，在正在滑动时，根据onSwipeProcess的进度值实现Activity逐渐透明效果。
效果如下：
286.gif
【第三步】 缩放图片
SmartSwipe.wrap(imageView)
.addConsumer(new TranslucentSlidingConsumer())
.enableTop()
.addListener(new SimpleSwipeListener(){
@Override
public void onSwipeStart(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
//ActivityTranslucentUtil.convertActivityToTranslucent(ImageViewerActivity.this, null);
}
@Override
public void onSwipeProcess(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction, boolean settling, float progress) {
View contentView = wrapper.getContentView();
activityContentView.setAlpha(1 - progress);
contentView.setScaleX(1 - progress);
contentView.setScaleY(1 - progress);
}
@Override
public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
//关闭当前界面
ImageViewerActivity.this.finish();
}
});
直接在onSwipeProcess方法中设置缩放变化，代码如上。
效果如下：
287.gif
【第四步】 界面透明效果的渐变
这里需要使用ActivityTranslucentUtil辅助类，这个类的作用是将Window和Activity设置为透明。
/**
* @author billy.qi
*/
@SuppressLint("PrivateApi")
public class ActivityTranslucentUtil {
private static Class mTranslucentConversionListenerClass;
private static Method mMethodConvertFromTranslucent;
private static Method mMethodConvertToTranslucent;
private static Method mMethodGetActivityOptions;
private static boolean mInitialedConvertToTranslucent;
private static boolean mInitialedConvertFromTranslucent;
private Activity mActivity;
private boolean mIsTranslucent;
public ActivityTranslucentUtil(Activity activity) {
this.mActivity = activity;
}
public static void convertWindowToTranslucent(Activity activity) {
if (activity != null) {
View contentView = activity.findViewById(android.R.id.content);
Drawable background = contentView.getBackground();
if (background == null) {
TypedArray a = activity.getTheme().obtainStyledAttributes(new int[]{android.R.attr.windowBackground});
int windowBg = a.getResourceId(0, 0);
a.recycle();
if (windowBg != 0) {
contentView.setBackgroundResource(windowBg);
}
}
Window window = activity.getWindow();
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
window.getDecorView().setBackgroundDrawable(null);
SmartSwipeWrapper wrapper = SmartSwipe.peekWrapperFor(activity);
if (wrapper != null) {
wrapper.setBackgroundColor(Color.TRANSPARENT);
}
}
}
private MessageQueue.IdleHandler convertActivityToTranslucentIdleHandler = new MessageQueue.IdleHandler() {
@Override
public boolean queueIdle() {
convertActivityToTranslucent();
return false;
}
};
private long convertTranslucentTimeStamp;
public void convertActivityToTranslucent() {
convertActivityToTranslucent(true);
}
public void convertActivityToTranslucent(final boolean retry) {
if (mIsTranslucent || mActivity == null) {
return;
}
if (convertingActivity != null) {
Looper.myQueue().addIdleHandler(convertActivityToTranslucentIdleHandler);
return;
}
convertTranslucentTimeStamp = SystemClock.elapsedRealtime();
final long callbackTimeStamp = convertTranslucentTimeStamp;
convertActivityToTranslucent(mActivity, new ActivityTranslucentUtil.TranslucentCallback() {
@Override
public void onTranslucentCallback(boolean translucent) {
if (callbackTimeStamp == convertTranslucentTimeStamp) {
if (retry && !translucent) {
convertActivityToTranslucent(false);
} else {
setTranslucent(translucent);
}
}
}
});
}
public void convertActivityFromTranslucent() {
convertTranslucentTimeStamp = SystemClock.elapsedRealtime();
convertActivityFromTranslucent(mActivity);
setTranslucent(false);
}
private void setTranslucent(boolean translucent) {
this.mIsTranslucent = translucent;
}
public boolean isTranslucent() {
return mIsTranslucent;
}
/** record the converting activity, resolve more than 1 xxUIs add onto the same activity */
private static WeakReference<Activity> convertingActivity;
/**
* Reflect call Activity.convertToTranslucent(...)
* @param activity activity
* @param callback callback
*/
public static void convertActivityToTranslucent(Activity activity, final TranslucentCallback callback) {
convertingActivity = new WeakReference<>(activity);
Object mTranslucentConversionListener = null;
try {
if (mTranslucentConversionListenerClass == null) {
Class[] clazzArray = Activity.class.getDeclaredClasses();
for (Class clazz : clazzArray) {
if (clazz.getSimpleName().contains("TranslucentConversionListener")) {
mTranslucentConversionListenerClass = clazz;
}
}
}
//resolve black flash at the beginning:
// Activity.convertToTranslucent(...) will takes tens of milliseconds
//thanks: https://github.com/Simon-Leeeeeeeee/SLWidget/blob/master/swipeback/src/main/java/cn/simonlee/widget/swipeback/SwipeBackHelper.java
if (mTranslucentConversionListenerClass != null) {
InvocationHandler invocationHandler = new InvocationHandler() {
@Override
public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
boolean translucent = false;
if (args != null && args.length == 1) {
translucent = (Boolean) args[0];
}
convertCallback(callback, translucent);
return null;
}
};
mTranslucentConversionListener = Proxy.newProxyInstance(mTranslucentConversionListenerClass.getClassLoader(), new Class[]{mTranslucentConversionListenerClass}, invocationHandler);
}
if (mMethodConvertToTranslucent == null && mInitialedConvertToTranslucent) {
convertCallback(callback, false);
return;
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
if (mMethodConvertToTranslucent == null) {
mInitialedConvertToTranslucent = true;
Method getActivityOptions = Activity.class.getDeclaredMethod("getActivityOptions");
getActivityOptions.setAccessible(true);
mMethodGetActivityOptions = getActivityOptions;
Method method = Activity.class.getDeclaredMethod("convertToTranslucent", mTranslucentConversionListenerClass, ActivityOptions.class);
method.setAccessible(true);
mMethodConvertToTranslucent = method;
}
Object options = mMethodGetActivityOptions.invoke(activity);
mMethodConvertToTranslucent.invoke(activity, mTranslucentConversionListener, options);
} else {
if (mMethodConvertToTranslucent == null) {
mInitialedConvertToTranslucent = true;
Method method = Activity.class.getDeclaredMethod("convertToTranslucent", mTranslucentConversionListenerClass);
method.setAccessible(true);
mMethodConvertToTranslucent = method;
}
mMethodConvertToTranslucent.invoke(activity, mTranslucentConversionListener);
}
if (mTranslucentConversionListener == null) {
convertCallback(callback, false);
}
} catch (Throwable ignored) {
convertCallback(callback, false);
}
}
private static void convertCallback(TranslucentCallback callback, boolean translucent) {
if (callback != null) {
callback.onTranslucentCallback(translucent);
}
convertingActivity = null;
}
public static void convertActivityFromTranslucent(Activity activity) {
if (activity == null) {
return;
}
if (convertingActivity != null && convertingActivity.get() == activity) {
convertingActivity = null;
}
try {
if (mMethodConvertFromTranslucent == null) {
if (mInitialedConvertFromTranslucent) {
return;
}
mInitialedConvertFromTranslucent = true;
Method method = Activity.class.getDeclaredMethod("convertFromTranslucent");
method.setAccessible(true);
mMethodConvertFromTranslucent = method;
}
mMethodConvertFromTranslucent.invoke(activity);
} catch (Throwable ignored) {
}
}
public interface TranslucentCallback {
void onTranslucentCallback(boolean translucent);
}
}
使用以上辅助类，将Window和Activity设置成透明，代码如下：
activityContentView = findViewById(android.R.id.content);
activityContentView.setBackgroundColor(0xFF000000);
ActivityTranslucentUtil.convertWindowToTranslucent(this);
SmartSwipe.wrap(imageView)
.addConsumer(new TranslucentSlidingConsumer())
.enableTop()
.addListener(new SimpleSwipeListener(){
@Override
public void onSwipeStart(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
ActivityTranslucentUtil.convertActivityToTranslucent(ImageViewerActivity.this, null);
}
@Override
public void onSwipeProcess(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction, boolean settling, float progress) {
View contentView = wrapper.getContentView();
activityContentView.setAlpha(1 - progress);
contentView.setScaleX(1 - progress);
contentView.setScaleY(1 - progress);
}
@Override
public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
//关闭当前界面
ImageViewerActivity.this.finish();
}
});
[本章完...]
网友评论