Android 滑動效果基礎篇(四)—— Gallery + GridView

來源:互聯網
上載者:User

Android系統內建一個GridView和Gallery兩個控制項,GridView網格顯示,Gallery單個瀏覽,兩者結合起來可以真正實現Gallery瀏覽圖片效果。



本樣本通過GridView和Gallery兩個控制項,模仿實現一個完整的仿Gallery映像集的圖片瀏覽效果。如下:



1、GridView

首先,自訂一個GridImageAdapter圖片適配器,用於填充GridView控制項的圖片

public class GridImageAdapter extends BaseAdapter {<br />private Context mContext;<br />Drawable btnDrawable;</p><p>public GridImageAdapter(Context context) {<br />mContext = context;<br />Resources resources = context.getResources();<br />btnDrawable = resources.getDrawable(R.drawable.bg);<br />}</p><p>@Override<br />public int getCount() {<br />return ImageSource.mThumbIds.length;<br />}</p><p>@Override<br />public Object getItem(int position) {<br />return position;<br />}</p><p>@Override<br />public long getItemId(int position) {<br />return position;<br />}</p><p>@Override<br />public View getView(int position, View convertView, ViewGroup parent) {<br />ImageViewExt imageView;<br />int space;</p><p>if (convertView == null) {<br />imageView = new ImageViewExt(mContext);<br />if (imageCol == 5) {<br />space = dm.heightPixels / imageCol - 6;<br />imageView.setLayoutParams(new GridView.LayoutParams(space, space));<br />} else {<br />space = dm.widthPixels / imageCol - 6;<br />imageView.setLayoutParams(new GridView.LayoutParams( space, space));<br />}<br />imageView.setAdjustViewBounds(true);<br />imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);// 縮放圖片使其長和寬一樣</p><p> imageView.setPadding(3, 3, 3, 3);<br />} else {<br />imageView = (ImageViewExt) convertView;<br />}<br />imageView.setImageResource(ImageSource.mThumbIds[position]);</p><p>return imageView;<br />}<br />}然後,用GridImageAdapter填充GridView

gridView = (GridView) findViewById(R.id.myGrid);<br />gridImageAdapter = new GridImageAdapter(this);<br />gridView.setAdapter(gridImageAdapter);<br />gridView.setOnItemClickListener(listener); // 設定點擊監聽事件

最後,設定GridView控制項的點擊監聽事件

AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {<br />@Override<br />public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {<br />Intent intent = new Intent();<br />intent.setClass(GridViewActivity.this, GalleryActivity.class);<br />intent.putExtra("position", position);<br />startActivity(intent);<br />}<br />};
2、Gallery

完成了GridView的圖片顯示、監聽事件後,現在點擊圖片,會啟動一個Activity來顯示當前點擊的圖片,此時顯示圖片的控制項便是Gallery

首先,同GridView一樣,自訂一個ImageAdapter圖片適配器,用來填充Gallery

public class ImageAdapter extends BaseAdapter {<br />private Context mContext;<br />private int mPos;</p><p>public ImageAdapter(Context context) {<br />mContext = context;<br />}</p><p>public void setOwnposition(int ownposition) {<br />this.mPos = ownposition;<br />}</p><p>public int getOwnposition() {<br />return mPos;<br />}</p><p>@Override<br />public int getCount() {<br />return ImageSource.mThumbIds.length;<br />}</p><p>@Override<br />public Object getItem(int position) {<br />mPos=position;<br />return position;<br />}</p><p>@Override<br />public long getItemId(int position) {<br />mPos=position;<br />return position;<br />}</p><p>@Override<br />public View getView(int position, View convertView, ViewGroup parent) {<br />mPos=position;<br />ImageView imageview = new ImageView(mContext);<br />imageview.setBackgroundColor(0xFF000000);<br />imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);<br />imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));<br />imageview.setImageResource(ImageSource.mThumbIds[position]);</p><p>return imageview;<br />}<br />}
然後,用ImageAdapter填充Gallery

myGallery galllery = (myGallery) findViewById(R.id.mygallery);<br />Intent intent = getIntent();<br />position = intent.getIntExtra("position", 0);// 擷取GridViewActivity傳來的圖片位置position<br />ImageAdapter imgAdapter=new ImageAdapter(this);<br />galllery.setAdapter(imgAdapter);// 設定圖片ImageAdapter<br />galllery.setSelection(position); // 設定當前顯示圖片</p><p> Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );// Gallery動畫<br /> galllery.setAnimation(an);

此時,如果細心可以注意到,我們的Gallery也是自己定義的myGallery,具體定義如下:

public class myGallery extends Gallery {<br />boolean isFirst = false;<br />boolean isLast = false;</p><p>public myGallery(Context context) {<br />super(context);<br />}</p><p>public myGallery(Context context, AttributeSet paramAttributeSet) {<br />super(context, paramAttributeSet);<br />}</p><p>/** 是否向左滑動(true - 向左滑動; false - 向右滑動) */<br />private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {<br />return e2.getX() > e1.getX();<br />}</p><p>@Override<br />public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {<br />ImageAdapter ia = (ImageAdapter) this.getAdapter();<br />int p = ia.getOwnposition();// 擷取當前圖片的position<br />int count = ia.getCount();// 擷取全部圖片的總數count<br />int kEvent;<br />if (isScrollingLeft(e1, e2)) {<br />if (p == 0 && isFirst) {<br />Toast.makeText(this.getContext(), "已是第一頁", Toast.LENGTH_SHORT).show();<br />} else if (p == 0) {<br />isFirst = true;<br />} else {<br />isLast = false;<br />}</p><p>kEvent = KeyEvent.KEYCODE_DPAD_LEFT;<br />} else {<br />if (p == count - 1 && isLast) {<br />Toast.makeText(this.getContext(), "已到最後一頁", Toast.LENGTH_SHORT).show();<br />} else if (p == count - 1) {<br />isLast = true;<br />} else {<br />isFirst = false;<br />}</p><p>kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;<br />}<br />onKeyDown(kEvent, null);<br />return true;<br />}<br />}
GalleryActivity的布局檔案gallery.xml

<?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> android:gravity="center"<br /> android:orientation="horizontal"<br /> android:padding="10dip" ><br /> <RelativeLayout<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:background="#000000"<br /> android:padding="2dip" ><br /> <com.homer.gridgallery.myGallery<br /> android:id="@+id/mygallery"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:spacing="16dp" /><br /> </RelativeLayout><br /></LinearLayout>

源碼下載



參考推薦:

GridView

Grid View tutorial

Gallery

Gallery tutorial

ViewGroup

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.