Android仿IOS Accordion效果_Android可折叠的手风琴效果例子
2014-11-08 13:17:00  By: shinyuu

• shinyuu
• Android开发
• 0
• 13630
• 6

由于公司项目同时出了 IOS 和 Android 的两个版本的 APP、所以在我们 Android 的 APP 上面可以看到 IOS 的影子

设计直接就给我们切一样的图了、这样高兴的设计、可以一套设计同时给 IOS 和 Android 使用

但苦了的就是我们 Android 程序员呀、很多 IOS 的特效都是自带的、使用很方便

但是我们得费尽千心万苦才可以做出一样的效果出来、而且效果也没有人家 IOS 自带的好

如上所诉、今天又遇到了同样的问题。IOS使用 Table View 实现的一个 JQuery 的 Accordion 效果

搞了很久很久才实现的、现在和大家分享一下我的成果、希望可以帮到相同需求的哥们

先来看一下最后的效果

以上效果虽然看上去很简单（使用JQuery立马就能实现、因为我以前做过很久的 WEB应用）

但是要用 Android 做出这样的效果、实现是很难呀、希望觉得不错的哥们赞一一呗

以上的的程序是通过封装一个AccordionView 的自定义 View 来实现的、可以在 Activity 里面直接调用

调用方法如下

public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);

	final AccordionView v = (AccordionView) 
		findViewById(R.id.accordion_view);

	LinearLayout ll = (LinearLayout) 
		v.findViewById(R.id.example_get_by_id);
	TextView tv = new TextView(this);
	tv.setText("Added in runtime...");
	FontUtils.setCustomFont(tv, getAssets());
	ll.addView(tv);
}

main.xml的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <com.sentaca.android.accordion.widget.AccordionView
            android:id="@ id/accordion_view"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            accordion:header_layout_fold_button_id="@id/foldButton"
            accordion:header_layout_id="@layout/accordion_header"
            accordion:header_layout_label_id="@id/foldText"
            accordion:section_bottom="@layout/accordion_footer"
            accordion:section_container="@layout/accordion_section"
            accordion:section_container_parent="@id/section_content"
            accordion:section_headers="@array/accordion_sections"
            accordion:section_visibility="@array/accordion_visibility"
            android:background="#fff5f5f5"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Item 1" />

            <LinearLayout
                android:id="@ id/example_get_by_id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Item 2" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Item 3" />
            </LinearLayout>
        </com.sentaca.android.accordion.widget.AccordionView>
    </ScrollView>
</LinearLayout>

最后给大家献上源代码的下载链接: http://dwtedx.com/download.html?bdkey=s/1bnjbLV5 密码: ynyv

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