├── .gitignore ├── CheckBoxAnimation.rar ├── README.md ├── gif └── screen.gif └── screenshots ├── Screenshot_batch.png └── Screenshot_normal.png /.gitignore: -------------------------------------------------------------------------------- 1 | CheckBoxAnimation/.settings 2 | CheckBoxAnimation/bin 3 | CheckBoxAnimation/gen 4 | CheckBoxAnimation/.classpath 5 | CheckBoxAnimation/.project 6 | CheckBoxAnimation/project.properties -------------------------------------------------------------------------------- /CheckBoxAnimation.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wch0620/CheckBoxAnimation/475f52104f86f35371baf54c02832fcb8a615563/CheckBoxAnimation.rar -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UI_第一弹：Android中ListView切换批量模式动画效果 2 | 3 | ##一、背景 4 | 很多时候，对于ListView需要切换批量操作模式，通常进入批量模式的方式有：长按列表和菜单方式。于是封装了一个ListView的批量操作的Demo。 5 | 6 | ##二、效果图： 7 | ![Gif](https://github.com/wch0620/CheckBoxAnimation/raw/master/gif/screen.gif) 8 | 9 | ##三、微信公众号： 10 | **关注微信公众号，获取密码，了解更多。** 11 | 12 | **微信公众号：jike_android** 13 | 14 | ![公众号](https://github.com/wch0620/StatusBar/raw/master/WeiXin/qrcode.jpg) 15 | 16 | ##四、功能 17 | 1. CheckBox显示和隐藏动画 18 | 2. 封装一个顶部栏TopBar，并且实现批量操作的切换动画 19 | 3. 封装一个底部菜单，实现显示和隐藏动画。 20 | 21 | ##五、实现 22 | 23 | 定义接口TopBar与BottomBar。 24 | 定义TopBar的类型： 25 | ``` 26 | public enum TopBarStyle { 27 | 28 | /** 常规顶部栏样式，支持主副标题 */ 29 | TOP_BAR_NOTMAL_STYLE, 30 | 31 | /** 标题区为批量模式 */ 32 | TOP_BAR_BATCH_EDIT_STYLE, 33 | 34 | /** 使用自定义的View作为顶部栏的样式 */ 35 | TOP_BAR_CUSTOM_STYLE, 36 | 37 | } 38 | ``` 39 |
40 | 41 | 42 | | 常量 | 说明 | 43 | | -------------- | ---------------------------- | 44 | | TOP_BAR_NOTMAL_STYLE | 普通模式 | 45 | | TOP_BAR_BATCH_EDIT_STYLE | 批量模式 | 46 | | TOP_BAR_CUSTOM_STYLE | 自定义模式 | 47 | 48 | 49 |
50 | TopBar的回调接口 51 | ``` 52 | public interface BatchCallBack { 53 | /** 54 | * 全选之回调 55 | */ 56 | public void onSelectAllItems(); 57 | 58 | /** 59 | * 全清之回调 60 | */ 61 | public void onClearAllItems(); 62 | 63 | /** 64 | * 获取列表项数目 65 | */ 66 | public int getTotalItemCount(); 67 | 68 | /** 69 | * 获取当前选中数目 70 | */ 71 | public int getCheckedItemCount(); 72 | } 73 | ``` 74 | 通过设置SetTopBarStyle的时候切换TopBar。 75 | ``` 76 | switch (style) { 77 | case TOP_BAR_NOTMAL_STYLE: 78 | View normalView = mLayoutInflater.inflate(R.layout.top_view_normal, mContentContainer); 79 | mBackImage = (ImageView) normalView.findViewById(R.id.back); 80 | mTitleView = (TextView) normalView.findViewById(R.id.title); 81 | mSubTitleView = (TextView) normalView.findViewById(R.id.subtitle); 82 | 83 | mBackImage.setOnClickListener(mBackClickListener); 84 | break; 85 | case TOP_BAR_BATCH_EDIT_STYLE: 86 | View batchView = mLayoutInflater.inflate(R.layout.top_view_batch, mContentContainer); 87 | mCancelView = (TextView) batchView.findViewById(R.id.cancel); 88 | mTitleView = (TextView) batchView.findViewById(R.id.title); 89 | mSubTitleView = (TextView) batchView.findViewById(R.id.subtitle); 90 | mChooseView = (TextView) batchView.findViewById(R.id.all); 91 | 92 | mCancelView.setOnClickListener(new OnClickListener() { 93 | 94 | @Override 95 | public void onClick(View v) { 96 | if(mCancelListener != null) { 97 | mCancelListener.onClick(mCancelView); 98 | } 99 | } 100 | }); 101 | 102 | ``` 103 | 104 | TopBar动画： 105 | 106 | ``` 107 | mAnimationHide = new AlphaAnimation(1.0f, 0.0f); 108 | mAnimationHide.setInterpolator(new DecelerateInterpolator()); 109 | mAnimationHide.setDuration(200); 110 | mAnimationShow = new AlphaAnimation(0.0f, 1.0f); 111 | mAnimationShow.setInterpolator(new AccelerateInterpolator()); 112 | mAnimationShow.setDuration(600); 113 | ``` 114 | 115 | BottomBar动画： 116 | 117 | ``` 118 | mShowAnimatorSet = new AnimatorSet(); 119 | float distance = mBottomBarHeight / 0.618f; 120 | long duration = 450L; 121 | ObjectAnimator translateAnimator = ObjectAnimator.ofFloat(mBottomBarLayout, "translationY", distance, 0.0f); 122 | translateAnimator.setDuration(duration); 123 | ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mContentContainer, "alpha", 0.0f, 1.0f); 124 | alphaAnimator.setDuration(duration); 125 | mShowAnimatorSet.play(translateAnimator).with(alphaAnimator); 126 | ``` 127 | 128 | CheckBox动画： 129 | ``` 130 | final ObjectAnimator transBodyAnimator = new ObjectAnimator(); 131 | final PropertyValuesHolder trans = PropertyValuesHolder.ofFloat("TranslationX", 0.0f, transValue); 132 | transBodyAnimator.setTarget(holder.contentLayout); 133 | transBodyAnimator.setValues(trans); 134 | transBodyAnimator.setDuration(DURATION); 135 | 136 | ObjectAnimator checkBoxAnim = new ObjectAnimator(); 137 | final PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("ScaleX", 0.0f, 1.0f); 138 | final PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("ScaleY", 0.0f, 1.0f); 139 | final PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat("Alpha", 0.0f, 1.0f); 140 | checkBoxAnim.setValues(scaleX, scaleY, alpha); 141 | checkBoxAnim.setTarget(holder.checkBox); 142 | checkBoxAnim.setDuration(DURATION); 143 | checkBoxAnim.setInterpolator(new DecelerateInterpolator()); 144 | ``` 145 | 146 | 批量模式下，用来记录当前选中状态 147 | ``` 148 | private SparseArray mSelectState = new SparseArray(); 149 | ``` 150 | 151 | 152 | 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /gif/screen.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wch0620/CheckBoxAnimation/475f52104f86f35371baf54c02832fcb8a615563/gif/screen.gif -------------------------------------------------------------------------------- /screenshots/Screenshot_batch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wch0620/CheckBoxAnimation/475f52104f86f35371baf54c02832fcb8a615563/screenshots/Screenshot_batch.png -------------------------------------------------------------------------------- /screenshots/Screenshot_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wch0620/CheckBoxAnimation/475f52104f86f35371baf54c02832fcb8a615563/screenshots/Screenshot_normal.png --------------------------------------------------------------------------------