点击Gallery弹出对应的Gallery大图

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


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


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

1. xml代码:(三张缩略图)

<HorizontalScrollView//让三张图片左右滑动
    android:id="@+id/hsv"
    android:layout_width="match_parent"
    android:layout_height="220px"
    android:background="@color/white"
    android:scrollbars="none">

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="20px"
        android:layout_marginTop="20px"
        android:background="@color/white"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        >

        <ImageView
            android:id="@+id/image_details_certificate_image_1"
            android:layout_width="250px"
            android:layout_height="180px"
            android:layout_marginLeft="20px"
            android:scaleType="fitXY"
            android:src="@drawable/test_photo"
            ></ImageView>

        <ImageView
            android:id="@+id/image_details_certificate_image_2"
            android:layout_width="250px"
            android:layout_height="180px"
            android:layout_marginLeft="20px"
            android:scaleType="fitXY"
            android:src="@drawable/test_photo"
            ></ImageView>

        <ImageView
            android:id="@+id/image_details_certificate_image_3"
            android:layout_width="250px"
            android:layout_height="180px"
            android:layout_marginLeft="20px"
            android:layout_marginRight="20px"
            android:scaleType="fitXY"
            android:src="@drawable/test_photo"
            ></ImageView>
    </LinearLayout>

</HorizontalScrollView>

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><!--是否浮在activity之上-->
        <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;
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值