点击Gallery弹出对应的Gallery大图

╰+攻爆jí腚メ 2022-08-14 05:47 171阅读 0赞

今天遇到了这么一个问题，给3个相应的缩略图，点击缩略图弹出的相应的缩略图片的大图。

解决办法：setSelection，注意这个方法是Gallery的。（下面代码功能：缩略图可以左右滑动；弹出大图可以左右滑动；点A缩略图，显示A大图。点击B大图，显示B大图。并且 不影响滑动）

代码：我的代码有点长，如果你已经有思路，就直接去百度一下setSelection();

1. xml代码：（三张缩略图）

2. 把他们都findViewById之后，设置点击事件：

OnTouchListener listener = new OnTouchListener() {
        @Override
        public boolean onTouch(View arg0, MotionEvent arg1) {
            switch (arg1.getAction()) {
                case MotionEvent.ACTION_UP:
                    switch (arg0.getId()) {
                        case R.id.image_details_certificate_image_1:
                            iv_image_1.setBackgroundColor(Color.parseColor("#ffffff"));
                            tag = "1";
                            startHintPopup("证书及文件");//我是用的PopupWindow来做的弹出大图                         break;                    case R.id.image_details_certificate_image_2:                        iv_image_2.setBackgroundColor(Color.parseColor("#ffffff"));                        tag = "2";                        startHintPopup("证书及文件");                        break;                    case R.id.image_details_certificate_image_3:                        iv_image_3.setBackgroundColor(Color.parseColor("#ffffff"));                        tag = "3";                        startHintPopup("证书及文件");                        break;                }                break;            case MotionEvent.ACTION_CANCEL:                switch (arg0.getId()) {                    case R.id.top_back_view:                        top_back.setAlpha(255);                        break;                    case R.id.cash_coupon_bg:                        cash_coupon_bg.setBackgroundColor(Color.parseColor("#ffffff"));                        break;                }                break;        }        return true;    }};iv_image_1.setOnTouchListener(listener);iv_image_2.setOnTouchListener(listener);iv_image_3.setOnTouchListener(listener);

3. new一个PopupWindow,写一个要显示在PopupWindow上面的布局，这个布局就是显示大图Gallery，我另外在布局添加了一个TextView,不影响阅读

先贴xml:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        android:id="@+id/ll_root"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        >
    
        <Gallery
            android:id="@+id/gl_photo"
            android:layout_width="720px"
            android:layout_height="450px"
            android:spacing="20px"
            />
    
        <TextView
            android:id="@+id/tv_photo"
            android:layout_width="720px"
            android:layout_height="30px"
            android:background="@color/white"
            android:gravity="center_horizontal"
            android:padding="10px"
            android:textColor="@color/black"
            android:textSize="25px"/>
    
    </LinearLayout>

4. 这是点击缩略图，弹出PopupWindow显示大图，并且可以任意滑动

public synchronized void startHintPopup(String s) {
        if (mPopupWindow == null) {
            v_photo = LayoutInflater.from(this).inflate(R.layout.large_photo_slide, null);
            LinearLayout linear = (LinearLayout) v_photo.findViewById(R.id.ll_root);
            photo_image = (Gallery) v_photo.findViewById(R.id.gl_photo);
            photo_text = (TextView) v_photo.findViewById(R.id.tv_photo);//这是刚刚您看的xml，让他把代码关联起来。下面各种LayoutParams就是给这个xml布局设置属性，看不懂就不用看了，可以直接看下面的PopupWindow
            ViewGroup.LayoutParams p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            linear.setLayoutParams(p);
    
            LinearLayout.LayoutParams p_image = new LinearLayout.LayoutParams(Layout.getScale(720), Layout.getScale(500));
            photo_image.setLayoutParams(p_image);
    
            LinearLayout.LayoutParams p_text = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            p_text.gravity = Gravity.CENTER_HORIZONTAL;
            photo_text.setLayoutParams(p_text);
            Layout.setTextViewSize(photo_text, 30);
    
            mPopupWindow = new PopupWindow(v_photo, RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT, true);
            mPopupWindow.setBackgroundDrawable(res.getDrawable(R.drawable.image_backgrund));//把PopupWindow的背景色设置成半透明
            mPopupWindow.setAnimationStyle(R.style.ImageDialogStyle);//这个是PopupWindow的动画及属性，代码贴在下面，也可以忽略
    
        }//下面绿色的就是今天的主角，就是靠他，点A缩略图，显示A大图。点击B大图，显示B大图。并且不影响滑动。
        photo_image.setAdapter(new All_certifAdapter(this, item.all_certif, tag));
        if(tag.equals("1")){
            photo_image.setSelection(0);//让Adapter里的position显示对应点击的--大图
        }
        if(tag.equals("2")){
            photo_image.setSelection(1);
        }
        if(tag.equals("3")){
            photo_image.setSelection(2);
        }
    
        photo_text.setText(s);
    
        // 设置好参数之后再show
        mPopupWindow.showAtLocation(v_photo, Gravity.CENTER, 0, 0);
    }

5. 下面3块代码是给PopupWindow设置的属性

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    
        <style name="ImageDialogStyle" parent="android:Theme.Dialog">
            <item name="android:windowBackground">@color/back</item>
            <item name="android:windowFrame">@null</item>·
            <item name="android:windowNoTitle">true</item> <item name="android:windowIsFloating">true</item> <item name="android:windowIsTranslucent">true</item> <item name="android:windowContentOverlay">@null</item> <item name="android:windowAnimationStyle">@style/AnimHead</item> <item name="android:backgroundDimEnabled">true</item> <item name="android:windowFullscreen">true</item> <item name="android:windowCloseOnTouchOutside">true</item>
        </style>
    
        <style name="AnimHead" parent="@android:style/Animation">
            <item name="android:windowEnterAnimation">@anim/head_in</item>//弹出动画贴在下面
            <item name="android:windowExitAnimation">@anim/head_out</item>//消失动画贴在下面
        </style>
    </resources>

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <alpha
            android:duration="200"
            android:fromAlpha="0"
            android:toAlpha="1"/>
    
        <scale
            android:duration="200"
            android:fromXScale="0"
            android:fromYScale="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="1"
            android:toYScale="1"/>
    
    </set>

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    
        <alpha
            android:duration="200"
            android:fromAlpha="1"
            android:toAlpha="0"/>
    
        <scale
            android:duration="500"
            android:fromXScale="1"
            android:fromYScale="1"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="0"
            android:toYScale="0"/>
    </set>

6. 这是最后的步骤：Gallery的Adapter

public class All_certifAdapter extends BaseAdapter {
        private Context context;
        private List<String> dataList;
        private final String tag;
        private ImageLoader mImageLoader;
    
        public All_certifAdapter(Context context, List<String> list, String tag) {
            this.context = context;
            this.dataList = list;
            this.tag = tag;
            mImageLoader = new ImageLoader(context);
        }
    
        public int getCount() {
            return dataList.size();
        }
    
        public String getItem(int position) {
            return dataList.get(position);
        }
    
        public long getItemId(int position) {
            return position;
        }
    
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView iv = new ImageView(context);
            iv.setBackgroundColor(0xFFFFFFFF);
    
            if (tag.equals("1")) {
                mImageLoader.DisplayImage(dataList.get(position), iv, R.drawable.test_photo);
            }
            if (tag.equals("2")) {
                mImageLoader.DisplayImage(dataList.get(position), iv, R.drawable.test_photo);
            }
            if (tag.equals("3")) {
                mImageLoader.DisplayImage(dataList.get(position), iv, R.drawable.test_photo);
            }
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setLayoutParams(new Gallery.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            return iv;
        }
    }