自定义使用Adapter的组件（一）

这次，我要实现个类似京东商城android客户端上商品图片展示的组件，如下图展示爱疯4的组件，注意，不包含小箭头

。【由于不方便上传图片，就只能使用网上图片了】



首先，我先实现上图的效果，要实现这种组件就必须继承AdapterView<ListAdapter>，实现构造方法、onMeasure()、onLayout()、setAdapter()方法。看代码：

public class ImageWallView extends AdapterView<ListAdapter>{

private ListAdapter mAdapter;
private int unitWidth;                      //每个child的宽
private int numColumns;                //屏幕展示的孩子的数目

/**
* 构造方法
*/

public ImageWallView(Context context) {
super(context);
}

public ImageWallView(Context context, AttributeSet attrs) {
super(context, attrs);

}

public ImageWallView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

/**
* 继承AdapterView需要实现以下四个方法
*  getAdapter()
*  setAdapter(ListAdapter adapter)
*  getSelectedView()
*  setSelection(int position)
*/
@Override
public ListAdapter getAdapter() {
return mAdapter;
}

@Override
public void setAdapter(ListAdapter adapter) {
this.mAdapter = adapter;
//把所有的child添加到布局中
for(int i=0;i<mAdapter.getCount();i++){
View child = mAdapter.getView(i,null,this);
addViewInLayout(child,i,child.getLayoutParams());
}
}

@Override
public View getSelectedView() {
return null;
}

@Override
public void setSelection(int position) { }

/**
* 设置布局
*/
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
int childCount = getChildCount();
int pLeft = 0;
int pTop = 0;
int childWidth=0;
int childHeight=0;

if(childCount>0){
View child = getChildAt(0);
LayoutParams p = child.getLayoutParams();
childWidth = p.width + child.getPaddingLeft() + child.getPaddingRight() ;  //组件的宽度
childHeight = p.height + child.getPaddingTop() + child.getPaddingBottom(); //组件的高度

numColumns = (getMeasuredWidth() - getPaddingLeft() - getPaddingRight())/childWidth;  //计算屏幕中可以放置几个child
int spacing = (getMeasuredWidth() - getPaddingLeft() - getPaddingRight() - numColumns * childWidth)/numColumns;  //计算child之间的平均空隙

int spacingLR = (getPaddingLeft() + getPaddingRight() )/2;//组件左右边的平均空隙

if(spacing > spacingLR){  // 当组件间的均距离大于两边的组件左右的空隙的平均值时，调整一下，这个只是为了样式，可越过
int outSpacing = spacing - spacingLR;
setPadding(spacingLR+outSpacing,getPaddingTop(),spacingLR+outSpacing,getPaddingBottom());
}
unitWidth = childWidth + spacing ;
}

for(int i=0;i<childCount;i++){
View child = getChildAt(i);

pLeft = getPaddingLeft() + i * unitWidth+(int)offset;                 //child距离左端的距离

pTop = getPaddingTop();                                         //child距离顶端的距离
child.layout(pLeft,pTop,pLeft + childWidth,pTop + childHeight);

}

}

/**
* 设置大小
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//设置宽度和高度
setMeasuredDimension(
getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec),  //getDefaultSize() 获取参数两个值中较大的那个
getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec)
);
}

}

onMeasure() 中设置了组件的大小

onLayout() 中设置了传进来的ListAdapter内容怎样在组件中分布

setAdapter() 中把ListAdapter的内容加入组件中

使用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:demo="http://schemas.android.com/apk/res/com.wxg.activity"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<com.wxg.view.ImageWallView
android:layout_width="fill_parent"
android:layout_height="100dp"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:paddingRight="10dp"
android:id="@+id/imageWallView"
android:background="#ffffff"
/>
<TextView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"
android:text="图片墙组件"
android:textColor="#ffffff"
android:textSize="25sp"/>

</LinearLayout>

有个地方需要注意，使用组件时要自定义Adapter，不能使用系统自带的Adapter。

这样，就可以实现想要的样式了，但是现在图片还不能随着手势滑动，在下篇中会实现随手势滑动。