自定義九宮格載入的實現

a521314963發表於2017-07-19

要完成自定義載入圖片的九宮格的步驟

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




            




相關文章