2. 程式人生 > >Android開發之RecyclerView實現流式佈局

Android開發之RecyclerView實現流式佈局

阿新 • • 發佈：2019-01-06

RecyclerView是什麼?

RecycleView的出現, 替代了ListView, 沒了OnitemClickListener,; LayoutManager負責計算佈局; Adapter 負責適配,還增加了ViewHolder;RecycleView只負責排程, 讓每個Item去幹他們想做的事情. 這讓事情看起來很有條例.

RecyclerView能做什麼?

我們知道RecyclerView中預設給我們提供了三種佈局管理器，分別是LinearLayoutManager、 GridLayoutManager、StaggeredGridLayoutManager。其中 StaggeredGridLayoutManager可實現交錯式網格佈局，正好可以用來實現瀑布流。

用到的技術點:

  1. Glide 圖片下載
  2. Volley聯網請求
  3. RecycleView 瀑布流
  4. SwipeRefreshLayout 下拉重新整理
  5. JSONObject 原生的 json 解析
  6. ButterKnife 進行findViewById

需要說明:

  • 我是在Fragment中實現的.
  • 我的Fragment是繼承的一個BaseFragment ,這裡就不貼程式碼了, 裡面只有一個抽象方法 getTitle()
  • 我這是在專案中遇到的點, 所以使用的不少的第三方, 如果大家只是一個簡單的流式佈局的實現, 沒有必要使用這些第三方的東西, 完全可以用原生實現.

今天我們就來實現一個簡單的瀑布流, 先來張圖

GIF.gif

主佈局

接下來我們來說下他的實現方法, 首先看 xml檔案

涉及到的下拉重新整理, 在下面將會解釋.

<android.support.v4.widget.SwipeRefreshLayout           
android:id="@+id/frag_recommend_3_swipe"               
android:layout_width="match_parent"     
android:layout_height="match_parent">   
      <android.support.v7.widget
 
.RecyclerView      
            android:id="@+id/frag_recommend_3"     
            android:layout_width="match_parent"        
            android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>
每一個item的佈局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="#cacfa1ed"
             android:padding="@dimen/padding_default_min_min">

    <ImageView
        android:id="@+id/item_frag_recommend_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:background="#4f92c9"
        android:src="@mipmap/ic_tree"/>

    <TextView
        android:id="@+id/item_frag_recommend_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:padding="@dimen/padding_default_min"
        android:text="姓名"
        android:textColor="@color/balck"
        android:maxLines="1"
        android:ellipsize="end"
        android:textSize="@dimen/txt_size_default_min_min_size"/>

</FrameLayout>
用到的實體類
 public class FragRecommend3Item {
    private String imageUrl;
    private String name;
    private String flvUrl;


    public static FragRecommend3Item createItmfromJson(JSONObject json) {
        FragRecommend3Item ret = new FragRecommend3Item();
        ret.name = json.optString("myname");
        ret.imageUrl = json.optString("smallpic");
        ret.flvUrl = json.optString("flv");
        return ret;
    }
    ...
    getter ... setter...
    ...
}
Fragment中
  1. 相應的解釋在註釋當中, 讀者有什麼迷惑的地方, 可以留言給我.
  2. 這裡解釋, 前文提到的下來重新整理, 本文以SwipeRefreshLayout為例，想要RecyclerView支援下拉重新整理，載入更多，必然要將兩者封裝到一起. 我理解的是將SwipeRefreshLayout 包含RecyclerView , 實現下拉重新整理.這個RecycleView的封裝有關, 讀者可自行查閱資料.
public class RecommendFragment3 extends BaseFragment implements FragRecommmed3Adapter.OnViewItemClickListener, SwipeRefreshLayout.OnRefreshListener {

    @BindView(R.id.frag_recommend_3)
    RecyclerView mRecyclerView;
    @BindView(R.id.frag_recommend_3_swipe)
    SwipeRefreshLayout mRefreshLayout;

