最近公司要做一个类似GridView控件布局的数据展示,要求数据的item每个都是矩形的,寻思着网上找个框架用呗,
所有网上找了一个重写GridLayoutManager类的布局管理用了一下,效果不理想,太麻烦每次都要new,所以寻思着自己写了一个。
在不实现GridLayoutManager、不用new,并且只需要用布局来设置就完事而且还是自适应的矩形控件。
代码肯定有减少、想想都高大上,先看效果图
1.item布局代码
布局文件名:item_grid_list.xml
<?xml version="1.0" encoding="utf-8"?>
<com.dengmengxin.newproject.FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="@android:color/white"
android:text="矩形的不信\n拿尺子量去" />
</com.dengmengxin.newproject.FrameLayout>
2.item布局效果
上面只是item布局的效果图,现在来看看item布局的根布局也就是自定义的帧布局代码吧
/**
* @author dengmengxin
* Automatic Height Follower Width
* 这里我继承系统的帧布局,当然你可以继承其它的布局,自己试下不就知道了
*/
public class FrameLayout extends android.widget.FrameLayout {
public FrameLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public FrameLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FrameLayout(Context context) {
super(context);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//核心就是下面这块代码块啦
int width = getMeasuredWidth();
setMeasuredDimension(width, width);
ViewGroup.LayoutParams lp = getLayoutParams();
lp.height = width;
setLayoutParams(lp);
}
}
以上就是所有核心布局了,代码不多超简洁,以上代码告一段落
现在来具体实现,当然就是最终效果咯
先上主布局代码,也就是应用打开时显示的那个界面
1.主界面 布局文件名: activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.dengmengxin.newproject.MainActivity"
tools:showIn="@layout/activity_main">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="android.support.v7.widget.GridLayoutManager"
app:spanCount="3"/>
<!--我会告诉你还可以这样子用吗?
app:layoutManager="android.support.v7.widget.GridLayoutManager"
全世界的工程师都知道啦,谁用谁知道-->
</LinearLayout>
2.设置每个item间距的辅助类
/**
* Created by Administrator on 2015/12/7.
* 网上找的,原谅我。不想重复造轮子
*/
public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {
private int spanCount;
private int spacing;
private boolean includeEdge;
public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
this.spanCount = spanCount;
this.spacing = spacing;
this.includeEdge = includeEdge;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int position = parent.getChildAdapterPosition(view); // item position
int column = position % spanCount; // item column
if (includeEdge) {
outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)
if (position < spanCount) { // top edge
outRect.top = spacing;
}
outRect.bottom = spacing; // item bottom
} else {
outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f / spanCount) * spacing)
if (position >= spanCount) {
outRect.top = spacing; // item top
}
}
}
}
3.主界面Activity的实现代码
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
RecyclerView gridView = (RecyclerView) findViewById(R.id.rv_grid_view);
int spanCount = 3;//跟布局里面的spanCount属性是一致的
int spacing = 5;//每一个矩形的间距
boolean includeEdge = true;//如果设置成false那边缘地带就没有间距
//设置每个item间距
gridView.addItemDecoration(new GridSpacingItemDecoration(spanCount,spacing,includeEdge));
//设置适配器
gridView.setAdapter(new GridAdapter(this));
}
/**
* 适配器
*/
class GridAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
private LayoutInflater mInflater;
public GridAdapter(Context context) {
this.mInflater = LayoutInflater.from(context);
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View rootView = this.mInflater.inflate(R.layout.item_grid_list,parent,false);
return new ViewHolder(rootView);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
}
@Override
public int getItemCount() {
return 9;//数据数量,不想搞太复杂
}
class ViewHolder extends RecyclerView.ViewHolder{
public ViewHolder(View itemView) {
super(itemView);
}
}
}
}
没有了就这么多代码,神码你觉得代码太多了?
还好吧。
来看看最后的运行效果图,不要急着关闭网页,知道有求源码的,下载地址放到最下面
[资源demo下载地址](http://download.csdn.net/detail/dengmengxin/9340995)
[转载请注明出处](http://blog.csdn.net/dengmengxin/article/details/50238495)