Waterfall stream with descriptive text

At present, the flow of the uidesign waterfall is very popular. It seems that the Chinese Android industry, the mushroom Street is the first attempt. Later I found some places also used, such as love pictorial (http://aihuabao.cn), century jiayuan.

I think it is better to combine the two pictures and texts. The following figure is taken on the official website of love pictorial.

Not to mention, first, describe what kind of effect I want to make. The following is the effect of the web page, that is, not simply the accumulation of images, but also text descriptions under the images.

Below is a special cut-off, haha

It seems that mogujie.com In the android industry first uses waterfall streaming effects, but it seems that mogujie.com's waterfall streaming interface only has pure image effects, which is hard to see.

So I want to make the above effect in Android.

My idea is as follows:

1. Customize a fallwview.

Fallview layout:

Scrollview on the outermost layer

There is a large linearlayout in the layer, and the elements in ll_main are placed horizontally.

There are three linearlayout elements in ll_main, and the elements in each linearlayout are placed horizontally.

For this flowview, we want to dynamically set the content in the form of code, such as how many columns in the main linearlayout, which is not fixed in XML,

Instead, add the dynamic addview in the code. But I still don't know how to implement it.

2. Customize a myimage control with the above image and below instructions

Prepare some myimages, and loop addview into each linearlayou.

The capabilities are limited, and the following effect is achieved.

.

The implementation effect is still rough, let's work together !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

The following code is provided:

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. 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 ("section" + I + "Graph description"); viewlist. add (View);} if (I % 2 = 1) {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 ("section" + I + "Graph description"); viewlist. add (View) ;}} fallview FV = new fallview (this, viewlist); sv_main.addview (Fv); setcontentview (sv_main );}}

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; // custom waterfall stream control public class fallview extends linearlayout {private list <linearlayout> list; private linearlayout ll_list1; private linearlayout ll_list2; private linearlayout ll_list3; // three columns/***** @ Param context * @ Param viewlist * List of images to be displayed */Public fallview (context, list <View> viewlist) {super (context); List = new arraylist <linearlayout> (); 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 );} // Add images in each linearlayout/*** @ Param Number * Number of images in each linearlayout */private void initview (list <View> viewlist) {system. out. println (viewlist. size (); For (INT I = 0; I <viewlist. size (); I ++) {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 );}}}}

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

<?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

<? 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 = "description text"/> </linearlayout>

I tried to upload the code file but found that the attachment could not be uploaded. If you need to add Q: 893434467, please join us!