欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-03 10:42:04
有项目需求需要绘制多个圆圈,并且使用连续的数字对其排列起来,也就是好多排的圆圈。 首先看一下效果图: 一排设置为8个,一共有53个的: 一排设值为5个的,一共有1...

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

首先看一下效果图:

一排设置为8个,一共有53个的:

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

一排设值为5个的,一共有153个:

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

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

思路很简单,首先需要画一个圆出来:

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

}

代码结构:

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

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