    private List<FragRecommend3Item> mItems;
    private FragRecommmed3Adapter mAdapter;
    private String url = "http://live.9158.com/Room/GetHotLive_v2?lon=0.0&province=&lat=0.0&page=1&type=1";

    public RecommendFragment3() {
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View ret = inflater.inflate(R.layout.fragment_recommend_fragment3, container, false);
        ButterKnife.bind(this, ret);
        initData(ret);
        return ret;
    }

    private void initData(View ret) {
        // 設定下拉重新整理
        mRefreshLayout.setOnRefreshListener(this);

        mItems = new ArrayList<>();
      //  一開始的死資料, 測試使用
        for (int i = 0; i < 100; i++) {
            FragRecommend3Item item = new FragRecommend3Item();
            item.setImageUrl("sdf");
            item.setName("hahahhaha");
            mItems.add(item);
        }
        //  進行聯網請求資料
        getDataVolley();
        initRecycleView();
    }

    private void initRecycleView() {
        mAdapter = new FragRecommmed3Adapter(mItems, getContext());
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        mRecyclerView.setAdapter(mAdapter);
    }

// 聯網請求 Volley的使用 
    // 首先我們需要建立一個RequestQueue reqQueue，
    // 然後構建一個自己所需要的XXRequest req，之後通過reqQueue.add(req);將請求新增至請求佇列；
    private void getDataVolley() {
        mRefreshLayout.setRefreshing(true);
        final RequestQueue requestQueue = Volley.newRequestQueue(getContext());
        JsonObjectRequest request = new JsonObjectRequest(Request.Method.GET, url, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                // 新增自己的響應邏輯

              // 請求到資料之後, 清除之前的.
                mItems.clear();
                JSONArray listArray = response.optJSONObject("data").optJSONArray("list");
                int len = listArray.length();
                for (int i = 0; i < len; i++) {
                    JSONObject json = listArray.optJSONObject(i);
                    FragRecommend3Item item = FragRecommend3Item.createItmfromJson(json);
                    mItems.add(item);
                }
                mAdapter.notifyDataSetChanged();
                mRefreshLayout.setRefreshing(false);
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                // 錯誤處理
                Toast.makeText(getContext(), "聯網錯誤", Toast.LENGTH_SHORT).show();
                mRefreshLayout.setRefreshing(false);
            }
        });
        requestQueue.add(request);
    }

    @Override
    public String getTitle() {
        return "最新";
    }

    @Override
    public void setOnClickListener(View view, int position) {
        // TODO: 點選播放
        Toast.makeText(getContext(), mItems.get(position).getName(), Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onRefresh() {
        getDataVolley();
    }
介面卡
  1. 最後就是編寫介面卡了, 最後我們發現, 實現流式佈局的關鍵是 對每個item進行高度的重新隨機設定.
  2. 實現監聽事件, 定義一個介面, 在fragment中重寫相應的回撥方法.
  3. Glide聯網下載圖片的使用, 和Pisscao類似.
  public class FragRecommmed3Adapter extends RecyclerView.Adapter<FragRecommmed3Adapter.ViewHolder> {

    private List<FragRecommend3Item> mItems;
    private Context mContext;
    private OnViewItemClickListener mItemClickListener;
    private List<Integer> heights;

    public FragRecommmed3Adapter(List<FragRecommend3Item> items, Context context) {
        mItems = items;
        mContext = context;
        getRandomHeight(this.mItems);
    }


    public interface OnViewItemClickListener {
        void setOnClickListener(View view, int position);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        ViewHolder ret = null;
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_recomment_3, parent, false);
        ret = new ViewHolder(view);
        return ret;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        FragRecommend3Item item = mItems.get(position);

        ViewGroup.LayoutParams params =  holder.itemView.getLayoutParams();//得到item的LayoutParams佈局引數
        params.height = heights.get(position);//把隨機的高度賦予itemView佈局
        holder.itemView.setLayoutParams(params);//把params設定給itemView佈局

        holder.mNameTxt.setText(item.getName());
        Glide.with(mContext)
                .load(item.getImageUrl())
                // 佔位圖
                .placeholder(R.mipmap.ic_tree)
                // 載入錯誤圖
                .error(R.mipmap.ic_tree)
//                讓Glide既快取全尺寸又快取其他尺寸
//                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(holder.mImage);

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mItemClickListener != null) {
                    mItemClickListener.setOnClickListener(v, position);
                }
            }
        });

    }

    @Override
    public int getItemCount() {
        int ret = 0;
        if (mItems != null) {
            ret = mItems.size();
        }
        return ret;
    }


    public static class ViewHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.item_frag_recommend_image)
        ImageView mImage;
        @BindView(R.id.item_frag_recommend_name)
        TextView mNameTxt;
        public ViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    public void setItemClickListener(OnViewItemClickListener itemClickListener) {
        mItemClickListener = itemClickListener;
    }

    private void getRandomHeight(List<FragRecommend3Item> lists){//得到隨機item的高度
        heights = new ArrayList<>();
        for (int i = 0; i < lists.size(); i++) {
            heights.add((int)(300+Math.random()*400));
        }
    }

