1. 程式人生 > >android瀑布流效果(仿蘑菇街)

android瀑布流效果(仿蘑菇街)

我們還是來看一款示例:(蘑菇街)  

                

 看起來很像我們的gridview吧,不過又不像,因為item大小不固定的,看起來是不是別有一番風味,確實如此.就如我們的方角圖形,斯通見慣後也就出現了圓角.下面我簡單介紹下實現方法.

第一種:

我們在配置檔案中定義好列數.如上圖也就是3列.我們需要定義三個LinearLayout,然後把獲取到的圖片add裡面就ok了.

main.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent"
  5.     android:background="@android:color/background_light"
  6.     android:orientation="vertical" >  
  7.     <include  
  8.         android:id="@+id/progressbar"
  9.         layout="@layout/loading" />  
  10.     <com.jj.waterfall.LazyScrollView  
  11.         android:id="@+id/lazyscrollview"
  12.         android:layout_width="fill_parent"
  13.         android:layout_height="fill_parent"
  14.         android:layout_weight="1"
  15.         android:scrollbars="@null" >  
  16.         <LinearLayout  
  17.             android:layout_width="fill_parent"
  18.             android:layout_height="fill_parent"
  19.             android:background="@android:color/background_light"
  20.             android:orientation="horizontal"
  21.             android:padding="2dp" >  
  22.             <LinearLayout  
  23.                 android:id="@+id/layout01"
  24.                 android:layout_width="fill_parent"
  25.                 android:layout_height="fill_parent"
  26.                 android:layout_weight="1"
  27.                 android:orientation="vertical" >  
  28.             </LinearLayout>  
  29.             <LinearLayout  
  30.                 android:id="@+id/layout02"
  31.                 android:layout_width="fill_parent"
  32.                 android:layout_height="fill_parent"
  33.                 android:layout_weight="1"
  34.                 android:orientation="vertical" >  
  35.             </LinearLayout>  
  36.             <LinearLayout  
  37.                 android:id="@+id/layout03"
  38.                 android:layout_width="fill_parent"
  39.                 android:layout_height="fill_parent"
  40.                 android:layout_weight="1"
  41.                 android:orientation="vertical" >  
  42.             </LinearLayout>  
  43.         </LinearLayout>  
  44.     </com.jj.waterfall.LazyScrollView>  
  45.     <TextView  
  46.         android:id="@+id/loadtext"
  47.         android:layout_width="fill_parent"
  48.         android:layout_height="wrap_content"
  49.         android:background="@drawable/loading_bg"
  50.         android:gravity="center"
  51.         android:padding="10dp"
  52.         android:text="Loading..."
  53.         android:textColor="@android:color/background_dark" />  
  54. </LinearLayout>  

