FlexboxLayout使用指南

添加
android:flexbox的依赖

dependencies {
    compile 'com.google.android:flexbox:0.3.2'

   //引入RecyclerView
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support:design:26.+'
    compile 'com.android.support:support-v4:26.+'
    }

配置里面搭配main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:divider="#FFFF0000"
        android:dividerHeight="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout >

image_item

<?xml version="1.0" encoding="utf-8"?>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@mipmap/ic_launcher"
    android:scaleType="centerCrop"/>

MainActivity

package yaoyao.flexboxdemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;

import com.google.android.flexbox.AlignItems;
import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;

import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;

public class MainActivity extends Activity {

    private RecyclerView mRecyclerview;
    private FlexboxLayoutManager manager;

    private List<Integer> list = new CopyOnWriteArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();
        initView();
    }


    private void initData() {
//        for (int i = 0; i < 255; i++) {
//            list.add("https://unsplash.it/200/200?random&" + i);
//        }
        for (int i = 0; i < 5; i++) {
            list.add(R.mipmap.timg);
            list.add(R.mipmap.cat1);
            list.add(R.mipmap.cat2);

            list.add(R.mipmap.cat2);
            list.add(R.mipmap.cat5);
            list.add(R.mipmap.cat4);
            list.add(R.mipmap.cat6);
            list.add(R.mipmap.cat1);
            list.add(R.mipmap.cat3);
            list.add(R.mipmap.cat4);
            list.add(R.mipmap.cat5);
            list.add(R.mipmap.cat6);
            list.add(R.mipmap.cat7);
            list.add(R.mipmap.cat8);
            list.add(R.mipmap.cat3);
            list.add(R.mipmap.cat11);
            list.add(R.mipmap.cat12);
            list.add(R.mipmap.cat6);
            list.add(R.mipmap.cat7);
            list.add(R.mipmap.cat8);
            list.add(R.mipmap.cat11);
            list.add(R.mipmap.cat4);
            list.add(R.mipmap.cat5);
            list.add(R.mipmap.cat6);
            list.add(R.mipmap.cat7);
            list.add(R.mipmap.cat8);
            list.add(R.mipmap.cat11);
            list.add(R.mipmap.cat4);
            list.add(R.mipmap.cat5);
            list.add(R.mipmap.cat6);
            list.add(R.mipmap.cat7);
            list.add(R.mipmap.cat12);

        }
    }

    private void initView() {
        mRecyclerview = (RecyclerView) findViewById(R.id.recycler);
        manager = new FlexboxLayoutManager(this);
        //设置主轴排列方式
        manager.setFlexDirection(FlexDirection.ROW);
        //是否换行
        manager.setFlexWrap(FlexWrap.WRAP);
        //对齐方式
        manager.setAlignItems(AlignItems.STRETCH);
        mRecyclerview.setLayoutManager(manager);
        mRecyclerview.setAdapter(new HomeAdapter(this, list));
    }
}

HomeAdapter

package yaoyao.flexboxdemo;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;


import com.google.android.flexbox.FlexboxLayoutManager;

import java.util.List;


public class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.ViewHolder> {
    private Context mContext;
    private List<Integer> mList;

    private OnItemClickListener onItemClickListener;

    public HomeAdapter(Context mContext, List<Integer> list) {
        this.mContext = mContext;
        this.mList = list;
    }

    public interface OnItemClickListener {
        //点击轮播图
        void OnSliderClick(int postion);


    }

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }


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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mImage.setImageResource(mList.get(position));
        ViewGroup.LayoutParams lp = holder.mImage.getLayoutParams();
        if (lp instanceof FlexboxLayoutManager.LayoutParams) {
            FlexboxLayoutManager.LayoutParams flexboxLp =
                    (FlexboxLayoutManager.LayoutParams) holder.mImage.getLayoutParams();
            flexboxLp.setFlexGrow(1.0f);
        }

    }

    @Override
    public int getItemCount() {
        return mList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        View view;
        ImageView mImage;

        ViewHolder(View view) {
            super(view);
            this.view = view;
            this.mImage = (ImageView) view.findViewById(R.id.image);
        }
    }
}

主要注意

  mRecyclerview = (RecyclerView) findViewById(R.id.recycler);
        manager = new FlexboxLayoutManager(this);
        //设置主轴排列方式
        manager.setFlexDirection(FlexDirection.ROW);
        //是否换行
        manager.setFlexWrap(FlexWrap.WRAP);
        //对齐方式
        manager.setAlignItems(AlignItems.STRETCH);
        mRecyclerview.setLayoutManager(manager);
        mRecyclerview.setAdapter(new HomeAdapter(this, list));
 holder.mImage.setImageResource(mList.get(position));
        ViewGroup.LayoutParams lp = holder.mImage.getLayoutParams();
        if (lp instanceof FlexboxLayoutManager.LayoutParams) {
            FlexboxLayoutManager.LayoutParams flexboxLp =
                    (FlexboxLayoutManager.LayoutParams) holder.mImage.getLayoutParams();
            flexboxLp.setFlexGrow(1.0f);
        }

flexboxLp.setFlexGrow(1.0f); 弹性适配页面宽度
这两个地方就ok 可以用的
效果图
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值