程序猿媛五:ViewAnimator多级动态标题栏

ViewAnimator多级动态标题栏

声明:博文为原创,文章内容为,效果展现,思路阐述,及代码片断。

    转载请保留原文出处“http://my.oschina.net/gluoyer/blog”,谢谢!php

    您能够到博客的“友情连接”中,“程序猿媛(最新下载)*.*”下载最新版本,持续更新!当前版本,也可直接点击“当前1.4版本”下载。java

 

    本文介绍,经过ViewAnimator动态切换,将自定义标题栏中的功能按钮,分类、分层次显示。android

    固然,博文阐述的是一种展示模式,请根据实际状况,灵活应用。ide

   首先,看下实现效果:布局

d01 d02 d03 d04

    效果简述:进入后点击“设置”,动画效果向下切入显示二级栏;点击“返回”,动画向上切回主栏。动画

    功能实现,主要如下几步:this

  •     布局中的ViewAnimator;
  •     管理层级间的切换关系;
  •     设置切换动画。

布局中的ViewAnimator

 

<ViewAnimator
    android:id="@+id/title_bar_switcher"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
<LinearLayout
	android:id="@+id/title_bar_main"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center_vertical"
	android:background="#a0a00aa0">
    <Button
        android:id="@+id/title_bar_switch_sec_tk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/str_title_bar_btn_to_sec_tk" />
    <Button
        android:id="@+id/title_bar_switch_sec_class"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/str_title_bar_btn_to_sec_class" />
    <Button
        android:id="@+id/title_bar_switch_sec_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/str_title_bar_btn_to_sec_set" />
</LinearLayout>

<include
    android:id="@+id/title_bar_sec_set"
    layout="@layout/title_bar_ani_set" />

<include
    android:id="@+id/title_bar_sec_class"
    layout="@layout/title_bar_ani_class" />

<include
    android:id="@+id/title_bar_sec_tk"
    layout="@layout/title_bar_ani_tk" />

</ViewAnimator>

    为了方便观看其关系,将二级栏单独提取出去,经过include包含进来的。.net

    经过布局能够看出,在ViewAnimator中,能够直接将各子项放置其中:3d

    title_bar_main对应的就是主栏,截图也能够看到,它包含“设置”、“分类”“三国”三个按钮,点击分别对应显示下面include的三组布局。以截图最后一张显示为例:点击“设置”后,动画切入显示title_bar_sec_set对应包含的布局。code

管理层级间的切换关系

    首先,定义了enum类型,以及该类型的成员变量:

enum TopBarMode {Main, Set, Class, Tk};
private TopBarMode mTopBarMode = TopBarMode.Main;

    这样,咱们就能够记录到当前栏所处的状态了。

    切换操做是经过ViewAnimator提供的方法setDisplayedChild(…)实现的。好比,点击“设置”按钮进行切换是,就能够调用以下方法:

private void toSecSet() {
	if(TopBarMode.Set != mTopBarMode) {
		// 更新状态,切换显示栏
		mTopBarMode = TopBarMode.Set;
		mBarSwitcher.setDisplayedChild(mTopBarMode.ordinal());
		// 动画设置,下一节介绍
		mSafeAnimator.startVisibleAnimator(this, mSecSet, R.anim.slide_top_in);
		mSafeAnimator.startInvisibleAnimator(this, mMain, R.anim.slide_bottom_out);
	}
}

设置切换动画

    为了增长切换的效果,一般,咱们都是加入过渡动画的。

    我习惯上是经过xml文件设置动画,因此,这里添加了一个SafeAnimator.java文件,也就是前面toSecSet()方法中,mSafeAnimator变量的类型。简单加入了两个方法:

  •     startInvisibleAnimator,动画显示后,设置视图不可见。
  •     startVisibleAnimator,动画显示后,设置视图可见。

主要经过Animation开始视图的动画,并设置监听,在动画开始和结束阶段,设置视图的可见性; 详见源码,不赘述!

 

    OK,That's all! 源码能够经过应用,点击截图中底部显示的“关于做者及源码下载按钮获取,谢谢!

 

转载请保留地址出处“http://my.oschina.net/gluoyer/blog/178560”,谢谢!

您能够到博客的“友情连接”中,“程序猿媛(最新下载)*.*”下载最新版本,持续更新!当前版本,也可直接点击“当前1.4版本”下载

相关文章
相关标签/搜索