到這裡, 一個簡單的流式佈局就已經實現了, 感謝讀者的耐心閱讀.

相關推薦

Android開發之RecyclerView實現流式佈局

RecyclerView是什麼? RecycleView的出現, 替代了ListView, 沒了OnitemClickListener,; LayoutManager負責計算佈局; Adapter 負責適配,還增加了ViewHolder;RecycleView

android自定義View實現流式佈局

//先來一張效果圖 //自定義的控制元件 import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.

FlexboxLayoutManager+ RecyclerView實現流式佈局，樓層導航欄，摺疊導航欄，導航欄和列表聯動

好久不寫安卓相關的文章了，最近專案需要就做了一個recylerview和頂部導航欄聯動，並且導航欄要有摺疊效果，樓層效果，大體效果如下（手機錄屏，解析度不是很高） 下面來講解具體實現 一，先看佈局檔案 <?xml version="1

android 自定義view實現流式佈局

今天搞了一個流式佈局：如圖 網上也有部落格講這方面的,只是每個人實現思路不一樣,這是在網上看到一篇文章講這個,我看了下,說下這個怎麼實現原理,網上好多是直接繼承了ViewGroup,那樣的話就有個換行和計運算元view的大小.子view的排放位置,但是這個就省略了那麼多複

Android開發之玩轉FlexboxLayout佈局（可用於普通控制元件實現流式佈局，也可結合RecycleView實現流式佈局）

在這之前，我曾認真的研究過鴻洋大神的Android 自定義ViewGroup 實戰篇 -> 實現FlowLayout，按照大神的思路寫出了一個流式佈局，所有的東西都是難者不會會者不難，當自己能自定義流式佈局的時候就會覺得這東西原來很簡單了。如果各位小夥伴也看過那篇

Android UI 之 RecyclerView實現常見首頁佈局

一丶效果演示 實現功能： 1.底部tab欄，切換“首頁”，“我的” 2.頂部banner，APP常見首頁用於展示活動詳情或者近期熱門，這裡用來展示個人“CSDN” “簡書” “github” 3.中間選單欄，導航APP各模組，這裡作為後面將自學的內容模組，“Java基

Android開發之RecyclerView的互動動畫(實現拖拽和刪除)

做RecyclerView做相關的動畫效果的時候，用的最多的是v7包下的ItemTouchHelper類，這個類很強大，如有興趣的童鞋可以自行翻看原始碼，接下來我帶領大家實現RecyclerView相關的互動動畫。大家看下面的效果(拖拽和刪除)： ------------

Android開發之AIDL實現遠端服務程序通訊（IPC）

首先什麼是AIDL呢，它是Android系統中的一種介面定義語言，用於約束兩個程序間的通訊規則，供編譯器生成程式碼。 實現Android裝置上的兩個程序間通訊（IPC），程序之間的通訊資訊首先會被轉換成AIDL協議資訊，然後傳送給對方；對方接收到AIDL協議資

