android自定义view圆,Android自定义View实现圆形环绕效果

喜欢ヅ旅行 2022-10-16 00:45 228阅读 0赞

Android自定义View实现圆形环绕效果

发布时间：2020-08-23 00:06:58

来源：脚本之家

阅读：140

作者：zuozuoshenghen

之前项目中需要实现一个四周环绕中心圆形头像的效果，感觉还是自定义比较方便，于是就自己封装了一个控件去实现。先贴张图显示最终效果。

![be2c64df56f373b6532335a7fa3673f2.png][]

首先自定义一个View继承自LinearLayout,通过动态添加childView的方式将子控件添加到View中。思路是先添加中间圆形头像，然后添加周围的小图标。

1.实现了圆形头像的显示，可以去参考网上或github上的demo，圆形头像的外圈其实是一个View，然后再把头像这个View盖到这个View上。

2.计算好周围相邻view之间的角度，这里是要水平铺满，最多6个，所以相邻之间的角度为180/ (6 - 1) = 36度。如果是360环绕，放n个图标，则相邻之间的角度应该为360 / n 。

3.设置图标到圆心的距离r。距离要大于头像的半径加上图标的半径。

4.确定图标的坐标：控件的宽为width,高为height。假设左边第一个图标是起始位置。图标的起始角度为α＝ 180 - 36 \* i，则它的横坐标为width/2 + cos(α)r，纵坐标为height/2 - sin(α) r。

5.设置坐标点，默认为图标的左上角顶点和右下点，如果想设图标的中心点为坐标，则左上定点x、y分别减去width/2和height/2,右下角分别加上width/2、height/2。

下面附上主要代码：

package com.ihaveu.iuzuan.cardgame.widget;

import android.content.Context;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.LinearLayout;

import com.ihaveu.iuzuan.cardgame.R;

import com.ihaveu.iuzuan.cardgame.util.MeasureUtil;

import java.util.ArrayList;

import java.util.List;

/\*\*

\* Created by zhouhui on 17-6-8.

\* 添加圆形子控件实现时钟环绕效果

\*/

public class CircleImageLayout extends LinearLayout\{

private double mAngle = 0;//初始角度

private int mX, mY;//子控件位置

private int mWidth, mHeight;//控件长宽

private int mRadius;//子控件距离控件圆心位置

private int mCount;

private List mCircleImageViewList;

private CircleImageView mCircleImageView;

public CircleImageLayout(Context context) \{

this(context, null);

public CircleImageLayout(Context context, @Nullable AttributeSet attrs) \{

this(context, attrs, 0);

public CircleImageLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) \{

super(context, attrs, defStyleAttr);

mCircleImageViewList = new ArrayList<>();

/\*\*

\* 设置子控件到控件圆心的位置

\*/

public void setRadius(int radius) \{

mRadius = radius;

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) \{

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

mWidth = getMeasuredWidth();

mHeight = getMeasuredHeight();

@Override

protected void onLayout(boolean changed, int left, int top, int right, int bottom) \{

super.onLayout(changed, left, top, right, bottom);

initDraw();

public void initDraw() \{

mCount = getChildCount();

for (int i = 0; i < mCount; i++) \{

View child = getChildAt(i);

child.getWidth();

child.getHeight();

if (i == 0) \{

mX = mWidth / 2;

mY = mHeight / 2;

\} else \{

mAngle = 180 - 180 / (mCount - 1) \* (i - 1);

mX = (int) (mWidth / 2 + Math.cos(Math.toRadians(mAngle)) \* mRadius);

mY = (int) (mHeight / 2 - Math.sin(Math.toRadians(mAngle)) \* mRadius);

child.layout(mX - child.getWidth() / 2, mY - child.getHeight() / 2, mX + child.getWidth() / 2, mY + child.getHeight() / 2);

/\*\*

\* 初始化环绕数量半径

\*/

public void init(int count, int radius) \{

mRadius = radius;

for (int i = 0; i < count + 1; i++) \{

CircleImageView imageView = new CircleImageView(getContext());

if (i == 0) \{

//i为0时为圆型头像

View view = LayoutInflater.from(getContext()).inflate(R.layout.layout\_header, null, true);

mCircleImageView = (CircleImageView) view.findViewById(R.id.iv\_header);

addView(view);

\} else \{

addView(imageView, MeasureUtil.dip2px(15), MeasureUtil.dip2px(15));

mCircleImageViewList.add(imageView);

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

[be2c64df56f373b6532335a7fa3673f2.png]: /images/20221014/d6b85ead0e8d46fbaf7c1ba519e5186a.png

android自定义view圆,Android自定义View实现圆形环绕效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 android自定义view圆,Android自定义View实现圆形环绕效果

相关 Android 自定义View (三) 圆环交替等待效果

相关 Android 自定义View (三) 圆环交替等待效果

相关 android自定义view

相关 Android自定义View

相关 Android 自定义View

相关 Android自定义View

相关 Android自定义view

相关 Android自定义View

相关 Android 自定义view