Android实现多个连续带数字圆圈效果

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

首先看一下效果图：

一排设置为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);
 }

}

代码结构：

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