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

}

代码结构:

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

(0)

相关推荐

  • Android中TextView显示圆圈背景或设置圆角的方法

    前言 在我们学习android这么久,而且使用TextView那么长时间,我们一直没有用过给TextView添加背景,或者是给TextView添加添加边框,以及怎么样设置TextView的形状.今天在写代码的时候就用到了,怎么在java代码部分设置TextView的背景,和TextView的形状及边框. 方法如下: 接下来我们来看一下,怎么在Java代码部分怎么设置TextView的背景颜色,其实很简单的就一句话. tvTemp.setBackgroundColor(Color.parseCol

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

    有项目需求需要绘制多个圆圈,并且使用连续的数字对其排列起来,也就是好多排的圆圈. 首先看一下效果图: 一排设置为8个,一共有53个的: 一排设值为5个的,一共有153个: 可以根据总的个数和每排个数自动调节圆圈的大小,并且根据传入的监听事件作出不同的点击效果. 思路很简单,首先需要画一个圆出来: <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://sche

  • Android仿支付宝中余额宝的数字动画效果

    实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola

  • Android自定义View模仿即刻点赞数字切换效果实例

    目录 即刻点赞展示 自己如何实现这种数字切换呢? 效果展示 源码 总结 即刻点赞展示 点赞的数字增加和减少并不是整个替换,而是差异化替换.再加上动画效果就看的很舒服. 自己如何实现这种数字切换呢? 下面用一张图来展示我的思路: 现在只需要根据这张图,写出对应的动画即可. 分为2种场景: 数字+1: 差异化的数字从3号区域由渐变动画(透明度 0- 255) + 偏移动画 (3号区域绘制文字的基线,2号区域绘制文字的基线),将数字移动到2号位置处 差异化的数字从2号区域由渐变动画(透明度 255-

  • Android自定义View实现圆环带数字百分比进度条

    分享一个自己制作的Android自定义View.是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动.以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小. 先说一下思路:这个View一共分为三部分:第一部分也就是灰色的圆环部分,代表未完成的进度:第二部分是蓝色的圆弧部分,代表已经完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 下面是View的编写思路: ①:定义三个画笔,分别画灰色圆环,蓝色圆弧,红色文字: ②:

  • Android实现带数字的圆形进度条(自定义进度条)

    开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • Android带数字或红点的底部导航拦和联网等待加载动画示例

    Android带数字或红点的底部导航拦和联网等待加载动画 首先展示一下截图效果,下载地址在文章最后 一.Android带红点的底部导航拦 1.首先写底部导航栏的界面view_main_tab.xml. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" and

  • Android 安全加密:数字签名和数字证书详解

    Android安全加密专题文章索引 Android安全加密:对称加密 Android安全加密:非对称加密 Android安全加密:消息摘要Message Digest Android安全加密:数字签名和数字证书 Android安全加密:Https编程 以上学习所有内容,对称加密.非对称加密.消息摘要.数字签名等知识都是为了理解数字证书工作原理而作为一个预备知识.数字证书是密码学里的终极武器,是人类几千年历史总结的智慧的结晶,只有在明白了数字证书工作原理后,才能理解Https 协议的安全通讯机制.

  • Android 自定义球型水波纹带圆弧进度效果(实例代码)

    需求 如下,实现一个圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一个圆弧进度. 思路 外围圆弧进度:可以通过canvas.drawArc()实现.由于圆弧需要实现渐变,可以通过给画笔设置shader(SweepGradient)渲染,为了保证圆弧起始的颜色值始终一致,需要动态调整shader的参数.具体参见 SweepGradient(centerX.toFloat(), centerY.toFloat(), circleColors[0], floatArrayOf(0f, value

  • android实现在图标上显示数字

    本文实例为大家分享了android实现在图标上显示数字的具体代码,供大家参考,具体内容如下 效果图: 动态显示当天的号数. 主要代码如下: import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Paint; import android

随机推荐