RecyclerView多佈局的簡單實現

一、在做項目時，我們經常會遇到如下面的 

            

在一個窗口中，不同行的佈局不同，有的是一行一個條目，有的是一行兩個條目，還有四個的，還有更多，這裏是數量不同，還有的是不同行裏條目數量相同而佈局不同，都可以用recyclerview的多佈局來實現，下面就簡單實現佈局和數量都不同的recycle人view的多佈局實例

1、使用recyclerview要到包

    在gradle添加這個依賴同步就行

       compile 'com.android.support:recyclerview-v7:24.2.1'

2、在mainactivity的xml佈局裏直接寫上recyclerview，如下

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.dc.recyclerviewtext.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recy"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

3、在mainactivity裏findViewById找到這個控件mainactivity代碼如下：

 

public class MainActivity extends AppCompatActivity {
    protected RecyclerView mRecy;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_main);
        initView();
        initData();
    }
    private void initData() {
        //下面的4代表的一行的size是4
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 4);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            //返回position對應的條目所佔的size
            @Override
            public int getSpanSize(int position) {
                if (position < 4)
                    //這裏返回4，指的是當position滿足上面條件時，一個條目佔得size是4
                    //也就是說這個條目佔一行，因爲上面設置的一行的size是4
                    return 4;
                else if (3 <= position && position < 6)
                    //這裏返回2，指的是當position滿足上面條件時，一個條目佔得size是2
                    // 也就是說這個條目佔半行，因爲上面設置的一行的size是4
                    return 2;
                else
                    //這裏返回1，指的是當position滿足上面條件時，一個條目佔得size是1
                    // 也就是說這個條目佔1/4行，因爲上面設置的一行的size是4
                    return 1;
            }
        });
        //用來添加分割線
        //mRecy.addItemDecoration();
        //設置管理
        mRecy.setLayoutManager(gridLayoutManager);
        MyRecyclerAdapter adapter = new MyRecyclerAdapter();
        //設置適配器
        mRecy.setAdapter(adapter);
    }
    private void initView() {
        mRecy = (RecyclerView) findViewById(R.id.recy);
    }
}

4、下面是適配器

 

public class MyRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    /*上面的ViewHolder是這個適配器必要的泛型，必須有。佈局裏有幾種Type，下面就要寫幾個自定義的
    ViewHlder，這些自定義的ViewHolder都要繼承於RecyclerView.ViewHolder。*/
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = null;
        RecyclerView.ViewHolder viewHolder = null;
        //根據viewType生成viewHolder
        switch (viewType) {
            case 0:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_type1, null);
                viewHolder = new VH(view);
                break;
            case 1:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_type2, null);
                viewHolder = new VH1(view);
                break;
            case 2:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_type3, null);
                viewHolder = new VH2(view);
                break;
        }
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
        //根據條目的類型給holder中的控件填充數據
        int itemViewType = getItemViewType(position);
        switch (itemViewType) {
            case 0:
                VH vh = (VH) holder;
                vh.mTextView.setText("類型1");
                break;
            case 1:
                VH1 vh1 = (VH1) holder;
                vh1.mTextView.setText("類型2");
                vh1.mImageView.setImageResource(R.drawable.a);
                break;
            case 2:
                VH2 vh2 = (VH2) holder;
                vh2.mTextView.setText("類型3");
                break;
        }
    }

    @Override
    public int getItemCount() {
        //獲取條目數，模擬數據，這裏是寫死的
        return 30;
    }

    @Override
    public int getItemViewType(int position) {
        //跟據position對應的條目返回去對應的樣式（Type）
        if (position < 4) {
            return 0;
        } else if (4 <= position && position < 6) {
            return 1;
        } else return 2;
    }
}

5、這裏寫幾個簡單的ViewHolder

第一個ViewHolder

