当前位置: 代码迷 >> Android >> android学习之TransitionDrawable 兑现变化效果
  详细解决方案

android学习之TransitionDrawable 兑现变化效果

热度:78   发布时间:2016-05-01 17:10:27.0
android学习之TransitionDrawable 实现变化效果
Drawable的例子,体现出Drawable的强大功能。Android SDK中说明了Drawable主要的作用是:在XML中定义各种动画,然后把 XML当作Drawable资源来读取,通过Drawable显示动画。

下面举个使用TransitionDrawable 的例子,创建一个Android工程,然后再这个工程的基础上修改,修改过程如下:
1、去掉layout/main.xml中的TextView,增加ImagView,如下:
<ImageViewandroid:layout_width=”wrap_content”android:layout_height=”wrap_content”android:tint=”#55ff0000″android:[email protected]/my_image”/>

2、创建一个XML文件,命名为expand_collapse.xml,内容如下:
<?xml version=”1.0″ encoding=”UTF-8″?><transition xmlns:android=”http://schemas.android.com/apk/res/android”><item android:[email protected]/image_expand”/><item android:[email protected]/image_collapse”/></transition>
需要3张png图片,存放到res\drawable目录下,3张图片分别命名为:my_image.png、image_expand.png、image_collapse.png。

3、修改Activity中的代码,内容如下:
LinearLayout mLinearLayout;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mLinearLayout = new LinearLayout(this);ImageView i = new ImageView(this);i.setAdjustViewBounds(true);i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));mLinearLayout.addView(i);setContentView(mLinearLayout);Resources res = getResources();TransitionDrawable transition =(TransitionDrawable) res.getDrawable(R.drawable.expand_collapse);i.setImageDrawable(transition);ansition.startTransition(10000);}

4、如果修改的没有错误,运行程序,结果显示如下:
初始图片



过渡中的图片



最后的图片




屏幕上动画显示的是:从图片image_expand.png过渡到image_collapse.png,也就是我们在expand_collapse.xml中定义的一个transition动画。看完这个例子,你对Drawable的理解是否又深入些?这里提供这个程序的源代码,供大家下载,可以在这个例子的基础上去体会其他的Drawable,来加深对Drawable的理解。

总结说明
通过以上2个例子程序,相信对Drawable会有一定的认识了,在以后的篇幅中会介绍更多的例子,更加深入的学习和理解Drawable。具体还有哪些Drawable,大家到Android SDK去深入学习吧。



转贴至:http://www.moandroid.com/?p=784

实例:







实现上图效果:

xml部份文件:

 <SlidingDrawer       android:id="@+id/slidingdrawer"      android:layout_width="fill_parent"      android:layout_height="fill_parent"      android:orientation="horizontal"      android:handle="@+id/handle"      android:content="@+id/content">       <ImageView                android:id="@+id/handle"               android:layout_width="56dip"              android:layout_height="fill_parent"              android:background="@drawable/handle"                               android:focusable="true"              android:clickable="true"                              android:scaleType="center"                  android:src="@drawable/handle_icon"         />       <LinearLayout           android:id="@+id/content"          android:layout_width="fill_parent"          android:layout_height="fill_parent"          android:background="#778899">           <Button               android:id="@+id/button"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:text="Button"          />           <EditText               android:id="@+id/editText"              android:layout_width="fill_parent"              android:layout_height="wrap_content"          />       </LinearLayout>   </SlidingDrawer>  




hand_icon.xml

<?xml version="1.0" encoding="utf-8"?><transition xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/ic_tray_expand"  />    <item android:drawable="@drawable/ic_tray_collapse"  /></transition>



hand.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/tray_handle_normal" />    <item android:state_pressed="true" android:drawable="@drawable/tray_handle_pressed" />    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/tray_handle_selected" />    <item android:state_enabled="true" android:drawable="@drawable/tray_handle_normal" />    <item android:state_focused="true" android:drawable="@drawable/tray_handle_selected" /></selector>


代码部份:

 
mDrawer = (SlidingDrawer) findViewById(R.id.slidingdrawer);  final SlidingDrawer drawer = mDrawer;  mLinearLayout = (LinearLayout) drawer.getContent();  final LinearLayout grid = mLinearLayout;   mImageView = (ImageView) drawer.findViewById(R.id.handle);  mHandleIcon = (TransitionDrawable) mImageView.getDrawable();  mHandleIcon.setCrossFadeEnabled(true);   final DrawerManager drawerManager = new DrawerManager();  drawer.setOnDrawerOpenListener(drawerManager);  drawer.setOnDrawerCloseListener(drawerManager);  drawer.setOnDrawerScrollListener(drawerManager); private class DrawerManager implements SlidingDrawer.OnDrawerOpenListener,   SlidingDrawer.OnDrawerCloseListener,   SlidingDrawer.OnDrawerScrollListener {  private boolean mOpen;  public void onDrawerOpened() {   Log.v(tag, "onDrawerOpened");   if (!mOpen) {    mHandleIcon.reverseTransition(150);    mOpen = true;   }  }  private void offsetBoundsToDragLayer(Rect bounds, View view) {   view.getDrawingRect(bounds);   Log.v(tag, "offsetBoundsToDragLayer");  }  public void onDrawerClosed() {   Log.v(tag, "onDrawerClosed");   if (mOpen) {    mHandleIcon.reverseTransition(150);    mOpen = false;   }  }  public void onScrollStarted() {   if (PROFILE_DRAWER) {    android.os.Debug.startMethodTracing("/sdcard/launcher-drawer");   }  }  public void onScrollEnded() {   if (PROFILE_DRAWER) {    android.os.Debug.stopMethodTracing();   }  } }
  相关解决方案