首页 > 系统 > Android > 正文

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

2019-10-21 21:26:02
字体:
来源:转载
供稿:网友

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

Android,自定义View,圆形环绕

首先自定义一个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<CircleImageView> 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);   }  } }}

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


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表