- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
昨天我尝试创建一个自定义 View ,其中包含所有元素像按钮,图像按钮,......围绕一个圆圈放置等间距。
我的目标是得到这个:
我试过这段代码:
public class CircleView extends RelativeLayout {
private OnDrop onDrop = null;
private int radius = -1;
private double step = -1;
private double angle = -1;
private static final int CENTER_ID = 111;
public CircleView(Context context, OnDrop onDrop, int radius, List<View> elements) {
super(context);
this.onDrop = onDrop;
this.radius = radius;
this.step = (2 * Math.PI) / elements.size();
RelativeLayout.LayoutParams layoutParamsView = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
this.setLayoutParams(layoutParamsView);
this.addView(this.createCenter(context));
for(View view : elements) {
this.addView(this.placeView(view));
}
}
private View placeView(View view) {
RelativeLayout.LayoutParams layoutParams = createNewRelativeLayoutParams();
int x = (int)(view.getWidth() / 2 + this.radius * Math.cos(this.angle));
int y = (int)(view.getHeight() / 2 + this.radius * Math.sin(this.angle));
this.angle += this.step;
layoutParams.setMargins(x, 0, 0, y);
view.setLayoutParams(layoutParams);
return view;
}
private View createCenter(Context context) {
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(Globals.DRAG_TARGET_SIZE, Globals.DRAG_TARGET_SIZE);
layoutParams.addRule(CENTER_HORIZONTAL);
layoutParams.addRule(CENTER_VERTICAL);
Button button = new Button(context);
button.setId(CENTER_ID);
button.setLayoutParams(layoutParams);
return button;
}
private RelativeLayout.LayoutParams createNewRelativeLayoutParams() {
RelativeLayout.LayoutParams layoutParameters = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParameters.addRule(RelativeLayout.ABOVE, CENTER_ID);
layoutParameters.addRule(RIGHT_OF, CENTER_ID);
return layoutParameters;
}
}
我从这段代码中得到的是:
这意味着创建的圆之间的间距相等这些元素工作得很好。但是还是有问题与配售。 x 和 y 坐标有问题。
谁能帮我弄清楚如何更正此偏移量?
最佳答案
我实现了自己的布局以围绕中心点放置圆形按钮:
/**
*
*/
public class MenuCircularLayout extends MenuDragableButtonsLayout {
/**
*
*/
private RelativeLayout relativeLayoutCenter = null;
/**
*
*/
private List<View> menuButtons = null;
/**
*
*/
private ImageButton imageButtonCenter = null;
/**
*
*/
private int radius = -1;
/**
*
*/
private double step = -1;
/**
*
*/
private double angle = -1;
/**
*
*/
private static final int CENTER_ID = View.generateViewId();
/**
*
* @param context
* @param callbackDrag
* @param menuButtons
*/
public MenuCircularLayout(Context context, CallbackDrag callbackDrag, List<View> menuButtons) {
super(context);
this.callbackDrag = callbackDrag;
this.menuButtons = menuButtons;
this.radius = Sizes.getDpToPx(context, Sizes.MENU_ICON_RADIUS);
this.step = (2 * Math.PI) / menuButtons.size();
this.initView();
}
/**
*
*/
private void initView() {
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
this.setLayoutParams(layoutParams);
RelativeLayout.LayoutParams layoutParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, Sizes.getOptimalMenuHeight(this.getContext()));
layoutParamsCenter.addRule(RelativeLayout.CENTER_IN_PARENT);
this.relativeLayoutCenter = new RelativeLayout(this.getContext());
this.relativeLayoutCenter.setLayoutParams(layoutParamsCenter);
this.relativeLayoutCenter.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO);
RelativeLayout.LayoutParams layoutParamsImageButtonCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParamsImageButtonCenter.addRule(RelativeLayout.CENTER_IN_PARENT);
this.imageButtonCenter = new ImageButton(this.getContext());
this.imageButtonCenter.setId(CENTER_ID);
this.imageButtonCenter.setLayoutParams(layoutParamsImageButtonCenter);
this.imageButtonCenter.setImageDrawable(Images.loadDrawableFromFile(this.getContext(), Paths.IMAGE_POWER));
this.imageButtonCenter.setBackground(null);
this.imageButtonCenter.setOnDragListener(new DropTargetOnDragListener());
this.imageButtonCenter.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO);
this.relativeLayoutCenter.addView(imageViewCenter);
this.relativeLayoutCenter.addView(this.imageButtonCenter);
this.relativeLayoutCenter.setOnDragListener(new MenuButtonOnDragListener());
for(View view : this.menuButtons) {
this.relativeLayoutCenter.addView(this.placeView(view));
}
this.addView(this.relativeLayoutCenter);
}
/**
*
* @param view
* @return
*/
private View placeView(View view) {
view.measure(0, 0);
this.imageButtonCenter.measure(0, 0);
int x = (int)((view.getMeasuredWidth() / 2) + this.radius * Math.cos(this.angle));
int y = (int)((view.getMeasuredHeight() / 2) + this.radius * Math.sin(this.angle));
this.angle += this.step;
int deltaX = view.getMeasuredWidth();
int deltaY = view.getMeasuredHeight();
int deltaImageX = this.imageButtonCenter.getMeasuredWidth() / 2;
int deltaImageY = this.imageButtonCenter.getMeasuredHeight() / 2;
int xToDraw = ((x - deltaX) - deltaImageX);
int yToDraw = ((y - deltaY) - deltaImageY);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams.addRule(RelativeLayout.ABOVE, CENTER_ID);
layoutParams.addRule(RelativeLayout.RIGHT_OF, CENTER_ID);
layoutParams.setMargins(xToDraw, 0, 0, yToDraw);
view.setLayoutParams(layoutParams);
view.setOnTouchListener(this);
return view;
}
/**
*
*/
@Override
public void removeAllViews() {
super.removeAllViews();
this.relativeLayoutCenter.removeAllViews();
}
}
/**
*
*/
public abstract class MenuDragableButtonsLayout extends RelativeLayout implements OnTouchListener {
/**
*
*/
protected CallbackDrag callbackDrag = null;
/**
*
* @param context
*/
public MenuDragableButtonsLayout(Context context) {
super(context);
}
/**
*
*/
@Override
public boolean onTouch(View view, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
view.startDrag(null, shadowBuilder, view, 0);
view.setVisibility(View.INVISIBLE);
} break;
case MotionEvent.ACTION_UP: {
view.performClick();
view.setVisibility(View.VISIBLE);
} break;
}
return true;
}
/**
*
*/
public class MenuButtonOnDragListener implements OnDragListener {
/**
*
*/
@Override
public boolean onDrag(View view, DragEvent event) {
View sourceView = (View) event.getLocalState();
float sourceX = sourceView.getX();
float sourceY = sourceView.getY();
float dropX = event.getX() - (sourceView.getWidth() / 2);
float dropY = event.getY() - (sourceView.getHeight() / 2);
switch(event.getAction()) {
case DragEvent.ACTION_DRAG_EXITED : {
TranslateAnimation animation = new TranslateAnimation(dropX - sourceX, 0, dropY - sourceY, 0);
animation.setDuration(300);
sourceView.startAnimation(animation);
sourceView.setX(sourceX);
sourceView.setY(sourceY);
sourceView.setVisibility(View.VISIBLE);
} break;
case DragEvent.ACTION_DROP : {
sourceView.setX(dropX);
sourceView.setY(dropY);
sourceView.setVisibility(View.VISIBLE);
TranslateAnimation animation = new TranslateAnimation(dropX - sourceX, 0, dropY - sourceY, 0);
animation.setDuration(300);
sourceView.startAnimation(animation);
sourceView.setX(sourceX);
sourceView.setY(sourceY);
} break;
}
return true;
}
}
/**
*
*/
public class DropTargetOnDragListener implements OnDragListener {
/**
*
*/
@Override
public boolean onDrag(View view, DragEvent event) {
switch(event.getAction()) {
case DragEvent.ACTION_DROP :
return callbackDrag.onDragCompleted(view, event);
default :
return true;
}
}
}
}
/**
*
*/
public interface CallbackDrag {
/**
*
* @param view
* @param event
* @return
*/
boolean onDragCompleted(final View view, final DragEvent event);
}
像这样使用它:
public class AnyClass implements CallbackDrag {
private MenuCircularLayout circleView = null;
/**
*
*/
private void initMenu() {
String email = this.getEmail();
Map<String, Boolean> config = this.preferencesSettings.getSettings(email);
List<View> views = new ArrayList<View>();
views.add(this.buttonProfile);
views.add(this.buttonMeasure);
if(this.circleView != null) {
this.circleView.removeAllViews();
this.layoutMenu.removeView(this.circleView);
this.circleView = null;
}
this.circleView = new MenuCircularLayout(this.getActivity(), this, views);
this.circleView.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO);
this.layoutMenu.addView(this.circleView);
}
/**
*
*/
@Override
public boolean onDragCompleted(View view, DragEvent event) {
View sourceView = (View) event.getLocalState();
sourceView.setVisibility(View.VISIBLE);
if(sourceView.equals(this.buttonMeasure)) {
this.performNFCResult();
} else if(sourceView.equals(this.buttonProfile)) {
this.performProfile();
}
return true;
}
}
关于android - 自定义圆形 View 。放置 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26818748/
我想要一个“真正的”圆形 UIView,以避免应用圆角半径的正方形 View 。 因为我使用的是重力,我的圆圈不能很好地显示,因为它们在角落里不能相互接触(屏幕来自“Debug View Hierar
所以我前段时间建了一点突破克隆 ,我想稍微升级一下,主要是为了碰撞。当我第一次制作它时,我在我的球和我的砖 block 之间进行了基本的“碰撞”检测,这实际上将球视为另一个矩形。但这造成了边缘碰撞的问
我正在尝试在矩形内创建一个椭圆形/圆形。我正在尝试在 Canvas 上对位图图像执行此操作。这是我的代码: int x = (int) (midpoint.x*xRatio); int y = (in
我想知道是否可以绘制圆形 UIButton(不是圆形矩形)。 当我在自定义类型的 UIButton 中添加圆形图像时,它看起来像一个圆形按钮。但是在按钮被点击的那一刻,按钮的边界变得可见,所以它看起来
我有this slider在我的网站上。我想将 slider 移动到 360 度。我如何更改以下脚本来执行此操作? $(document).ready(function() { /*Slide
我正在 PyQt 中使用 QGraphicsView 构建一个 GUI,它将显示互连项目的大型网络,并且我希望能够叠加一个较小的门户来显示网络的远处部分 - 有点像“画中画” “之类的事情。这本身并不
我正在尝试为个人资料图片圈出 ImageView 。在我限制 UiScreen 宽度之前它工作正常。 代码如下 import UIKit class ViewController: UIViewCon
我想创建一个如下所示的圆形 slider 。 但我还想要两个功能。 1) 我想从任意点启动 slider ,但在图 1 中。从0开始。 2) 我想在单个圆形黑色图中包含多个 slider 。 我正在分
我有一个帖子 div,它位于一个奇怪的背景之上,正如您在此屏幕截图中所见 http://i.stack.imgur.com/L5Qj0.png文字越过我想要的区域。我尝试使用 border-radiu
我想知道,如何在 ios 8 或 9 中创建圆形模糊文本输入字段和模糊按钮。我应该使用核心动画还是简单地在 ps 中绘制 png?我从来没有为 UI 使用过 Core Animation,你能推荐一个
我希望在包含在主圆圈中的圆圈底部创建一个深色蒙版。 你可以使用 css masks 来做到这一点吗? 请参阅fiddle Change Profile
我有一个带有 ImageView 的自定义表格 View 单元格。我试图使 ImageView 成为圆形,但它不是圆形的,我无法查明问题所在。 import UIKit class Legislato
最近一直在opencv里瞎折腾,一直在摸索绘图函数(cvCircle(...), cvRectangle(...), etc...)。它们可以正常工作,但我只能在之前加载的图像上绘制它们。 有没有办法
我有一个 FXML 文件、一个 CSS 文件和一个 Controller.java 文件。当鼠标悬停在 FXML 文件中的按钮上时, 例如fx:id="负载" 如何在舞台上创建圆形节点? 我目前正在这
我对圆-矩形相交有疑问。虽然是一个数字我发现了关于它的讨论,我无法得到答案。我的问题是 - 我的 View /窗口 (320 X 480) 有一个矩形下部 (100-200,0-50) .And a
假设我们有以下一组项目 View : View1 -> View2 -> View3 -> ... -> View(n-1) -> View(n) 在经典的 RecyclerView 上,View1
我可以在“didTapAt”事件中在谷歌地图上添加许多标记和圆圈,但我也想删除它们,对于标记我可以在“didTap 标记”事件中执行此操作但我如何才能删除它的形状而不是其他形状? 最佳答案 let c
我正在尝试获得一个圆形的 UIImageView 但它似乎在不同的设备上呈现不同; 在 iPhone Xr 上看起来像这样: 在 iPhone 7 上看起来像这样: 我的高度限制为 60,代码如下:
我想做一个如下图所示的圆形 slider 。jQuery 能够做到这一点吗? 我知道直 slider 的工作原理,但我想制作一个 HTML5 圆形 slider 。这是我在网上找到的 http://j
我有一个包含图像的 UIScrollView。当用户到达最后一张图片并滑动手指查看下一张图片时,我想显示第一张图片。同样,当用户在第一张图片上滑动查看上一张图片时,我想显示最后一张图片。简而言之,这将
我是一名优秀的程序员,十分优秀!