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);  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); }}

代码结构：

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

总结

以上是内存溢出为你收集整理的Android实现多个连续带数字圆圈效果全部内容，希望文章能够帮你解决Android实现多个连续带数字圆圈效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。