Gallery 实现图片逐一展示 和 显示当前图片张数_gradio.gallery()

          最近在帮学长写项目，当然分的任务就是简单的UI啦，不过还是挺有干劲的！

          就是一个展示图片的界面，同时要在图片上展示当前的图片页数和总的页数。功能看起来还是挺简单的。fighting！

------------------------------------------------------------我是分割线-----------------------------------------------------------------

         首先是选择用什么方式来实现，网上查了一下，主流的是viewpaper，但是viewpaper通常是和fragment两者结合，像那些展示三张图啊，下面还有小圆点的那一类。还有一种是使用gallery，这种事Google之前发布的，我买的书上都说好像要被淘汰不用了。项目本身的话展示图片的张数应该是不确定的，最后用的还是gallery，简单粗暴！

         好接下来介绍我的学习过程啦：

 查了网上大部分的资料，大部分的DEMO都是一个GALLERY展示小图片，点击之后显示，或者是有小圆点的翻页的那一种，借鉴思考，开工。

一、先的写一个GalleryAdapter，继承自baseadapter。

public class GalleryAdapter extends BaseAdapter {
 
 
    private Context mContext;
    private Integer[] mImageIds = { R.drawable.img_00, R.drawable.img_01, R.drawable.img_02,
            R.drawable.img_03, R.drawable.img_04, R.drawable.img_05 };
 
    public GalleryAdapter(Context c)
    {
        mContext = c;
 
    }
 
    @Override
    public int getCount() {
        return mImageIds.length;
    }
 
    @Override
    public Object getItem(int position) {
        return position;
    }
 
    @Override
    public long getItemId(int position) {
        return position;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView i = new ImageView(mContext);
 
        i.setImageResource(mImageIds[position]);//获取当前要展示的图片
        i.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT, Gallery.LayoutParams.FILL_PARENT));//设置布局参数
        i.setScaleType(ImageView.ScaleType.FIT_XY);//设置尺寸类型，按什么方式放大
 
        return i;
    }
}

这个getview方法里的这几句我特意查了其他的写法，不同的写法有不同的效果哦。比如setLayoutParams（）方法，设置gallery的布局参数，我开始时直接传入两个int型参数，出现了问题（GG），在我的手机上一切运转正常，一派和谐的景象，然而机智的我用了另一部手机，问题来了，在另一部手机上原本是全屏显示，现在却成了中图大小，由于不同的手机分辨率的问题导致的。

这个适配的问题困扰了很久............先一股脑介绍完我是怎么实现的吧，下一篇介绍稍微研究一下的参数设置一遍遍实验得出的经验。

二、之前直接用Gallery，发现稍微划一下就会过去好几张图片，用户体验不好，所以找了一下一张张滑动的方法。重新定义Gallery

public class MyGallery extends Gallery {
 
    public MyGallery(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return super.onScroll(e1, e2, distanceX/3, distanceY);//distance/3的意图是滑动距离大也只翻一页，相反*x则是滑一小段翻几页
                                                              //可以自己调试一下

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
 
        int kEvent;
 
        if (isScrollingLeft(e1, e2)) {
            // Check if scrolling left
            kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
        } else {
            // Otherwise scrolling right
            kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
        }
 
        onKeyDown(kEvent, null);
        return true;
    }
 
    private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {
        return e2.getX() > e1.getX();
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }
}

三、主函数使用Gallery展示：

注释掉的不用在意，那是其他效果。

public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
      //  requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        setContentView(R.layout.mian);
      //  getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.activity_main);
 
        final MyGallery gallery = (MyGallery) findViewById(R.id.gallery1);
        final TextView textView = (TextView) findViewById(R.id.textView2);//用于展示图片的页数
     //   final ImageButton imageButton = (ImageButton) findViewById(R.id.imageButton);
 
        gallery.setAdapter(new GalleryAdapter(this));//
        gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
<span style="white-space:pre">	</span>//每次滑动图片都会<span style="white-space:pre">	</span>调用的方法，显示当前的图片页数
            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                                       int position, long id) {
 
                textView.setText("  " + (position + 1) + " " + "/" + " " +
                        gallery.getCount() + "  ");
                textView.getBackground().setAlpha(200);//设置背景透明度，不透明是255
 
            }
 
            @Override
            public void onNothingSelected(AdapterView<?> parent) {
            // TODO Auto-generated method stub
 
            }
        });
}
}

XML文件：

这样的效果是全屏的，离底部50dp，布局相关知识就和其他控件一样。

    <com.single.ldm.imageview.MyGallery
        android:id="@+id/gallery1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="50dp"
        />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/textView2"
        android:textSize="36px"
        android:textColor="#FFFFFF"
        android:background="@drawable/shape_btn"
        android:layout_marginBottom="51dp"
        android:layout_above="@+id/textView5"
        android:layout_centerHorizontal="true" />

在做这个UI的时候，虽然看起来简单，但是要考虑全面，考虑用户体验实现优化，还有很多地方做的不够好。

遇到了许多问题，查了资料研究每一个代码的效果，接下来就会介绍得到的知识，做个记录。

----------------------------------------------------我还是分割线---------------------------------------------------------------

以后还会做一些项目，慢慢学习咯~~~~~一起进步记录我的进阶之路~~~~~

欢迎大家评论哟，指导鼓励批评都是很开心的~~~