首页 > 学院 > 开发设计 > 正文

一个点击滚动展开的控件

2019-11-08 00:31:53
字体:
来源:转载
供稿:网友

首先看下xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/widget33" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/img_menu" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@drawable/set_icon_3"/> <ImageView android:id="@+id/img_menu1" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@drawable/set_icon_4" android:visibility="gone"/> <ImageView android:id="@+id/img_menu2" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@drawable/set_icon_1" android:visibility="gone"/> <ImageView android:id="@+id/img_menu3" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@drawable/set_icon_4" android:visibility="gone"/> <ImageView android:id="@+id/img_menu4" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@drawable/set_icon_1" android:visibility="gone"/> <ImageView android:id="@+id/img_menu5" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@drawable/set_icon_4" android:visibility="gone"/></RelativeLayout>

这个是自定义类

public class ArcMenu { PRivate Activity context; private int[] imageRes; private List<ImageView> imageViewList = new ArrayList<>(); private boolean isShowMenu = false; int radius = 180; double angle; public ArcMenu(Activity context, int[] imageRes) { angle = Math.PI / 2 / (imageRes.length - 2); radius = Tool.dip2px(context, radius); this.context = context; this.imageRes = imageRes; for (int imagRe : imageRes) { ImageView imageView = (ImageView) context.findViewById(imagRe); imageViewList.add(imageView); } } private void openMenu() { isShowMenu = true; setItemVisible(true); ObjectAnimator animator1; ObjectAnimator animator2; List<ObjectAnimator> objectAnimators = new ArrayList<>(); AnimatorSet set = new AnimatorSet(); for (int i = 1; i < imageRes.length; i++) { animator1 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", (float) (-radius * Math.sin(angle * (i - 1)))); animator2 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", (float) (-radius * Math.cos(angle * (i - 1)))); objectAnimators.add(animator1); objectAnimators.add(animator2); } for (int i = 0; i < objectAnimators.size(); i++) { set.playTogether(objectAnimators.get(i)); } set.setDuration(200); set.start(); //第0个图标,菜单图标,加入动画 ObjectAnimator.ofFloat(imageViewList.get(0), "rotation", 0, 135f).setDuration(200).start(); } private void closeMenu() { isShowMenu = false; ObjectAnimator animator1 = null; ObjectAnimator animator2; List<ObjectAnimator> objectAnimators = new ArrayList<>(); AnimatorSet set = new AnimatorSet(); for (int i = 1; i < imageRes.length; i++) { animator1 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", 0); animator2 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", 0); objectAnimators.add(animator1); objectAnimators.add(animator2); } animator1.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { setItemVisible(false); super.onAnimationEnd(animation); } }); for (int i = 0; i < objectAnimators.size(); i++) { set.playTogether(objectAnimators.get(i)); } set.setDuration(200); set.start(); ObjectAnimator.ofFloat(imageViewList.get(0), "rotation", 135f, 0).setDuration(200).start(); } public void switchMenu() { if (isShowMenu) { closeMenu(); } else { openMenu(); } } public void clickItem() { setItemVisible(false); closeMenu(); } private void setItemVisible(boolean isVisible) { for (int i = 1; i < imageRes.length; i++) { if (isVisible) { imageViewList.get(i).setVisibility(View.VISIBLE); } else { imageViewList.get(i).setVisibility(View.GONE); } } }}

MainActivity类是这样的.

public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ArcMenu mArcMenu; private int[] imageRes = {R.id.img_menu, R.id.img_menu1, R.id.img_menu2, R.id.img_menu3, R.id.img_menu4, R.id.img_menu5}; private ImageView mImgMenu; private ImageView mImgMenu1; private ImageView mImgMenu2; private ImageView mImgMenu3; private ImageView mImgMenu4; private ImageView mImgMenu5; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mArcMenu = new ArcMenu(this, imageRes); mImgMenu = (ImageView) findViewById(R.id.img_menu); mImgMenu1 = (ImageView) findViewById(R.id.img_menu1); mImgMenu2 = (ImageView) findViewById(R.id.img_menu2); mImgMenu3 = (ImageView) findViewById(R.id.img_menu3); mImgMenu4 = (ImageView) findViewById(R.id.img_menu4); mImgMenu5 = (ImageView) findViewById(R.id.img_menu5); mImgMenu.setOnClickListener(this); mImgMenu1.setOnClickListener(this); mImgMenu2.setOnClickListener(this); mImgMenu3.setOnClickListener(this); mImgMenu4.setOnClickListener(this); mImgMenu5.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.img_menu: mArcMenu.switchMenu(); break; case R.id.img_menu1: mArcMenu.clickItem(); break; case R.id.img_menu2: mArcMenu.clickItem(); break; case R.id.img_menu3: mArcMenu.clickItem(); break; case R.id.img_menu4: mArcMenu.clickItem(); break; default: break; } }}

非常简洁的实现了


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表