您好,登錄后才能下訂單哦!
之前項(xiàng)目中需要實(shí)現(xiàn)一個(gè)四周環(huán)繞中心圓形頭像的效果,感覺(jué)還是自定義比較方便,于是就自己封裝了一個(gè)控件去實(shí)現(xiàn)。先貼張圖顯示最終效果。
首先自定義一個(gè)View繼承自LinearLayout,通過(guò)動(dòng)態(tài)添加childView的方式將子控件添加到View中。思路是先添加中間圓形頭像,然后添加周圍的小圖標(biāo)。
1.實(shí)現(xiàn)了圓形頭像的顯示,可以去參考網(wǎng)上或github上的demo,圓形頭像的外圈其實(shí)是一個(gè)View,然后再把頭像這個(gè)View蓋到這個(gè)View上。
2.計(jì)算好周圍相鄰view之間的角度,這里是要水平鋪滿,最多6個(gè),所以相鄰之間的角度為180/ (6 - 1) = 36度。如果是360環(huán)繞,放n個(gè)圖標(biāo),則相鄰之間的角度應(yīng)該為360 / n 。
3.設(shè)置圖標(biāo)到圓心的距離r。距離要大于頭像的半徑加上圖標(biāo)的半徑。
4.確定圖標(biāo)的坐標(biāo):控件的寬為width,高為height。假設(shè)左邊第一個(gè)圖標(biāo)是起始位置。圖標(biāo)的起始角度為α= 180 - 36 * i,則它的橫坐標(biāo)為width/2 + cos(α)r,縱坐標(biāo)為height/2 - sin(α) r。
5.設(shè)置坐標(biāo)點(diǎn),默認(rèn)為圖標(biāo)的左上角頂點(diǎn)和右下點(diǎn),如果想設(shè)圖標(biāo)的中心點(diǎn)為坐標(biāo),則左上定點(diǎn)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. * 添加圓形子控件實(shí)現(xiàn)時(shí)鐘環(huán)繞效果 */ public class CircleImageLayout extends LinearLayout{ private double mAngle = 0;//初始角度 private int mX, mY;//子控件位置 private int mWidth, mHeight;//控件長(zhǎng)寬 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<>(); } /** * 設(shè)置子控件到控件圓心的位置 */ 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); } } /** * 初始化環(huán)繞數(shù)量半徑 */ 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時(shí)為圓型頭像 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); } } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。