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

image_item

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

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 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 {    private Context mContext;    private List mList;    private OnItemClickListener onItemClickListener;    public HomeAdapter(Context mContext, List 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 可以用的
效果图

更多相关文章

随机推荐