在這裡因為圖片很多就把圖片放在assets檔案中,如果想從網上拉取資料,自己寫額外部分.

  1. @Override
  2.     publicvoid onCreate(Bundle savedInstanceState) {  
  3.         super.onCreate(savedInstanceState);  
  4.         InitView();  
  5.         assetManager = this.getAssets();  
  6.         // 獲取顯示圖片寬度
  7.         Image_width = (getWindowManager().getDefaultDisplay().getWidth() - 4) / 3;  
  8.         try {  
  9.             image_filenames = Arrays.asList(assetManager.list("images"));// 獲取圖片名稱
  10.         } catch (IOException e) {  
  11.             e.printStackTrace();  
  12.         }  
  13.         addImage(current_page, count);  
  14.     }  
  1. /*** 
  2.      * 載入更多 
  3.      *  
  4.      * @param current_page 
  5.      *            當前頁數 
  6.      * @param count 
  7.      *            每頁顯示個數 
  8.      */
  9.     privatevoid addImage(int current_page, int count) {  
  10.         for (int x = current_page * count; x < (current_page + 1) * count  
  11.                 && x < image_filenames.size(); x++) {  
  12.             addBitMapToImage(image_filenames.get(x), y, x);  
  13.             y++;  
  14.             if (y >= 3)  
  15.                 y = 0;  
  16.         }  
  17.     }  



  1. /*** 
  2.      * 新增imageview 到layout 
  3.      *  
  4.      * @param imagePath 圖片name 
  5.      * @param j 列 
  6.      * @param i 行 
  7.      */
  8.     publicvoid addBitMapToImage(String imagePath, int j, int i) {  
  9.         ImageView imageView = getImageview();  
  10.         asyncTask = new ImageDownLoadAsyncTask(this, imagePath, imageView,  
  11.                 Image_width);  
  12.         asyncTask.setProgressbar(progressbar);  
  13.         asyncTask.setLoadtext(loadtext);  
  14.         asyncTask.execute();  
  15.         imageView.setTag(i);  
  16.         if (j == 0) {  
  17.             layout01.addView(imageView);  
  18.         } elseif (j == 1) {  
  19.             layout02.addView(imageView);  
  20.         } elseif (j == 2) {  
  21.             layout03.addView(imageView);  
  22.         }  
  23. 相關推薦

    android瀑布效果仿蘑菇

    我們還是來看一款示例:(蘑菇街)                     看起來很像我們的gridview吧,不過又不像,因為item大小不固定的,看起來是不是別有一番風味,確實如此.就如我們的方角圖形,斯通見慣後也就出現了圓角.下面我簡單介紹下實現方

    android 瀑布效果(仿蘑菇)

    我們還是來看一款示例:(蘑菇街)                     看起來很像我們的gridview吧,不過又不像,因為item大小不固定的,看起來是不是別有一番風味,確實如此.就如我們的方角圖形,斯通見慣後也就出現了圓角.下面我簡單介紹下實

    android 瀑布效果(仿蘑菇) .

    我們還是來看一款示例:(蘑菇街)                     看起來很像我們的gridview吧,不過又不像,因為item大小不固定的,看起來是不是別有一番風味,確實如此.就如我們的方角圖形,斯通見慣後也就出現了圓角.下面我簡單介紹下實現方

    android自定義ProgressBar仿淘寶的載入效果

    三種方式實現自定義圓形頁面載入中效果的進度條 To get a ProgressBar in the default theme that is to be used on white/light back ground, use one of the inverse st

    Android 使用RecyclerView實現仿微信的聯絡人A-Z字母排序和過濾搜尋功能

    之前做專案的時候遇到一個需求是實現品牌的字母排序功能,網上的資料很多,但是有一部分有bug,這篇文章是我學習和解決部分bug之後的總結。今天帶來的是RecyclerView的A-Z字母排序和過濾搜尋功能。 首先上效果圖: 重點:1、實現資料排序分類 2、

    Android跑馬燈效果動畫橫向移動

    Android 跑馬燈效果是通過TextView來實現的,前提是TextView顯示的內容必須超過TextView控制元件分配的寬度,並且保證TextView裡面的內容是單行顯示,TextView必須獲得焦點,也即設定 android:focusable="true",最

    android正在載入效果自定義view

    好久沒有寫部落格了,最近實習的公司在趕專案,現在比較清閒,趁現在寫寫部落格,總結一下自己在實習的時候學到的知識(然而這個demo並不是公司學到的,並沒有什麼卵用),先上效果圖吧,這個實現還是比較簡單的,當時做這個的想法是因為某客學院的正在載入的效果還不錯,所以嘗

    Android 仿蘑菇列表彈出和瀑布 ScrollView+RelativeLayout實現

    之前看到用線性佈局寫的瀑布流,覺得不大好,自己想了另外一種方案, (最近發現用 網頁實現瀑布流 再用WebView載入才能完美實現效果) 原理使用RelativeLayout任意定位位置  核心方法 private void addViewByMargins(Re

    Android 解決RecyclerView瀑布效果結合Glide使用時圖片變形的問題

    變形 into 想要 pla enter glide加載圖片 pan etc clas 問題描述:使用Glide加載RecyclerView的Item中的圖片,RecyclerView使用了瀑布流展示圖片,但是滾動時圖片會不斷的加載,並且大小位置都會改變,造成顯示錯亂。

    android 仿 新聞閱讀器 選單彈出效果附原始碼DEMO

    開發中碰到問題之後實現的,覺得可能有的開發者用的到或則希望獨立成一個小功能DEMO,所以就放出來這麼一個DEMO。 原本覺得是最後完成後髮網站客戶端的,可是這樣體現不出一個功能一個功能的分析實現效果,而且週期時間長,所以就完成一部分,發一部分,敬請諒解。 下面的選單彈出

    Android中利用RecyclerView實現瀑布效果

    RecyclerView相比於傳統的ListView,功能更加強大,使用也比較方便,因此Android官方更加推薦使用RecycleView,未來也會有更多的程式逐漸從ListView轉向RecycleView。為此,首先先來了解下RecycleView的用法。當然,最先看

    複雜RecyclerView的實現新增底部瀑布效果

    言歸正傳,我們首先來看看實現的效果: 這篇文章主要講的是底部瀑布流的實現,如果對於上面的佈局存在疑問的話,請轉移我的另一篇部落格: 言歸正傳: 看到這種效果圖的第一反應便是,臥槽,這什麼鬼,佈局太複雜了。 這種反應很正常,因為木有從一個巨集觀的角度去分析問題。依據之

    Android 瀑布照片牆讓更多的人用到更好的框架

    今天想做個瀑布流,網上找了一圈,只找到這個可以點選看大圖的框架,就拿來用了一下,效果還不錯,推薦給大家,我們只是大自然的搬用工,讓更多的人用到更好的框架,節省程式猿們的時間,誰有好的也可以給我推薦推薦,記著,我們只是大自然的搬運工。 源文出處:http://b

    Android使用Recycler View實現瀑布效果

    下圖是淘寶上瀑布流的一個應用場景,今天我們就來用Recycler View實現以下瀑布流效果 一:建立Activity activity中 核心程式碼為 mRvPu.setLayoutManager(new StaggeredGridLayoutManager(2,

    用jquery實現仿蘑菇導航固定頂部的效果

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

    【安卓-自定義佈局】安卓App開發思路 一步一個腳印實現自定義滾動的新聞條目上下滾動-仿蘑菇

    實現自定義滾動的新聞條目上下滾動-仿蘑菇街       這種上下滾動的自定義佈局,就像是公告那種上下的翻滾,一般為文字的滾動,很明顯,就是自定義佈局,一般是線性佈局。這裡提到的安卓原生的控制元件自然是

    Android 自定義通訊錄仿Ios反彈效果+模糊搜尋+檢視手機通訊錄+拉伸導航條

           現在很多手機APP都用到通訊錄功能,在通訊錄的基礎上新增好友,查詢好友,獲取哪些好友和自己在玩同一款APP,這就需要去獲取手機通訊好友資訊,並把這些資訊展示出來!這些就需要列表展示通訊錄好友。但發現Android手機的通訊錄效果比Ios效果差很多,

    Android自定義控件StaggeredGridView-瀑布效果的GridView

    eight base raw cells 不出 layout near 解決 p s 我們知道谷歌keep在顯示記事的時候可以多列顯示,但是跟國內很多應用不同,它的記事之間高度是隨機的,效果如下: 因為之前沒有用過GridView,但是知道GridVi

    【前端】用jQuery實現瀑布效果

    scrollto title n) 個性 避免 ive gets type turn jQuery實現瀑布流效果 何為瀑布流:   瀑布流,又稱瀑布流式布局。是比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊並附加

    Android------Button 添加聲音效果兩種方式

    div abs 一次 播放 pool 當前 傳送門 ide col 我在先前的案例《Android 的底部導航欄 BottomNavigationBar》中添加以底部 的4個按鈕切換添加聲音 下來看看案例效果圖 使用添加依賴 comp