1. 首页
  2. 文章中心
  3. 移动开发

带描述文字的瀑布流

107 阅读 0 评论
我是靠谱客的博主 满意月亮，这篇文章主要介绍带描述文字的瀑布流，现在分享给大家，希望可以做个参考。

现在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中去。


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

。


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

下面贴出代码：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package com.tomyzhou.pull;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.ScrollView;
import android.widget.TextView;

public class FallDemoActivity extends Activity {
	private ScrollView sv_main;  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        	
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         sv_main = new ScrollView(this);
         
         List<View> viewList = new ArrayList<View>();
         for(int i = 0;i<60;i++){
        	 if(i%2 == 0){
        		 View view = View.inflate(this,R.layout.myimage,null);
        		 ImageView iv_image = (ImageView) view.findViewById(R.id.iv_image);
        		 iv_image.setImageResource(R.drawable.a1);
        		 TextView tv_image = (TextView) view.findViewById(R.id.tv_image);
        		 tv_image.setText("第"+i+"个图的描述");
        		 viewList.add(view);
        	 }if(i%2 == 1){
        		 View view = View.inflate(this,R.layout.myimage,null);
        		 ImageView iv_image = (ImageView) view.findViewById(R.id.iv_image);
        		 iv_image.setImageResource(R.drawable.a14);
        		 TextView tv_image = (TextView) view.findViewById(R.id.tv_image);
        		 tv_image.setText("第"+i+"个图的描述");
        		 viewList.add(view);
        	 }
         }
         
         FallView fv = new FallView(this, viewList);
         sv_main.addView(fv);
         setContentView(sv_main);
         
    }
}


复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
package com.tomyzhou.pull;

import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

import android.content.Context;
import android.graphics.Canvas;
import android.view.View;
import android.widget.LinearLayout;

//自定义瀑布流控件
public class FallView extends LinearLayout {

	private List<LinearLayout> list;
	private LinearLayout ll_list1;
	private LinearLayout ll_list2;
	private LinearLayout ll_list3; // 三列

	/**
	 * 
	 * @param context
	 * @param viewList
	 *            需要显示的图片列表
	 */
	public FallView(Context context, List<View> viewList) {
		super(context);
		list = new ArrayList<LinearLayout>();
		View view = View.inflate(context, R.layout.layout_fall, this);

		ll_list1 = (LinearLayout) view.findViewById(R.id.ll_list1);
		ll_list2 = (LinearLayout) view.findViewById(R.id.ll_list2);
		ll_list3 = (LinearLayout) view.findViewById(R.id.ll_list3);

		initView(viewList);
	}

	// 添加每个LinearLayout里面的图片
	/**
	 * @param number
	 *            每个LinearLayout里面Image的个数
	 */
	private void initView(List<View> viewList) {
		System.out.println(viewList.size());
		for (int i = 0; i < viewList.size(); i++) {
			View view = viewList.get(i);
			if (i % 3 == 0) {
				ll_list1.addView(view);
			}
			if (i % 3 == 1) {
				ll_list2.addView(view);
			}
			if (i % 3 == 2) {
				ll_list3.addView(view);
			}
		}
	}

}

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.tomyzhou.pull;

import android.content.Context;
import android.view.View;

public class MyImage extends View{

	public MyImage(Context context) {
		super(context);
	}

	
}


main.xml

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/ll_list1"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#aaaaaa"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_list2"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#aaaaaa"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_list3"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#aaaaaa"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>


myimage
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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，欢迎一起交流！

最后

以上就是满意月亮最近收集整理的关于带描述文字的瀑布流的全部内容，更多相关带描述文字内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(71)

相关文章

微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果
小程序瀑布流组件:支持翻页与图片懒加载
小程序瀑布流组件:支持翻页与图片懒加载
SSM框架的科普有毒蘑菇网站系统源码+数据库+完整安装视频视频效果系统说明环境需要技术栈使用说明运行截图 用户管理控制层:管理员管理控制层:修改密码业务逻辑:通用管理模块:
SSM框架的科普有毒蘑菇网站系统源码+数据库+完整安装视频视频效果系统说明环境需要技术栈使用说明运行截图 用户管理控制层:管理员管理控制层:修改密码业务逻辑:通用管理模块:
Js禁止视频快进
Js禁止视频快进
带描述文字的瀑布流
带描述文字的瀑布流
Android 结合GSYVideoPlayer视频在列表里面自动播放
Android 结合GSYVideoPlayer视频在列表里面自动播放
安卓仿蘑菇街瀑布流demo
安卓仿蘑菇街瀑布流demo
Android学习之RecylerView完美实现瀑布流效果
Android学习之RecylerView完美实现瀑布流效果

评论列表共有 0 条评论

立即
投稿
返回
顶部