Android实现多个连续带数字圆圈效果
程序员文章站
2024-02-03 10:42:04
有项目需求需要绘制多个圆圈,并且使用连续的数字对其排列起来,也就是好多排的圆圈。
首先看一下效果图:
一排设置为8个,一共有53个的:
一排设值为5个的,一共有1...
有项目需求需要绘制多个圆圈,并且使用连续的数字对其排列起来,也就是好多排的圆圈。
首先看一下效果图:
一排设置为8个,一共有53个的:
一排设值为5个的,一共有153个:
可以根据总的个数和每排个数自动调节圆圈的大小,并且根据传入的监听事件作出不同的点击效果。
思路很简单,首先需要画一个圆出来:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:uselevel="false" > <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /> <stroke android:width="1dp" android:color="@android:color/black" /> <size android:width="10dp" android:height="10dp" /> </shape>
然后创建textview,设置textview的背景为这个drawable即可。
可以根据屏幕的总宽度和每排需要放置的圆个数,计算出每一个圆的合适大小,然后设置每个圆之间的margin为这个圆的十分之一,所以这个圆的最后大小应该为平均值的十分之八。
然后使用linearlayout布局,动态加载多个textview,每个textview设置好对应的属性即可。
由于可能圆的个数过多,所以需要scrollview来进行嵌套,从而支持滑动事件,需要注意的就是scrollview下面只能有一个子节点。
完整代码:
import android.content.context; import android.os.build; import android.support.annotation.requiresapi; import android.util.log; import android.view.gravity; import android.view.view; import android.view.viewgroup; import android.view.windowmanager; import android.widget.linearlayout; import android.widget.scrollview; import android.widget.textview; /** * created by leafage on 2017/7/21. */ public class circleview { private linearlayout mmainlinearlayout; private scrollview mscrollview; private linearlayout mlinearlayout; private windowmanager mwindowmanager; private context mcontext; //全屏参数 linearlayout.layoutparams matchparams = new linearlayout.layoutparams( viewgroup.layoutparams.match_parent, viewgroup.layoutparams.match_parent); //用来设置内部linearlayout的参数,宽度适应父布局,高度自动 linearlayout.layoutparams linearlayoutparams = new linearlayout.layoutparams( viewgroup.layoutparams.match_parent, viewgroup.layoutparams.wrap_content); //设置textview的参数 linearlayout.layoutparams textviewparams = new linearlayout.layoutparams( linearlayout.layoutparams.wrap_content, linearlayout.layoutparams.wrap_content); public circleview(context context) { mcontext = context; mmainlinearlayout = new linearlayout(context); mlinearlayout = new linearlayout(context); mscrollview = new scrollview(context); //用来得到总屏幕的宽度 mwindowmanager = (windowmanager) context.getsystemservice(context.window_service); init(); } private void init() { mlinearlayout.setorientation(linearlayout.vertical); mmainlinearlayout.setlayoutparams(matchparams);//最外面的全屏 mscrollview.setlayoutparams(matchparams);//滚动的全屏 mlinearlayout.setlayoutparams(matchparams);//内容的全屏 mlinearlayout.setorientation(linearlayout.vertical);//垂直放置 } @requiresapi(api = build.version_codes.jelly_bean) public linearlayout getlinearlayout(int column, int count, view.onclicklistener onclicklistener) { int row = count / column;//计算出多少排 int duoyu = count - row * column;//计算出多余的个数 int totalwidth = mwindowmanager.getdefaultdisplay().getwidth();//得到总的宽度 int width = totalwidth / column;//计算出每排的每个圆圈的平均宽度 int margin = (int) (width*0.1);//设置边距为0.1 width = (int) (width * 0.8);//去掉左右边距剩下的宽度 int num = 1;//从1开始计数 textviewparams.setmargins(margin, margin, margin, margin); for (int i = 0 ; i < row; i++) {//一共绘制多少排 linearlayout linearlayout = new linearlayout(mcontext); linearlayout.setlayoutparams(linearlayoutparams); linearlayout.setorientation(linearlayout.horizontal); for (int j = 0; j < column; j++) {//一排绘制多少个 final textview textview = new textview(mcontext); textview.setbackground(mcontext.getresources().getdrawable(r.drawable.cricle)); textview.setheight(width); textview.setwidth(width); textview.setgravity(gravity.center); textview.settext(string.valueof(num)); textview.setlayoutparams(textviewparams); textview.setonclicklistener(onclicklistener);//设置监听事件 linearlayout.addview(textview); num++; } mlinearlayout.addview(linearlayout); } //绘制剩下多余的一排 linearlayout linearlayout = new linearlayout(mcontext); linearlayout.setlayoutparams(linearlayoutparams); linearlayout.setorientation(linearlayout.horizontal); for (int i = 0 ; i< duoyu;i++) { textview textview = new textview(mcontext); textview.setbackground(mcontext.getresources().getdrawable(r.drawable.cricle)); textview.setheight(width); textview.setwidth(width); textview.setgravity(gravity.center); textview.settext(string.valueof(num)); textview.setlayoutparams(textviewparams); textview.setonclicklistener(onclicklistener); linearlayout.addview(textview); num++; } mlinearlayout.addview(linearlayout); mscrollview.addview(mlinearlayout); mmainlinearlayout.addview(mscrollview); return mmainlinearlayout; } }
可以直接在activity里面使用:
import android.os.build; import android.os.bundle; import android.support.annotation.requiresapi; import android.support.v7.app.appcompatactivity; import android.view.view; import android.widget.linearlayout; import android.widget.textview; import android.widget.toast; public class mainactivity extends appcompatactivity{ private linearlayout mmainlayout; @requiresapi(api = build.version_codes.jelly_bean) @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); circleview circle = new circleview(this); mmainlayout = circle.getlinearlayout(8, 53, new view.onclicklistener() { @override public void onclick(view view) { toast.maketext(mainactivity.this, "id:" + ((textview)view).gettext(), toast.length_short).show(); } }); setcontentview(mmainlayout); } }
代码结构:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 今日头条app已发布的个人动态怎么删除?