读书人

带描述文字的飞瀑流

发布时间: 2012-11-22 00:16:41 作者: rapoo

带描述文字的瀑布流

现在UI设计瀑布流很火啊,貌似国内Android界,蘑菇街上是第一个尝试的。后来我又发现了一些地方也用到了,比如爱画报(http://aihuabao.cn),世纪佳缘。

其中后面两个是图文结合的,我觉得比较好。下面就是我在《爱画报》官网上截的图。

不多说,先上图,描述下我想做个什么样的效果。下面是网页上的效果,就是不单纯的是图片的堆积,而是在图片下面还带文字说明。

下面是截图,特意截了个美女,哈哈

带描述文字的飞瀑流


貌似android业界蘑菇街最早用瀑布流效果,但感觉蘑菇街的瀑布流效果界面只有纯粹的图片效果,不好看。

于是我想在Android下也做出上面那样的效果。

我的思路是这样的:

1.自定义一个FallwView.

FallView布局:

最外层一个ScrollView

里层一个大LinearLayout, ll_main 里面的元素水平摆放

ll_main里面放三个LinearLayout,每个LinearLayout里面的元素又是水平摆放。

对于这个FlowView其实是想通过代码的方式动态设置里面的内容的 比如主LinearLayout里面有多少列子LinearLayout,不是固定写在xml里面的,

而是在代码里面动态addView进去。但还不知道怎么去实现。

2.自定义一个上面是图片下面是说明文字的MyImage的控件

准备好一些MyImage,然后循环addView进到每个LinearLayou中去。


能力有限,东拼西凑做出了下面这么个效果。

带描述文字的飞瀑流


这实现的效果还很粗糙,大家一起来完善吧!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

下面贴出代码:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical" >    <ImageView        android:id="@+id/iv_image"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/a12" />    <TextView        android:id="@+id/tv_image"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textColor="#000000"        android:textSize="14sp"        android:text="描述文字" /></LinearLayout>

本来想把代码文件上传下来,却发现传不了附件。有需要的加Q吧:893434467,欢迎一起交流!

读书人网 >移动开发

热点推荐