java - Custom shaped Views in Android -
i need build set of custom shaped views programmatically. thing is, these views not same shape, , shapes determined based on how many of element have.
say have 3 elements: ["a","b","c"] visual effect should follows:
if there 2 elements, follows:
i've done in swift custom drawing inside of custom view, unsure of syntax java. simple example of drawing shape me in right direction.
//get points bounding view //pad = space between polygons //leftx = left bound of parent view //rightx = right bound of parent view //topy = top bound of parent view //bottomy = bottom bound of parent view //width = width of single polygon before transform //peak = how far polygon reach space of polygon after transform (1/3 polygon width) //tip = peak padding taken account var context = uigraphicsgetcurrentcontext() var pad:cgfloat = (cgfloat)(numbers.applicationpadding) var leftx:cgfloat = (cgfloat)(self.bounds.origin.x) var rightx:cgfloat = (cgfloat)(self.bounds.size.width) var topy:cgfloat = (cgfloat)(self.bounds.origin.y) var bottomy:cgfloat = (cgfloat)(self.bounds.size.height) var width:cgfloat = (cgfloat)(self.bounds.width) / (cgfloat)(applications.count) var peak:cgfloat = width/3.0 var tip:cgfloat = peak - pad //draw applications var appnum:cgfloat = 1.0 var appcount:cgfloat = (cgfloat)(applications.count) var endtopx:cgfloat = 0.0 var endbottomx:cgfloat = 0.0 var temp:cgfloat! var textrightx:cgfloat = 0.0 var textleftx:cgfloat = 0.0 var label:uilabel! app in applications{ if(app.color != nil){ cgcontextsetfillcolorwithcolor(context, app.color!.cgcolor) } else{ cgcontextsetfillcolorwithcolor(context, colors.partcolordefault.cgcolor) } //each polygon breach space of next , previous after transform tip given padding //each text field stretch across middle of each polygon small padding (3) prevent overreaching if(appnum == 1 && applications.count == 1){ cgcontextmovetopoint(context, leftx, topy) cgcontextaddlinetopoint(context, width, topy) cgcontextaddlinetopoint(context, width, bottomy) cgcontextaddlinetopoint(context, leftx, bottomy) } if(appnum == 1){ cgcontextmovetopoint(context, leftx, topy) cgcontextaddlinetopoint(context, width + tip, topy) cgcontextaddlinetopoint(context, width - peak, bottomy) cgcontextaddlinetopoint(context, leftx, bottomy) textleftx = leftx + (leftx - leftx) / 2 + 3 textrightx = (width - peak) + ((width + tip) - (width - peak)) / 2.0 - 10 endtopx = width + tip endbottomx = width - peak } else if(appnum == appcount){ cgcontextmovetopoint(context, endtopx + pad, topy) cgcontextaddlinetopoint(context, rightx, topy) cgcontextaddlinetopoint(context, rightx, bottomy) cgcontextaddlinetopoint(context, endbottomx + pad, bottomy) textleftx = (endbottomx + pad) + ((endtopx + pad) - (endbottomx + pad)) / 2.0 + 10 textrightx = rightx + (rightx - rightx) / 2.0 - 10 endtopx = width endbottomx = width } else{ cgcontextmovetopoint(context, endtopx + pad, topy) cgcontextaddlinetopoint(context, width * appnum + tip, topy) cgcontextaddlinetopoint(context, width * appnum - peak, bottomy) cgcontextaddlinetopoint(context, endbottomx + pad, bottomy) textleftx = (endbottomx + pad) + ((endtopx + pad) - (endbottomx + pad)) / 2 + 10 textrightx = (width * appnum - peak) + ((width * appnum + tip) - (width * appnum - peak)) / 2 - 3 endtopx = width * appnum + tip endbottomx = width * appnum - peak } cgcontextfillpath(context) //add text label label = uilabel(frame: cgrectmake(textleftx, topy, (textrightx-textleftx), bottomy)) label.textalignment = nstextalignment.center label.text = app.baseseries label.numberoflines = 1 label.adjustsfontsizetofitwidth = true label.font = uifont(name:"opensans-semibold", size:30) self.addsubview(label) appbounds.append(label.frame) appnum++ } self.layer.bordercolor = uicolor.lightgraycolor().cgcolor self.layer.borderwidth = 1.0
i accomplished using below code in ondraw method of custom layout class. swift code commented out above block of java code equivalent.
@override protected void ondraw(canvas canvas){ //get points bounding view //pad = space between polygons //leftx = left bound of parent view //rightx = right bound of parent view //topy = top bound of parent view //bottomy = bottom bound of parent view //width = width of single polygon before transform //peak = how far polygon reach space of polygon after transform (1/3 polygon width) //tip = peak padding taken account // var context = uigraphicsgetcurrentcontext() // var pad:cgfloat = (cgfloat)(numbers.applicationpadding) // var leftx:cgfloat = (cgfloat)(self.bounds.origin.x) // var rightx:cgfloat = (cgfloat)(self.bounds.size.width) // var topy:cgfloat = (cgfloat)(self.bounds.origin.y) // var bottomy:cgfloat = (cgfloat)(self.bounds.size.height) // var width:cgfloat = (cgfloat)(self.bounds.width) / (cgfloat)(applications.count) // var peak:cgfloat = width/3.0 // var tip:cgfloat = peak - pad // //draw applications // var appnum:cgfloat = 1.0 // var appcount:cgfloat = (cgfloat)(applications.count) // var endtopx:cgfloat = 0.0 // var endbottomx:cgfloat = 0.0 // var temp:cgfloat! // var textrightx:cgfloat = 0.0 // var textleftx:cgfloat = 0.0 // var label:uilabel! if(applications.length > 0){ //float density = getcontext().getresources().getdisplaymetrics().density; int appnum = 1; int appcount = applications.length; float endtopx = 0; float endbottomx = 0; float textrightx = 0; float textleftx = 0; float pad = 10; float leftx = 0; float rightx = viewwidth; float topy = 0; float bottomy = viewheight; float width = viewwidth / applications.length; float peak = viewwidth / 3; float tip = peak - pad; string colors; // app in applications{ for(applicationwithnotes app : applications){ path.reset(); // if(app.color != nil){ // cgcontextsetfillcolorwithcolor(context, app.color!.cgcolor) // } // else{ // cgcontextsetfillcolorwithcolor(context, colors.partcolordefault.cgcolor) // } //each polygon breach space of next , previous after transform tip given padding //each text field stretch across middle of each polygon small padding (3) prevent overreaching // if(appnum == 1 && applications.count == 1){ // cgcontextmovetopoint(context, leftx, topy) // cgcontextaddlinetopoint(context, width, topy) // cgcontextaddlinetopoint(context, width, bottomy) // cgcontextaddlinetopoint(context, leftx, bottomy) // } if(appnum == 1 && applications.length == 1){ path.moveto(leftx, topy); path.lineto(width, topy); path.lineto(width, bottomy); path.lineto(leftx, bottomy); path.close(); borderpath.moveto(leftx, topy); borderpath.lineto(width, topy); borderpath.lineto(width, bottomy); borderpath.lineto(leftx, bottomy); borderpath.close(); textleftx = 0; textrightx = viewwidth; } // if(appnum == 1){ // cgcontextmovetopoint(context, leftx, topy) // cgcontextaddlinetopoint(context, width + tip, topy) // cgcontextaddlinetopoint(context, width - peak, bottomy) // cgcontextaddlinetopoint(context, leftx, bottomy) // textleftx = leftx + (leftx - leftx) / 2 + 3 // textrightx = (width - peak) + ((width + tip) - (width - peak)) / 2.0 - 10 // endtopx = width + tip // endbottomx = width - peak // } else if(appnum == 1){ path.moveto(leftx, topy); path.lineto(width + tip, topy); path.lineto(width - peak, bottomy); path.lineto(leftx, bottomy); path.close(); borderpath.moveto(leftx, topy); borderpath.lineto(width + tip, topy); borderpath.lineto(width - peak, bottomy); borderpath.lineto(leftx, bottomy); borderpath.close(); textleftx = leftx + (leftx - leftx) / 2 + 3; textrightx = (width - peak) + ((width + tip) - (width - peak)) / 2 - 10; endtopx = width + tip; endbottomx = width - peak; } // else if(appnum == appcount){ // cgcontextmovetopoint(context, endtopx + pad, topy) // cgcontextaddlinetopoint(context, rightx, topy) // cgcontextaddlinetopoint(context, rightx, bottomy) // cgcontextaddlinetopoint(context, endbottomx + pad, bottomy) // textleftx = (endbottomx + pad) + ((endtopx + pad) - (endbottomx + pad)) / 2.0 + 10 // textrightx = rightx + (rightx - rightx) / 2.0 - 10 // endtopx = width // endbottomx = width // } else if(appnum == appcount){ path.moveto(endtopx + pad, topy); path.lineto(rightx, topy); path.lineto(rightx, bottomy); path.lineto(endbottomx + pad, bottomy); path.close(); borderpath.moveto(endtopx + pad, topy); borderpath.lineto(rightx, topy); borderpath.lineto(rightx, bottomy); borderpath.lineto(endbottomx + pad, bottomy); borderpath.close(); textleftx = (endbottomx + pad) + ((endtopx + pad) - (endbottomx + pad)) / 2 + 10; textrightx = rightx + (rightx - rightx) / 2 - 10; endtopx = width; endbottomx = width; } // else{ // cgcontextmovetopoint(context, endtopx + pad, topy) // cgcontextaddlinetopoint(context, width * appnum + tip, topy) // cgcontextaddlinetopoint(context, width * appnum - peak, bottomy) // cgcontextaddlinetopoint(context, endbottomx + pad, bottomy) // textleftx = (endbottomx + pad) + ((endtopx + pad) - (endbottomx + pad)) / 2 + 10 // textrightx = (width * appnum - peak) + ((width * appnum + tip) - (width * appnum - peak)) / 2 - 3 // endtopx = width * appnum + tip // endbottomx = width * appnum - peak // } else{ path.moveto(endtopx + pad, topy); path.lineto(width * appnum + tip, topy); path.lineto(width * appnum - peak, bottomy); path.lineto(endbottomx + pad, bottomy); path.close(); borderpath.moveto(endtopx + pad, topy); borderpath.lineto(width * appnum + tip, topy); borderpath.lineto(width * appnum - peak, bottomy); borderpath.lineto(endbottomx + pad, bottomy); borderpath.close(); textleftx = (endbottomx + pad) + ((endtopx + pad) - (endbottomx + pad)) / 2 + 10; textrightx = (width * appnum - peak) + ((width * appnum + tip) - (width * appnum - peak)) / 2 - 3; endtopx = width * appnum + tip; endbottomx = width * appnum - peak; } // cgcontextfillpath(context) paint.setstyle(paint.style.fill); if(app.application.colorcode != null){ colors = "#" + app.application.colorcode; paint.setcolor(color.parsecolor(colors)); } else{ paint.setcolor(getresources().getcolor(r.color.default_application)); } canvas.drawpath(path, paint); // borderpaint.setstyle(paint.style.stroke); // borderpaint.setcolor(getresources().getcolor(r.color.application_border)); // canvas.drawpath(borderpath, borderpaint); // //add text label // label = uilabel(frame: cgrectmake(textleftx, topy, (textrightx-textleftx), bottomy)) // label.textalignment = nstextalignment.center // label.text = app.baseseries // label.numberoflines = 1 // label.adjustsfontsizetofitwidth = true // label.font = uifont(name:"opensans-semibold", size:30) // // self.addsubview(label) // appbounds.append(label.frame) // // appnum++ textviews.add(app.application.baseseries); textviewsdimens.add(new float[]{textleftx, textrightx}); appnum++; // } } // self.layer.bordercolor = uicolor.lightgraycolor().cgcolor // self.layer.borderwidth = 1.0 // if(!addedtextviews){ createtextviews(); } } } private void createtextviews(){ autoresizetextview label; layoutparams layout; for(int = 0; < textviews.size(); i++){ label = new autoresizetextview(getcontext()); label.settext(textviews.get(i)); label.settextappearance(getcontext(), r.style.applicationtext); layout = new layoutparams(layoutparams.wrap_content, layoutparams.wrap_content); layout.topmargin = 0; layout.height = viewheight; layout.leftmargin = (int) textviewsdimens.get(i)[0]; layout.width = (int) textviewsdimens.get(i)[1] - (int) textviewsdimens.get(i)[0]; label.setlayoutparams(layout); this.addview(label); label.setgravity(gravity.center); } addedtextviews = true; }
Comments
Post a Comment