|
| 1 | +# android-pile-layout |
| 2 | +An abnormal horizontal ListView-like pile layout. |
| 3 | + |
| 4 | +### captured images |
| 5 | +The following pictures were captured earlier. Since the source code and the outputted-apk have changed some params, you will have a different UI when you directly run the code or install the apk file. Hope there has no confusions later. <br><br> |
| 6 | +<img src="capture/capture1.gif" width="360" height="645"/> <img src="capture/capture2.gif" width="360" height="645"/> |
| 7 | + |
| 8 | +### design |
| 9 | +Recently I have seen this kind of UI design, and at the first sight I was trying to implement it by using RecyclerView's LayoutManager. Unfortunately, I am unable to contrust a clear Math model while sliding the PileView. After several tries, I gave up LayoutManager, and find another way for this implementation. If you make LayoutManager works well for this UI design, please tell me later. |
| 10 | + |
| 11 | +### how to use |
| 12 | +1. declare PileLayout in your xml file |
| 13 | +``` xml |
| 14 | +<com.stone.pile.libs.PileLayout |
| 15 | + android:id="@+id/pileLayout" |
| 16 | + android:layout_width="match_parent" |
| 17 | + android:layout_height="wrap_content" |
| 18 | + android:paddingBottom="5dp" |
| 19 | + android:paddingTop="5dp" |
| 20 | + pile:displayCount="1.5" |
| 21 | + pile:interval="10dp" |
| 22 | + pile:scaleStep="0.22" |
| 23 | + pile:widthHeightRate="1.22" /> |
| 24 | +``` |
| 25 | +Meanwhile, pileLayout is able to be customized by these 4 params: |
| 26 | + |
| 27 | +|name|format|description| |
| 28 | +|:---:|:---:|:---:| |
| 29 | +| interval | dimension |items-margin each other |
| 30 | +| sizeRatio | float |each item's height/witdth |
| 31 | +| scaleStep | float |size scale step when needed |
| 32 | +| displayCount | float |number of items that may display |
| 33 | + |
| 34 | +2. in Java files: |
| 35 | +``` java |
| 36 | +pileLayout = (PileLayout) findViewById(R.id.pileLayout); |
| 37 | +pileLayout.setAdapter(new PileLayout.Adapter() { |
| 38 | + @Override |
| 39 | + public int getLayoutId() { |
| 40 | + // item's layout resource id |
| 41 | + return R.layout.item_layout; |
| 42 | + } |
| 43 | + |
| 44 | + @Override |
| 45 | + public void bindView(View view, int position) { |
| 46 | + ViewHolder viewHolder = (ViewHolder) view.getTag(); |
| 47 | + if (viewHolder == null) { |
| 48 | + viewHolder = new ViewHolder(); |
| 49 | + viewHolder.imageView = (ImageView) view.findViewById(R.id.imageView); |
| 50 | + view.setTag(viewHolder); |
| 51 | + } |
| 52 | + // recycled view bind new position |
| 53 | + } |
| 54 | + |
| 55 | + @Override |
| 56 | + public int getItemCount() { |
| 57 | + // item count |
| 58 | + return dataList.size(); |
| 59 | + } |
| 60 | + |
| 61 | + @Override |
| 62 | + public void displaying(int position) { |
| 63 | + // right displaying the left biggest itemView's position |
| 64 | + } |
| 65 | + |
| 66 | + @Override |
| 67 | + public void onItemClick(View view, int position) { |
| 68 | + // on item click |
| 69 | + } |
| 70 | +}); |
| 71 | +``` |
| 72 | + |
| 73 | +### demo apk |
| 74 | +[download](capture/app-debug.apk) |
| 75 | + |
| 76 | +## License |
| 77 | + |
| 78 | + Copyright 2017, xmuSistone |
| 79 | + |
| 80 | + Licensed under the Apache License, Version 2.0 (the "License"); |
| 81 | + you may not use this file except in compliance with the License. |
| 82 | + You may obtain a copy of the License at |
| 83 | + |
| 84 | + http://www.apache.org/licenses/LICENSE-2.0 |
| 85 | + |
| 86 | + Unless required by applicable law or agreed to in writing, software |
| 87 | + distributed under the License is distributed on an "AS IS" BASIS, |
| 88 | + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 89 | + See the License for the specific language governing permissions and |
| 90 | + limitations under the License. |
0 commit comments