1,点击图片放大low的实现
利用布局重叠.点击小图片时,设置展示大图片的布局显示出来.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="visible">
<!--小图片的布局-->
<GridView
android:id="@+id/gv_small_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<!--展示大图片的布局 gridview中item点击时设置该framelayout布局可见,将图片资源设置到PhotoView中-->
<FrameLayout
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="match_parent"
android:background="#80000000">
<RelativeLayout
android:layout_marginLeft="@dimen/pic_margin"
android:layout_marginRight="@dimen/pic_margin"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="@dimen/pic_layout_hight">
<uk.co.senab.photoview.PhotoView
android:id="@+id/details_bitmap_image_view"
android:layout_width="match_parent"
android:layout_height="@dimen/pic_hight"
android:scaleType="fitXY"
android:layout_centerHorizontal="true" />
<RelativeLayout
android:layout_gravity="center"
android:orientation="horizontal"
android:background="@color/blue1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/details_bitmap_image_view"
android:layout_alignLeft="@+id/details_bitmap_image_view"
android:layout_alignStart="@+id/details_bitmap_image_view">
<Button
android:background="@color/blue1"
android:visibility="gone"
android:id="@+id/details_bitmap_change_button"
android:layout_width="wrap_content"
android:text="修改"
android:textColor="@drawable/return_text"
android:layout_height="wrap_content" />
<Button
android:visibility="gone"
android:textColor="@drawable/return_text"
android:background="@color/blue1"
android:id="@+id/details_bitmap_delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="删除"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
这种做法实现虽然简便,但是从效果上看大图展示时显得十分突兀,所以才说这样的做法low.
参考了stackoverflow一个问题的做法:
问题链接
有时候stackoverflow的答案就是完美的,虽然能解决问题,但却不一定是最佳的解决方案.
2,点击图片放大使用android原生代码即可实现.
我们习惯于造轮子,却有时候忽略了android官方已经帮我们造好了好多很好用的轮子.
例子:我们可以看看另一位博主通过自己造轮子实现点击图片放大的效果
20140510230150187.gif
技术博客链接
分析
有兴趣不妨看看这篇博客,还是有干货的,但如果真正在项目开发中,我心中浮现出两个字:费劲
明明android官方已经有这样的轮子了,还自己搞各位看官会觉得费劲吗?
android如何实现
一,先看效果
androidzoomin.gif
二,源码实现
private OnMeizhiTouchListener getOnMeizhiTouchListener() {
return (v, meizhiView, card, meizhi) -> {
if (meizhi == null) return;
if (v == meizhiView && !mMeizhiBeTouched) {
//点击妹子小图片时的事件处理
Picasso.with(this).load(meizhi.url).fetch(new Callback() {
@Override public void onSuccess() {
mMeizhiBeTouched = false;
//实现点击放大图片的关键方法
startPictureActivity(meizhi, meizhiView);
}
@Override public void onError() {mMeizhiBeTouched = false;}
});
} else if (v == card) {
startGankActivity(meizhi.publishedAt);
}
};
}
关键方法
private void startPictureActivity(Meizhi meizhi, View transitView) {
Intent intent = PictureActivity.newIntent(MainActivity.this, meizhi.url, meizhi.desc);
//android V4包的类,用于两个activity转场时的缩放效果实现
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
MainActivity.this, transitView, PictureActivity.TRANSIT_PIC);
try {
ActivityCompat.startActivity(MainActivity.this, intent, optionsCompat.toBundle());
} catch (IllegalArgumentException e) {
e.printStackTrace();
startActivity(intent);
}
}
分析
只是用了android V4包的两个类即可实现,而且效果还特别赞,大家注意到没有,点击时有放大效果,而且还是从图片位置开始放大的,不仅如此,在退出放大图片activity时还有缩放到原来小图片位置的效果,这就是我觉得很赞的超自然效果.
最后,能学习到这些,还得感谢
《妹子》开源app:
meizhi-github地址