public class VH extends RecyclerView.ViewHolder {
    TextView mTextView;
    public VH(View itemView) {
        super(itemView);
        mTextView = (TextView) itemView.findViewById(R.id.tv_type1);
    }
}

其xml佈局爲

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="160dp"
              android:background="#8c8a4b"
              android:orientation="vertical"
              android:padding="10dp">
    <TextView
        android:id="@+id/tv_type1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:gravity="center"
        android:textColor="#2c602c"
        android:textSize="18sp"/>
</LinearLayout>

第二個ViewHolder

public class VH1 extends RecyclerView.ViewHolder {
    ImageView mImageView;
    TextView mTextView;
    public VH1(View itemView) {
        super(itemView);
        mImageView= (ImageView) itemView.findViewById(R.id.iv_type2);
        mTextView= (TextView) itemView.findViewById(R.id.tv_type2);
    }
}

其xml佈局爲

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="#5fb5c4"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:id="@+id/tv_type2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center_horizontal"
        android:textColor="#687c3d"
        android:textSize="18sp" />

    <ImageView
        android:id="@+id/iv_type2"
        android:layout_width="match_parent"
        android:layout_height="80dp" />
</LinearLayout>

 

第三個ViewHoler

 

public class VH2 extends RecyclerView.ViewHolder {
    TextView mTextView;
    public VH2(View itemView) {
        super(itemView);
        mTextView= (TextView) itemView.findViewById(R.id.tv_type3);
    }
}

其xml佈局爲

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="#48308e"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:id="@+id/tv_type3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:gravity="center"
        android:textColor="#bf2780"
        android:textSize="18sp" />
</LinearLayout>

6、總結：按上面的思路就能簡單的實現recyclerview的多佈局，這個控件在開發過程中使用頻率還是非常高的，希望通過這次的簡單實例能讓你們學會！

附加：給listview形式的Recycler添加分割線

 

/**
 * 給 list 形式 recylerView 添加分割線
 * @return
 */
public static void addItemDecoration(Context context, RecyclerView listView) {
    SimpleRecyclerViewItemDecoration itemDecoration = new SimpleRecyclerViewItemDecoration(context, SimpleRecyclerViewItemDecoration.VERTICAL_LIST, context.getResources().getDrawable(R.drawable.form_dividing_line));
    itemDecoration.setHeight(1);
    listView.addItemDecoration(itemDecoration);
}

 

自定義的分割線：

 

public class SimpleRecyclerViewItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider
    };

    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
    private Drawable mDivider;
    private int mWidth;
    private int mHeight;
    private int mOrientation;

    public SimpleRecyclerViewItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }
    /**
     * 新增：支持自定義dividerDrawable
     *
     * @param context
     * @param orientation
     * @param dividerDrawable
     */

    public SimpleRecyclerViewItemDecoration(Context context, int orientation, Drawable dividerDrawable) {
        mDivider = dividerDrawable;
        setOrientation(orientation);
    }
    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }
    /**
     * 新增：支持手動爲無高寬的drawable制定寬度
     * @param width
     */
    public void setWidth(int width) {
        this.mWidth = width;
    }

    /**
     * 新增：支持手動爲無高寬的drawable制定高度
     * @param height
     */
    public void setHeight(int height) {
        this.mHeight = height;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    public void drawVertical(Canvas c, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin +
                    Math.round(ViewCompat.getTranslationY(child));
            final int bottom = top + getDividerHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }
    public void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int left = child.getRight() + params.rightMargin +
                    Math.round(ViewCompat.getTranslationX(child));
            final int right = left + getDividerWidth();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, getDividerHeight());
        } else {
            outRect.set(0, 0, getDividerWidth(), 0);
        }
    }

    private int getDividerWidth() {
        return mWidth > 0 ? mWidth : mDivider.getIntrinsicWidth();
    }
    private int getDividerHeight() {
        return mHeight > 0 ? mHeight : mDivider.getIntrinsicHeight();
    }
}