android实现多个连续带数字圆圈效果 -凯发k8天生赢家一触即发

有项目需求需要绘制多个圆圈，并且使用连续的数字对其排列起来，也就是好多排的圆圈。

首先看一下效果图：

一排设置为8个，一共有53个的：

一排设值为5个的，一共有153个：

可以根据总的个数和每排个数自动调节圆圈的大小，并且根据传入的监听事件作出不同的点击效果。

思路很简单，首先需要画一个圆出来：

然后创建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);
 }
}

代码结构：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。