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

ViewAnimator多级动态标题栏

声明：博文为原创，文章内容为，效果展示，思路阐述，及代码片段。

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

    您可以到博客的“友情链接”中，“程序猿媛（最新下载）*.*”下载最新版本，持续更新！当前版本，也可直接点击“当前1.4版本”下载。

 

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

    当然，博文阐述的是一种展现模式，请根据实际情况，灵活应用。

   首先，看下实现效果：

   

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

    功能实现，主要以下几步：

•     布局中的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包含进来的。

    通过布局可以看出，在ViewAnimator中，可以直接将各子项放置其中：

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

管理层级间的切换关系

    首先，定义了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版本”下载