How to implement coverflow layout from existing gridview images
我正在使用Eclipse。
基本上我想实现的是,我有一个gridView,它使用JSON从mysql数据库动态获取图像。
现在,我想将它们显示为Coverflow视图,而不是gridview。
我已经在互联网上进行搜索,但是找不到任何库或动态图像示例,只能找到存储在应用本身而不是外部数据库中的静态图像。
我的代码如下:-
MainActivity.java:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | public class MainActivity extends Activity implements OnClickListener { // Log tag private static final String TAG = MainActivity.class.getSimpleName(); // Movies json url private static final String url ="http://eventassociate.com/wedding/photomania"; private ProgressDialog pDialog; private List<Movie> movieList = new ArrayList<Movie>(); private PullToRefreshGridView mPullRefreshGridView; private GridView gridView; private CustomListAdapter adapter; ImageButton blackcapture; private static int RESULT_LOAD_IMAGE = 1; String picturePath; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.gallary_activity_main); overridePendingTransition(R.anim.push_down_in, R.anim.push_down_out); mPullRefreshGridView = (PullToRefreshGridView) findViewById(R.id.list); gridView = mPullRefreshGridView.getRefreshableView(); mPullRefreshGridView.setOnRefreshListener(new OnRefreshListener2<GridView>() { @Override public void onPullDownToRefresh(PullToRefreshBase<GridView> refreshView) { adapter.notifyDataSetChanged(); gridView.setAdapter(adapter); gridView.invalidateViews(); mPullRefreshGridView.onRefreshComplete(); } adapter = new CustomListAdapter(this, movieList); gridView.setAdapter(adapter); gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView< ? > parent, View v, int position, long id) { Movie m5 = movieList.get(position); Intent i = new Intent(getApplicationContext(), FullImageActivity.class); i.putExtra("movieobject", m5); startActivity(i); } }); |
适配器类别:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | public class CustomListAdapter extends BaseAdapter { private Activity activity; private LayoutInflater inflater; List<Movie> movieItems; ImageLoader imageLoader = AppController.getInstance().getImageLoader(); public CustomListAdapter(Activity activity, List<Movie> movieItems) { this.activity = activity; this.movieItems = movieItems; } @Override public int getCount() { return movieItems.size(); } @Override public Object getItem(int location) { return movieItems.get(location); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (inflater == null) inflater = (LayoutInflater) activity .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if (convertView == null) convertView = inflater.inflate(R.layout.gallary_list_row, null); if (imageLoader == null) imageLoader = AppController.getInstance().getImageLoader(); NetworkImageView thumbNail = (NetworkImageView) convertView .findViewById(R.id.thumbnail); // ............................................... TextView title = (TextView) convertView.findViewById(R.id.title); // getting movie data for the row Movie m = movieItems.get(position); // thumbnail image thumbNail.setImageUrl(m.getThumbnailUrl(), imageLoader); // title title.setText(m.getTitle()); return convertView; } |
Movie.java:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | public class Movie implements Parcelable{ private String title,thumbnailUrl; public Movie() { // TODO Auto-generated constructor stub } public Movie(String name, String thumbnailUrl ) { this.title = name; this.thumbnailUrl = thumbnailUrl; } public String getTitle() { return title; } public void setTitle(String name) { this.title = name; } public String getThumbnailUrl() { return thumbnailUrl; } public void setThumbnailUrl(String thumbnailUrl) { this.thumbnailUrl ="http://eventassociate.com/wedding/"+thumbnailUrl; } // Parcelling part public Movie(Parcel in){ String[] data = new String[2]; in.readStringArray(data); this.title = data[0]; this.thumbnailUrl = data[1]; } @Override public int describeContents() { // TODO Auto-generated method stub return 0; } @Override public void writeToParcel(Parcel dest, int flags) { dest.writeStringArray(new String[] {this.title, this.thumbnailUrl, }); } public static final Parcelable.Creator CREATOR = new Parcelable.Creator() { public Movie createFromParcel(Parcel in) { return new Movie(in); } public Movie[] newArray(int size) { return new Movie[size]; } }; |
} ??
我成功地将其实现为GridView,但是在将其实现为Coverflow设计或类似方法时遇到了麻烦。
我在网上搜索并找到了此代码,但仅用于静态图像:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | public class SimpleExample extends Activity { // ============================================================================= // Child views // ============================================================================= private FancyCoverFlow fancyCoverFlow; // ============================================================================= // Supertype overrides // ============================================================================= /** * Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.fancyCoverFlow = (FancyCoverFlow) this.findViewById(R.id.fancyCoverFlow); this.fancyCoverFlow.setAdapter(new FancyCoverFlowSampleAdapter()); this.fancyCoverFlow.setUnselectedAlpha(1.0f); this.fancyCoverFlow.setUnselectedSaturation(0.0f); this.fancyCoverFlow.setUnselectedScale(0.5f); this.fancyCoverFlow.setSpacing(50); this.fancyCoverFlow.setMaxRotation(0); this.fancyCoverFlow.setScaleDownGravity(0.2f); this.fancyCoverFlow.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO); } // ============================================================================= // Private classes // ============================================================================= |
} ??
Adapter.java:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | public class FancyCoverFlowSampleAdapter extends FancyCoverFlowAdapter { // ============================================================================= // Private members // ============================================================================= private int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5, R.drawable.image6,}; // ============================================================================= // Supertype overrides // ============================================================================= @Override public int getCount() { return images.length; } @Override public Integer getItem(int i) { return images[i]; } @Override public long getItemId(int i) { return i; } @Override public View getCoverFlowItem(int i, View reuseableView, ViewGroup viewGroup) { ImageView imageView = null; if (reuseableView != null) { imageView = (ImageView) reuseableView; } else { imageView = new ImageView(viewGroup.getContext()); imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE); imageView.setLayoutParams(new FancyCoverFlow.LayoutParams(300, 400)); } imageView.setImageResource(this.getItem(i)); return imageView; } |
} ??
有人可以帮助我解决我的问题。
谢谢。
我最后的带有覆盖流的代码:-
MainActivity:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | public class MainActivity extends Activity implements OnClickListener { // Log tag private static final String TAG = album.MainActivity.class.getSimpleName(); // Movies json url private static final String url ="http://eventassociate.com/wedding/androidadminimages"; private ProgressDialog pDialog; private List<Moviealbum> movieList = new ArrayList<Moviealbum>(); private FancyCoverFlow fancyCoverFlow; private CustomListAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.album_activity_main); overridePendingTransition(R.anim.push_down_in, R.anim.push_down_out); this.fancyCoverFlow = (FancyCoverFlow) this.findViewById(R.id.list); adapter = new CustomListAdapter(this, movieList); this.fancyCoverFlow.setAdapter(new CustomListAdapter(this, movieList)); this.fancyCoverFlow.setUnselectedAlpha(1.0f); this.fancyCoverFlow.setUnselectedSaturation(0.0f); this.fancyCoverFlow.setUnselectedScale(0.5f); this.fancyCoverFlow.setSpacing(50); this.fancyCoverFlow.setMaxRotation(0); this.fancyCoverFlow.setScaleDownGravity(0.2f); this.fancyCoverFlow.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO); fancyCoverFlow.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView< ? > parent, View v, int position, long id) { Moviealbum m5 = movieList.get(position); Intent i = new Intent(getApplicationContext(),album. FullImageActivity.class); i.putExtra("movieobject", m5); startActivity(i); } }); pDialog = new ProgressDialog(this); // Showing progress dialog before making http request pDialog.setMessage("Loading..."); pDialog.show(); // changing action bar color getActionBar().setBackgroundDrawable( new ColorDrawable(Color.parseColor("#1b1b1b"))); // Creating volley request obj JsonArrayRequest movieReq = new JsonArrayRequest(url, new Response.Listener<JSONArray>() { @Override public void onResponse(JSONArray response) { Log.d(TAG, response.toString()); hidePDialog(); // Parsing json for (int i = 0; i < response.length(); i++) { try { JSONObject obj = response.getJSONObject(i); Moviealbum movie = new Moviealbum(); movie.setTitle(obj.getString("no")); movie.setThumbnailUrl(obj.getString("alinks")); // adding movie to movies array movieList.add(movie); } catch (JSONException e) { e.printStackTrace(); } } // notifying list adapter about data changes // so that it renders the list view with updated data adapter.notifyDataSetChanged(); } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { VolleyLog.d(TAG,"Error:" + error.getMessage()); hidePDialog(); } }); // Adding request to request queue................................... AppController.getInstance().addToRequestQueue(movieReq); } @Override public void onDestroy() { super.onDestroy(); hidePDialog(); } private void hidePDialog() { if (pDialog != null) { pDialog.dismiss(); pDialog = null; } } |
AdapterClass:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | public class CustomListAdapter extends FancyCoverFlowAdapter { private Activity activity; private LayoutInflater inflater; List<Moviealbum> movieItems; ImageLoader imageLoader = AppController.getInstance().getImageLoader(); public CustomListAdapter(Activity activity, List<Moviealbum> movieItems) { this.activity = activity; this.movieItems = movieItems; } @Override public int getCount() { return movieItems.size(); } @Override public Object getItem(int location) { return movieItems.get(location); } @Override public long getItemId(int position) { return position; } @Override public View getCoverFlowItem(int position, View reuseableView, ViewGroup viewGroup) { if (inflater == null) inflater = (LayoutInflater) activity .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if (reuseableView == null) reuseableView = inflater.inflate(R.layout.gallary_list_row, null); if (imageLoader == null) imageLoader = AppController.getInstance().getImageLoader(); NetworkImageView thumbNail = (NetworkImageView) reuseableView .findViewById(R.id.thumbnail); // ............................................... TextView title = (TextView) reuseableView.findViewById(R.id.title); // getting movie data for the row Moviealbum m = movieItems.get(position); // thumbnail image thumbNail.setImageUrl(m.getThumbnailUrl(), imageLoader); // title title.setText(m.getTitle()); return reuseableView; } |
该应用程序运行正常,但加载后显示空白屏幕,但没有图像。
Logcat:-
您的问题不在于CoverFlow代码,而在于您进行网络操作的位置。在加载应用程序时,开始您的网络请求以获取JSON有效负载,显示一个微调框以显示应用程序正在加载,并在加载图像后填充适配器。我假设您已经为GridView实现提供了网络代码?让我知道我是否错过了什么。希望对您有所帮助!
编辑:
将图像添加到适配器后,请确保调用
编辑2:
在此处查看此行:
您要传递新的CustomListAdapter而不是传递适配器变量。尝试修复该问题,让我知道它是否有效。