Android開發之RecyclerView的使用全解

轉自 http://blog.csdn.net/dmk877/article/details/50816933 之後，谷歌公司推出了RecylerView控制元件，RecylerView,我想看到一個新名詞後大部分人會首先發出一個疑問，recylervie

Android開發之Zbar實現二維碼掃描功能

前言： 在寫這篇文章之前已經寫過兩篇關於二維碼功能的文章，有興趣的可以看看——》文章1：Android開發之利用ZXing庫實現二維碼的掃描；文章2：Android開發之利用ZXing庫實現二維碼的生成，這兩篇文章中使用到的二維碼生成庫是ZXing，在本篇

二十九、Java圖形化介面設計——佈局管理器之FlowLayout（流式佈局）

         前文講解了JFrame、JPanel，其中已經涉及到了空佈局的使用。Java雖然可以以畫素為單位對元件進行精確的定位，但是其在不同的系統中將會有一定的顯示差異，使得顯示效果不盡相同，為此java提供了佈局管理器，以使編寫的圖形介面具有良好的平臺無關性。

Android開發之RecyclerView新增頭部和底部

前言：我們在使用RecyclerView的過程中其實還是有很多問題的，前面提到的沒有預設的分割線，很是讓人蛋疼啊，但現在有出了個問題，不能新增頭部和底部，這一度讓我認為這貨還是沒有最愛的ListView好用啊，哈哈，既然谷歌出來了，我們就要使用，沒有頭和腳那我們就給他造出頭

跟我學JAVA（5）圖形化介面設計——佈局管理器之FlowLayout（流式佈局）

一、佈局管理器所屬類包 所屬類包 佈局管理器名稱 說明 Java.awt FlowLayout（流式佈局） 元件按照加入的先後順序按照設定的對齊方式從左向右排列，一

Android開發之RecyclerView（一）初步使用

首先要感謝前面的大佬們的總結，給了我站在巨人肩膀上的機會。文中有不對的地方還望大佬指出，如有大佬覺的侵權的地方還望指出，鄙人將以最快速度修改！好了，話不多少了，開始開車！ 第一步：匯入RecyclerView compile 'com.android.support:re

Android開發之TabLayout實現底部導航欄

前言：既然Tablayout可以做成選項卡的導航欄，也可以做成底部導航欄的樣子，其實也就是去掉底部的indicator，把TabLayout佈局放在下面！ ------------------------分割線--------------------------- 效果圖：

100行Android程式碼自定義一個流式佈局－FlowLayout

首先來看一下 手淘HD - 商品詳情 - 選擇商品屬性 頁面的UI 商品有很多尺碼，而且展現每個尺碼所需要的View的大小也不同（主要是寬度），所以在從伺服器端拉到資料之前，展現所有尺碼所需要的行數和每一行的個數都無法確定，因此不能直接使用GridView

Android開發 之 view的幾種佈局方式及實踐

引言 通過前面兩篇： 我們對Android應用程式執行原理及佈局檔案可謂有了比較深刻的認識和理解，並且用“Hello World！”程式來實踐證明了。在繼續深入Android開發之旅之前，有必要解決前兩篇中沒有介紹的遺留問題：View的幾種佈局顯示方法，以後就不會在針對佈局方面做過多的介紹。View的佈局顯

Android學習之RecyclerView學習（實現瀑布流式佈局）

RecyclerView，大家可以通過匯入support-v7對其進行使用。  如果使用AndroidStudio開發， 需要在build.gradle中新增： compile 'com.android.support:appcompat-v7:24.2.1' com

Android開發之流式標籤佈局

1、流式佈局的特點以及應用場景    特點：當上面一行的空間不夠容納新的TextView時候，才開闢下一行的空間。主要用於關鍵詞搜尋或者熱門標籤等場景。 2、自定義ViewGroup,重點重寫下面兩個方法     (1) onMeasure:測量子view的寬高，設

Android 自定義View-----流式佈局(粗糙實現)

//首先檢視一下佈局介面吧 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app