如何使用ClipDrawable实现ImageView图片切换动画
2017-03-11 00:28
531 查看
加上PaintDrawable那一篇,本篇就是介绍Drawable的第四篇blog了,ClipDrawable中有一个很实用的方法(个人觉得很好用)————那就是setLevel(),通过这个方法,可以设置drawable显示的部分大小,如果设置为0,就是完全不显示,设置为10000就是完全显示 。感觉是不是与ProgressBar有点像呀,其实你完全可以用它来实现一个自己的progressBar,不过在这边博客里就不做介绍了。
还是先看一下效果吧!
看一下主布局文件(其实也没有啥好看的):
再看一下drawable文件:
接下来就是activity文件了:
java文件写的比较冗余啊,不要喷我!!
稍微解释下,在clip这个标签中有三个属性,分别是drawable、gravity和clipOrientation。
其中drawable肯定就是代表要加载的drawable资源嘛,gravity则代表了drawable在显示不全的情况下,最先显示出来的位置,clipOrientation则代表不断裁剪显示的方向。具体使用可以根据我提供的代码自己试一下,这样感触更深呀!!
在使用ImageView的时候,如果你也像我一样处理图片切换,一定要设置scaleType这个属性,不然的话背景总是会比显示的图片大一点(估计就跟设置桌面没有设置为填充模式一样),这样切换回显得很别扭。
本文的图片切换是选择从中心向四周扩散,其实你也可以选择其他方式,比如从左边向右边,上边向下边等等,对了,还有从四周向中心。这个跟现在实现的方式刚好反过来了,要把将要显示的图片设置为背景,然后不断减小imageview中图片的level,直至为0,然后从新将背景中的drawable设置ImageView中要显示的图片。
当然也可以通过前景来操作,具体的就不细说了,想玩的小伙伴可以自己在代码中试一下!!!
好了关于ClipDrawable就说这么多了,想要看更多关于drawable基本用法的小伙伴可以关注我的博客,我将持续更新!!!!
接下来,将向介绍LevelListDrawable和PictureDrawable,希望可以帮到您一下小忙!!!
下面是我的个人公众号,如果可以的话,还麻烦您帮忙关注一下,这将是对我最大的鼓励,谢谢!!!
代码地址:
代码存放在我的git仓库中,需要的小伙伴可以直接git clone,仓库中的代码比较杂乱,小心哦!!!!
还是先看一下效果吧!
看一下主布局文件(其实也没有啥好看的):
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.clipandpaintdrawable.MainActivity"> <ImageView android:layout_centerHorizontal="true" android:id="@+id/iv" android:layout_width="300dp" android:layout_height="400dp" android:padding="0dp" android:src="@drawable/clip_drawable" android:scaleType="fitXY"/> <Button android:gravity="center" android:id="@+id/btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/iv" android:layout_marginTop="3dp" android:onClick="changeImageView" android:text="@string/set_image" /> <Button android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/btn" android:layout_marginTop="3dp" android:onClick="changeImage" android:text="@string/change_image" /> </RelativeLayout>
再看一下drawable文件:
<?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="center_horizontal|center_vertical" android:clipOrientation="horizontal|vertical" android:drawable="@drawable/first"> </clip>
接下来就是activity文件了:
package com.example.clipandpaintdrawable; import android.graphics.drawable.ClipDrawable; import android.net.Uri; import android.os.CountDownTimer; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Gravity; import android.view.View; import android.widget.ImageView; import com.google.android.gms.appindexing.Action; import com.google.android.gms.appindexing.AppIndex; import com.google.android.gms.appindexing.Thing; import com.google.android.gms.common.api.GoogleApiClient; public class MainActivity extends AppCompatActivity { private static final int CHANGE_LEVEL = 99; private ImageView iv; private ClipDrawable mClipDrawable; private boolean isExpand = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv = (ImageView) findViewById(R.id.iv); mClipDrawable = (ClipDrawable) iv.getDrawable(); mClipDrawable.setLevel(10); } public void changeImageView(View view) { if (!isExpand) { isExpand = true; final Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); if (msg.what == CHANGE_LEVEL) { int level = mClipDrawable.getLevel() + 50; if (level >= 10000) { level = 10000; } mClipDrawable.setLevel(level); } } }; final CountDownTimer timer = new CountDownTimer(Integer.MAX_VALUE, 10) { @Override public void onTick(long millisUntilFinished) { if (mClipDrawable.getLevel() >= 10000) { this.onFinish(); } else { mHandler.sendEmptyMessage(99); } } @Override public void onFinish() { isExpand = false; } }; timer.start(); } } public void changeImage(View view) { if (iv.getDrawable() != null) { iv.setBackground(iv.getDrawable()); } final ClipDrawable imageDrawable = new ClipDrawable(getResources().getDrawable(R.drawable.second), Gravity.TOP | Gravity.START, ClipDrawable.VERTICAL); iv.setImageDrawable(imageDrawable); imageDrawable.setLevel(10); if (!isExpand) { isExpand = true; final Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); if (msg.what == CHANGE_LEVEL) { int level = imageDrawable.getLevel() + 50; if (level >= 10000) { level = 10000; } imageDrawable.setLevel(level); } } }; final CountDownTimer timer = new CountDownTimer(Integer.MAX_VALUE, 10) { @Override public void onTick(long millisUntilFinished) { if (imageDrawable.getLevel() >= 10000) { this.onFinish(); } else { mHandler.sendEmptyMessage(99); } } @Override public void onFinish() { isExpand = false; } }; timer.start(); } } }
java文件写的比较冗余啊,不要喷我!!
稍微解释下,在clip这个标签中有三个属性,分别是drawable、gravity和clipOrientation。
其中drawable肯定就是代表要加载的drawable资源嘛,gravity则代表了drawable在显示不全的情况下,最先显示出来的位置,clipOrientation则代表不断裁剪显示的方向。具体使用可以根据我提供的代码自己试一下,这样感触更深呀!!
在使用ImageView的时候,如果你也像我一样处理图片切换,一定要设置scaleType这个属性,不然的话背景总是会比显示的图片大一点(估计就跟设置桌面没有设置为填充模式一样),这样切换回显得很别扭。
本文的图片切换是选择从中心向四周扩散,其实你也可以选择其他方式,比如从左边向右边,上边向下边等等,对了,还有从四周向中心。这个跟现在实现的方式刚好反过来了,要把将要显示的图片设置为背景,然后不断减小imageview中图片的level,直至为0,然后从新将背景中的drawable设置ImageView中要显示的图片。
当然也可以通过前景来操作,具体的就不细说了,想玩的小伙伴可以自己在代码中试一下!!!
好了关于ClipDrawable就说这么多了,想要看更多关于drawable基本用法的小伙伴可以关注我的博客,我将持续更新!!!!
接下来,将向介绍LevelListDrawable和PictureDrawable,希望可以帮到您一下小忙!!!
下面是我的个人公众号,如果可以的话,还麻烦您帮忙关注一下,这将是对我最大的鼓励,谢谢!!!
代码地址:
代码存放在我的git仓库中,需要的小伙伴可以直接git clone,仓库中的代码比较杂乱,小心哦!!!!
相关文章推荐
- Android中使用imageviewswitcher 实现图片切换轮播导航的方法
- iOS开发使用sdWebImage实现对tableView的cell加载图片淡入动画
- Android中使用ImageViewSwitcher实现图片切换轮播导航效果
- Android中使用ImageViewSwitcher实现图片切换轮播导航效果
- 使用GridView和ImageView组件实现图片显示效果
- Android中如何使用rotate实现图片不停旋转的效果与动画的停止
- Android成长日记-使用ViewFlipper实现屏幕切换动画效果
- 使用viewpager嵌套实现上下左右滑动切换图片
- 1.在写TextView 和ImageView 使用Selector切换字体颜色和图片的时候遇到定义的selector无效?
- Android之ViewFlipper实现手动+自动切换图片(附加动画效果)
- Android:使用ViewPager实现左右滑动切换图片(图上有点点)
- ImageView的使用,实现本地图片的适屏显示和裁剪功能。
- Android学习笔记:使用ViewPager组件实现图片切换
- iOS为imageView添加图片实现动画
- 为imageView添加图片实现动画
- iOS为imageView添加图片实现动画
- cocos2d中如何使用图片纹理图集的加载来实现一个动画的功能
- 使用ViewPager实现图片左右切换(有实心和空心和TextView随图片改变而改变)
- Android入门(34)——第十一章 使用ViewFlipper实现屏幕切换动画效果
- 使用sdWebImage实现对tableView的cell加载图片淡入淡出效果