自定义九宫格加载的实现

最新推荐文章于 2024-02-18 10:20:35 发布

转载最新推荐文章于 2024-02-18 10:20:35 发布 · 363 阅读

文章标签：

#新人可以看看 #图片

android 专栏收录该内容

31 篇文章

订阅专栏

要完成自定义加载图片的九宫格的步骤

1：写一个类继承ViewGroup，同时实现他的构造方法，当然自己使用实现两个就完全可以了，不要忘了ViewGroup还有一个必须实现的方法onLaout

public class Sudoku extends ViewGroup

public Sudoku(Context context) {
    this(context,null);
}

public Sudoku(Context context, AttributeSet attrs) {
    this(context, attrs,0);
}

public Sudoku(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context,attrs);
}

//这个方法是用来控制子view摆放的位置的这里我们不做处理

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

}

//init方法是用来初始化属性的

private void init(Context context, AttributeSet attrs) {
    this.context = context;
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SudokulayoutStyle);//设置自定义属性
    space = typedArray.getDimensionPixelSize(R.styleable.SudokulayoutStyle_space, 10);//图片的间距
    imColumn = typedArray.getInteger(R.styleable.SudokulayoutStyle_column_image, 3);//一列有几张图
    width = typedArray.getDimensionPixelSize(R.styleable.SudokulayoutStyle_total_width, 720);//layout的宽度
    maxheight = typedArray.getDimensionPixelSize(R.styleable.SudokulayoutStyle_oneimage_maxheight, 810);//单张图片最大的高度
    maxwidth = typedArray.getDimensionPixelSize(R.styleable.SudokulayoutStyle_oneimage_maxwidth, 810);//单张图片最大的宽度
    typedArray.recycle();
}

//在这里我们看到了自定义属性。怎么设置自定义属性呢？需要在res文件中的values文件夹里创建atts.xml文件，已有的就不用创建了

<declare-styleable name="SudokulayoutStyle">
    <!-- 每张图片的间隙 -->
    <attr name="space" format="dimension"></attr>
    <!-- 每排有多少张图片 -->
    <attr name="column_image" format="integer"></attr>
    <!-- layout的宽度 -->
    <attr name="total_width" format="dimension"></attr>
    <!-- 单张图片最大宽度 -->
    <attr name="oneimage_maxwidth" format="dimension"></attr>
    <!-- 单张图片最大高度 -->
    <attr name="oneimage_maxheight" format="dimension"></attr>
</declare-styleable>
//自定义属性设置完了那我们就需要对外放开一个方法加载图片

public void setImageData(int[] image){  //这里我传的参数是一个数组，因为我把图片放到资源文件里了，实际中我们传的会是一个集合或bean里面有图片的地址

    if (image.length == 0){//如果数组的长度为0则证明，没有图片，实际中可能是集合没有图片宽高为0
        itemW=0;
        itemH=0;
    }else if(image.length == 1){
        //处理图片大小不能过界
        if (getImgaeWidth(this.image[0])==0 || getImgaeHeight(this.image[0])==0){ //因为我的图片在res里所以我不知道宽和高，因此我创建了两个方法获得宽高，实际中集合的bean里应该已经包含宽和高了
        itemW=(width-(imColumn+1)*space)/imColumn;
        itemH=(width-(imColumn+1)*space)/imColumn;
        }
        else {
            float scaleWidth=(float) getImgaeWidth(this.image[0])/maxwidth;
            float scaleHeight=(float) getImgaeHeight(this.image[0])/maxheight;
            if (scaleHeight<1 && scaleWidth<1) {
                itemW=getImgaeWidth(this.image[0])-space*2;
                itemH=getImgaeHeight(this.image[0])-space*2;
            }
            else {
                itemW= (int) (getImgaeWidth(this.image[0])/(scaleHeight>scaleWidth?scaleHeight:scaleWidth))-space*2;
                itemH= (int) (getImgaeHeight(this.image[0])/(scaleHeight>scaleWidth?scaleHeight:scaleWidth))-space*2;
            }
        }
    }else {
        itemW=(width-(imColumn+1)*space)/imColumn;
        itemH=(width-(imColumn+1)*space)/imColumn;
    }
    //设置视图宽高
    if (image.length==0) {
        setLayoutParams(new LinearLayout.LayoutParams(0, 0));
    }
    else if (image.length==1) {
        LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(itemW, itemH);
        params.leftMargin= CommonUtils.dp2px(context, 45);
        params.topMargin=CommonUtils.dp2px(context, 10);
        setLayoutParams(params);
    }
    else {
        //总行数
        int row=(image.length-1)/imColumn+1;
        //最大列数
        int column=0;
        if (imColumn> image.length) {
            column= image.length;
        }
        else {
            column=imColumn;
        }
        //通过每个item的宽高计算出layout整体宽高  这里要注意因为这里new的是linearLayout所以使用时布局一定要是linearlayout，否则会报错
        LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(space*(column+1)+column*itemW, space*(row+1)+row*itemH);
        params.leftMargin= CommonUtils.dp2px(context, 45);
        params.topMargin=CommonUtils.dp2px(context, 10);
        setLayoutParams(params);
    }
    //添加视图
    if (image.length!=0) {
        //从来没有创建过
        if (oldNum==0) { //oldnum是判断是否复用过
            for (int i : image) {
                ImageView imageView = new ImageView(context);//这里我用的是imageview，实际中可以用自己的加载图片的方法以实现各种效果如背景默认加载什么的
                addView(imageView);
            }
        }
        else {
            //新创建的比之前的要少，则减去多余的部分
            if (oldNum> image.length) {
                removeViews(image.length-1, oldNum - this.image.length);
            }
            //新创建的比之前的要少，则添加缺少的部分
            else if (oldNum< image.length) {
                for (int i = 0; i < image.length - oldNum; i++) {
                    ImageView imageView = new ImageView(context);
                    addView(imageView);
                }
            }
        }
        oldNum= image.length;
    }
    else {
        removeAllViews();
        oldNum=0;
    }
    //设置每一个图片的宽高
    for (int i = 0; i < getChildCount(); i++) {
        final int i_=i;

        ImageView imageView= (ImageView) getChildAt(i);
       imageView.setImageResource(image[i]);
        imageView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (listener!=null) {
                    listener.click(i_);
                }
            }
        });


        int row=i/imColumn+1;
        int column=i%imColumn+1;

        int left=space*column + itemW*(column-1);
        int top=space*row + itemH*(row-1);
        int right=left+itemW;
        int bottom=top+itemH;

        imageView.layout(left, top, right, bottom);
    }

}
//获取宽和高的方法
private int getImgaeWidth(int id){
    Bitmap bitmap = BitmapFactory.decodeResource(this.getContext().getResources(), id);
    int width = bitmap.getWidth();
    return width;
}
private int getImgaeHeight(int id){
    Bitmap bitmap = BitmapFactory.decodeResource(this.getContext().getResources(), id);
    int height = bitmap.getWidth();
    return height;
}
以上就是自定义的所有方法了剩下的就剩在布局中使用了

<com.example.administrator.myapplication.Sudoku
    xmlns:app="http://schemas.android.com/apk/res-auto"//要是有自定义属性一定要加这一句
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:space="3dip"
    app:total_width="150dip"
    app:oneimage_maxwidth="240dip"
    app:oneimage_maxheight="240dip"
    android:id="@+id/im_su"
    >