4
我正在一個社交網絡應用程序中工作，其中我的要求是從圖庫中獲取圖像並在中顯示馬賽克樣式。它與網格視圖相似，但這裏不同圖像的大小各不相同。我附上了一張圖片來顯示演示屏幕。 
在Android中以馬賽克風格顯示來自圖庫的圖像？
請爲此建議我。
A
回答
2
感謝Siddharth Lele的理念，讓我來到這個解決方案。我正在粘貼結構化的代碼。我以一種格式排列時遇到了一些問題，現在我認爲其他人可以用這種張力來解決問題。請記住，代碼僅適用於4.0及以上版本。
activity_main.xml中
<com.jake.quiltviewsample.QuiltView
android:id="@+id/quilt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dip" >
</com.jake.quiltviewsample.QuiltView>
</FrameLayout>
MainActivity.java
public class MainActivity extends Activity {
public QuiltView quiltView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
quiltView = (QuiltView) findViewById(R.id.quilt);
quiltView.setChildPadding(5);
addTestQuilts(200);
}
public void addTestQuilts(int num){
ArrayList<ImageView> images = new ArrayList<ImageView>();
for(int i = 0; i < num; i++){
ImageView image = new ImageView(this.getApplicationContext());
image.setScaleType(ScaleType.CENTER_CROP);
if(i % 2 == 0)
image.setImageResource(R.drawable.mayer);
else
image.setImageResource(R.drawable.mayer1);
images.add(image);
}
quiltView.addPatchImages(images);
}
}
QuiltView.java
public class QuiltView extends FrameLayout implements OnGlobalLayoutListener {
public QuiltViewBase quilt;
public ViewGroup scroll;
public int padding = 5;
public boolean isVertical = false;
public ArrayList<View> views;
private Adapter adapter;
public QuiltView(Context context,boolean isVertical) {
super(context);
this.isVertical = isVertical;
setup();
}
public QuiltView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.QuiltView);
String orientation = a.getString(R.styleable.QuiltView_scrollOrientation);
if(orientation != null){
if(orientation.equals("vertical")){
isVertical = true;
} else {
isVertical = false;
}
}
setup();
}
public void setup(){
views = new ArrayList<View>();
if(isVertical){
scroll = new ScrollView(this.getContext());
} else {
scroll = new HorizontalScrollView(this.getContext());
}
quilt = new QuiltViewBase(getContext(), isVertical);
scroll.addView(quilt);
this.addView(scroll);
}
private DataSetObserver adapterObserver = new DataSetObserver(){
public void onChanged(){
super.onChanged();
onDataChanged();
}
public void onInvalidated(){
super.onInvalidated();
onDataChanged();
}
public void onDataChanged(){
setViewsFromAdapter(adapter);
}
};
public void setAdapter(Adapter adapter){
this.adapter = adapter;
adapter.registerDataSetObserver(adapterObserver);
setViewsFromAdapter(adapter);
}
private void setViewsFromAdapter(Adapter adapter) {
this.removeAllViews();
for(int i = 0; i < adapter.getCount(); i++){
quilt.addPatch(adapter.getView(i, null, quilt));
}
}
public void addPatchImages(ArrayList<ImageView> images){
for(ImageView image: images){
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
image.setLayoutParams(params);
LinearLayout wrapper = new LinearLayout(this.getContext());
wrapper.setPadding(padding, padding, padding, padding);
wrapper.addView(image);
quilt.addPatch(wrapper);
}
}
public void addPatchViews(ArrayList<View> views_a){
for(View view: views_a){
quilt.addPatch(view);
}
}
public void addPatchesOnLayout(){
for(View view: views){
quilt.addPatch(view);
}
}
public void removeQuilt(View view){
quilt.removeView(view);
}
public void setChildPadding(int padding){
this.padding = padding;
}
public void refresh(){
quilt.refresh();
}
public void setOrientation(boolean isVertical){
this.isVertical = isVertical;
}
@Override
public void onGlobalLayout() {
//addPatchesOnLayout();
}
}
**QuiltViewBase.java**
public class QuiltViewBase extends GridLayout {
public int[] size;
public int columns;
public int rows;
public int view_width = -1;
public int view_height = -1;
public boolean isVertical = true;
public ArrayList<View> views;
public QuiltViewBase(Context context, boolean isVertical) {
super(context);
this.isVertical = isVertical;
if(view_width == -1){
DisplayMetrics metrics = this.getResources().getDisplayMetrics();
int width = metrics.widthPixels;
int height = metrics.heightPixels - 120;
view_width = width - this.getPaddingLeft() - this.getPaddingRight();
view_height = height - this.getPaddingTop() - this.getPaddingBottom();
}
views = new ArrayList<View>();
setup();
}
public void setup(){
if(isVertical){
setupVertical();
} else {
setupHorizontal();
}
}
public void setupVertical(){
size = getBaseSizeVertical();
this.setColumnCount(columns);
this.setRowCount(-1);
this.setOrientation(this.HORIZONTAL);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
this.setLayoutParams(params);
}
public void setupHorizontal(){
size = getBaseSizeHorizontal();
this.setRowCount(rows);
this.setColumnCount(-1);
this.setOrientation(this.VERTICAL);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
this.setLayoutParams(params);
}
public void addPatch(View view){
int count = this.getChildCount();
QuiltViewPatch child = QuiltViewPatch.init(count, columns);
GridLayout.LayoutParams params = new GridLayout.LayoutParams();
params.width = size[0]*child.width_ratio;
params.height = size[1]*child.height_ratio;
params.rowSpec = GridLayout.spec(Integer.MIN_VALUE, child.height_ratio);
params.columnSpec = GridLayout.spec(Integer.MIN_VALUE, child.width_ratio);
view.setLayoutParams(params);
addView(view);
views.add(view);
}
public void refresh(){
this.removeAllViewsInLayout();
setup();
for(View view : views){
addPatch(view);
}
}
public int[] getBaseSize(){
int[] size = new int[2];
float width_height_ratio = (3.0f/4.0f);
int base_width = getBaseWidth();
int base_height = (int) (base_width*width_height_ratio);
size[0] = base_width; // width
size[1] = base_height; // height
return size;
}
public int[] getBaseSizeVertical(){
int[] size = new int[2];
float width_height_ratio = (3.0f/4.0f);
int base_width = getBaseWidth();
int base_height = (int) (base_width*width_height_ratio);
size[0] = base_width; // width
size[1] = base_height; // height
return size;
}
public int[] getBaseSizeHorizontal(){
int[] size = new int[2];
float width_height_ratio = (4.0f/3.0f);
int base_height = getBaseHeight();
int base_width = (int) (base_height*width_height_ratio);
size[0] = base_width; // width
size[1] = base_height; // height
return size;
}
public int getBaseWidth(){
if(view_width < 500){
columns = 2;
} else if(view_width < 801){
columns = 3;
} else if(view_width < 1201){
columns = 4;
} else if(view_width < 1601){
columns = 5;
} else {
columns = 6;
}
return (view_width/columns);
}
public int getBaseHeight(){
if(view_height < 350){
rows = 2;
} else if(view_height < 650){
rows = 3;
} else if(view_height < 1050){
rows = 4;
} else if(view_height < 1250){
rows = 5;
} else {
rows = 6;
}
return (view_height/rows);
}
/*@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
view_width = parentWidth;
view_height = parentHeight;
setup(isVertical);
}*/
@Override
protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld){
super.onSizeChanged(xNew, yNew, xOld, yOld);
view_width = xNew;
view_height = yNew;
}
}
**QuiltViewPatch.java**
public class QuiltViewPatch implements Comparable{
public int width_ratio;
public int height_ratio;
public QuiltViewPatch(int width_ratio, int height_ratio){
this.width_ratio = width_ratio;
this.height_ratio = height_ratio;
}
private static QuiltViewPatch create(Size size){
switch(size){
case Big:
return new QuiltViewPatch(2,2);
case Small:
return new QuiltViewPatch(1,1);
case Tall:
return new QuiltViewPatch(1,2);
}
return new QuiltViewPatch(1,1);
}
public int getHeightRatio(){return this.height_ratio;}
public int getWidthRatio(){return this.width_ratio;}
public static QuiltViewPatch create(int view_count){
if(view_count == 0)
return new QuiltViewPatch(2,2);
else if((view_count % 11) == 0)
return new QuiltViewPatch(2,2);
else if((view_count % 4) == 0)
return new QuiltViewPatch(1,2);
else
return new QuiltViewPatch(1,1);
}
private enum Size{
Big,
Small,
Tall
}
public static QuiltViewPatch init(int position, int column){
switch(column){
case 2:
return init2(position);
case 3:
return init3(position);
case 4:
return init4(position);
case 5:
return init5(position);
}
return init3(position);
}
private static QuiltViewPatch init2(int position){
switch(position % 15){
case 0:
return create(Size.Big);
case 1:
case 2:
case 3:
return create(Size.Small);
case 4:
return create(Size.Tall);
case 5:
case 6:
case 7:
return create(Size.Small);
case 8:
return create(Size.Tall);
case 9:
return create(Size.Tall);
case 10:
return create(Size.Small);
case 11:
return create(Size.Big);
case 12:
return create(Size.Tall);
case 13:
return create(Size.Tall);
case 14:
return create(Size.Small);
}
return create(Size.Small);
}
private static QuiltViewPatch init3(int position){
switch(position % 32){
case 0:
return create(Size.Big);
case 1:
case 2:
case 3:
return create(Size.Small);
case 4:
return create(Size.Tall);
case 5:
case 6:
case 7:
return create(Size.Small);
case 8:
return create(Size.Tall);
case 9:
case 10:
return create(Size.Small);
case 11:
return create(Size.Big);
case 12:
return create(Size.Tall);
case 13:
case 14:
return create(Size.Small);
case 15:
return create(Size.Small);
case 16:
return create(Size.Tall);
case 17:
case 18:
case 19:
return create(Size.Small);
case 20:
return create(Size.Tall);
case 21:
case 22:
return create(Size.Small);
case 23:
return create(Size.Big);
case 24:
return create(Size.Small);
case 25:
return create(Size.Tall);
case 26:
case 27:
case 28:
return create(Size.Small);
case 29:
return create(Size.Tall);
case 30:
case 31:
return create(Size.Small);
}
return create(Size.Small);
}
private static QuiltViewPatch init4(int position){
switch(position % 36){
case 0:
return create(Size.Big);
case 1:
case 2:
case 3:
return create(Size.Small);
case 4:
return create(Size.Tall);
case 5:
case 6:
case 7:
return create(Size.Small);
case 8:
return create(Size.Tall);
case 9:
case 10:
case 11:
return create(Size.Small);
case 12:
return create(Size.Big);
case 13:
return create(Size.Tall);
case 14:
case 15:
case 16:
return create(Size.Small);
case 17:
return create(Size.Tall);
case 18:
case 19:
case 20:
return create(Size.Small);
case 21:
return create(Size.Tall);
case 22:
case 23:
return create(Size.Small);
case 24:
return create(Size.Small);
case 25:
return create(Size.Big);
case 26:
return create(Size.Small);
case 27:
return create(Size.Tall);
case 28:
case 29:
case 30:
return create(Size.Small);
case 31:
return create(Size.Tall);
case 32:
case 33:
case 34:
case 35:
return create(Size.Small);
}
return create(Size.Small);
}
private static QuiltViewPatch init5(int position){
switch(position % 35){
case 0:
return create(Size.Big);
case 1:
case 2:
case 3:
return create(Size.Small);
case 4:
return create(Size.Tall);
case 5:
case 6:
case 7:
return create(Size.Small);
case 8:
return create(Size.Tall);
case 9:
case 10:
case 11:
return create(Size.Small);
case 12:
return create(Size.Big);
case 13:
return create(Size.Tall);
case 14:
case 15:
case 16:
return create(Size.Small);
case 17:
return create(Size.Tall);
case 18:
case 19:
case 20:
return create(Size.Small);
case 21:
return create(Size.Tall);
case 22:
case 23:
case 24:
return create(Size.Small);
case 25:
return create(Size.Big);
case 26:
return create(Size.Small);
case 27:
return create(Size.Tall);
case 28:
case 29:
case 30:
return create(Size.Small);
case 31:
return create(Size.Tall);
case 32:
return create(Size.Big);
case 33:
return create(Size.Tall);
case 34:
return create(Size.Small);
}
return create(Size.Small);
}
public static boolean getRandomBoolean(){
return (Math.random() < 0.5);
}
public boolean equals(Object obj){
if(obj != null && obj instanceof QuiltViewPatch){
QuiltViewPatch size = (QuiltViewPatch)obj;
return size.height_ratio == this.height_ratio && size.width_ratio == this.width_ratio;
}
return false;
}
public int hashCode(){
return height_ratio + 100 * width_ratio;
}
public String toString(){
return "Patch: " + height_ratio + " x " + width_ratio;
}
@Override
public int compareTo(Object another) {
if(another != null && another instanceof QuiltViewPatch){
QuiltViewPatch size = (QuiltViewPatch)another;
if(size.equals(this))
return 0;
if(this.height_ratio < size.height_ratio)
return -1;
else if(this.height_ratio > size.height_ratio)
return 1;
if(this.width_ratio < size.width_ratio)
return -1;
else
return 1;
}
return -1;
}
}
0
我一直在尋找如何做到這一點，但發現谷歌現在已覆蓋RecyclerView和StaggeredGridLayoutManager。我建議現在先看看那裏。
相關問題
- 1. CSS中的馬賽克圖像庫
- 2. 馬賽克風格的圖像網格，浮動和邊距
- 3. 在圖像上創建馬賽克
- 4. 使用Matlab進行馬賽克圖像
- 5. Spotify API馬賽克視圖
- 6. 來自數據庫的風格圖像作爲背景圖像
- 7. 如何在android中的圖庫視圖中顯示來自web的圖像
- 8. 在android中顯示來自sqlite數據庫的圖像？
- 9. 馬賽克網格畫廊與動態大小的圖像
- 10. 在html頁面中顯示來自s3（亞馬遜）的圖像
- 11. 馬賽克圖中的條件標籤
- 12. Android圖庫顯示來自SDcard的圖像
- 13. 顯示馬賽克圖下方的軸標籤
- 14. 顯示來自JSON的GridView圖像Android
- 15. Android：顯示來自SDcard的圖像
- 16. 來自URL的Android顯示圖像
- 17. 顯示圖像來自資產/圖像的圖庫
- 18. 如何在Android中顯示來自Uri的位圖圖像？
- 19. 如何在圖像視圖中顯示來自url的圖像？
- 20. WPF馬賽克像佈局？
- 21. 磚石/馬賽克風格的影像格 - 大小，間距煩惱
- 22. 如何在我的android gridview中顯示來自互聯網的圖像圖像並顯示完整圖像？
- 23. 以傳統的asp顯示來自sql數據庫的圖像
- 24. 在Android中顯示TIFF格式圖像
- 25. 顯示在卡爾蒂克格的圖像顯示的路徑
- 26. 創建自定義網格視圖以在android中顯示所選圖像
- 27. Android圖庫顯示選定的圖像
- 28. phpBB3風格 - 圖像不顯示
- 29. 在圖像組件中顯示來自光盤的圖像
- 30. Leanback - 如何創建馬賽克視圖？
嘗試下列其中一種：[QuiltView]（https://github.com/jacobmoncur/QuiltViewLibrary）或[StaggeredGridView]（https://github.com/maurycyw/StaggeredGridView） –
可能出現[Android heterogeneous gridview like pinterest？]（http://stackoverflow.com/questions/11736658/android-heterogeneous-gridview-like-pinterest） –
我已經使用這個QuiltView代碼，但在此代碼中得到驗證錯誤。 –