图片浏览产品说明书

最新推荐文章于 2024-09-26 15:42:15 发布

原创最新推荐文章于 2024-09-26 15:42:15 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

问题来源：

昨天一个好友微信给了个动态图，内容是别人的产品说明书，问我相关的实践方法，可使用哪些API：

我看了看，梳理了一个大概的思路：

首页一个listview，处理点击跳转逻辑，加载相应的图片浏览器页面，可手动点击上下页，滑动上下翻页，也可定时播放。

题外话：

我这里主要讲一下图片浏览器页面的相关实现代码，首页listview略过吧！

我这里主要用ImageSwitcher控件实现。

查看ImageSwitcher，它的继承父类ViewSwitcher以及ViewAnimator，可见它具备切换和动画的功能。

ImageSwitcher原理讲解以及源代码分析：

ImageSwitcher有两个子view，ImageView，当左右滑动的时候，就在这两个ImageView之间来回切换来显示图片。

myImageSwitch.setFactory(this); 为imageSwitcher设置ViewFactory

查看setFactory(this)源码：

public void setFactory(ViewFactory factory) {
mFactory = factory;
obtainView();
obtainView();
}

发现其中有两个obtainView方法，继续深入探究obtainView方法，

private View obtainView() {
View child = mFactory.makeView();
LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp == null) {
lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
}
addView(child, lp);
return child;
}

这里可以清楚看到，通过makeView()方法创建View，然后把创建出来的View添加到ImageSwitcher上。

接下来，得看看makeView()方法的实现，当我们设置了setFactory(this)，我们必须要现实ViewSwitcher.ViewFactory这个接口，以及它的makeView方法

@Override
public View makeView()
{
final ImageView i = new ImageView(this);
i.setBackgroundColor(0xff000000);
i.setScaleType(ImageView.ScaleType.CENTER_CROP);
i.setLayoutParams(new ImageSwitcher.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
return i;
}

上面是我代码中的程序实现，可以发现new ImageView，给它设置相应的属性，然后最后返回的还是一个ImageView，所以这个方法就是创建一个ImageView

当我们需要给这个ImageView设置相关的图片时，调用的方法是：

imageView.setImageResource(arrayPictures[Index]);

1、public void setImageResource(@DrawableRes int resid)
{
ImageView image = (ImageView)this.getNextView();
image.setImageResource(resid);
showNext();
}

2、 public View getNextView() {
int which = mWhichChild == 0 ? 1 : 0;
return getChildAt(which);
}

3、 public void showNext() {
setDisplayedChild(mWhichChild + 1);
}

getNextView()方法是在两个子ImageView之间切换，showNext()方法是负责显示这两个子View中的哪一个！

也就是说，现用getNextView()方法得到下一个View，然后重新设置这个View的imageResource，最后通过showNext()方法将下一个View显示出来

好，控件源码方法分析到此结束

案例代码分析：

XML文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_image_show"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ly.com.imageviewswitchdemo.ImageShowActivity">

    <ImageSwitcher
        android:id="@+id/myImageSwitch"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="上一个" />

        <Button
            android:id="@+id/start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="开始"/>

        <Button
            android:id="@+id/forward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="下一个" />
    </RelativeLayout>

</LinearLayout>

JAVA文件：

public class ImageShowActivity extends AppCompatActivity implements View.OnClickListener, ViewSwitcher.ViewFactory
{
    private int[] imgIdArray;
    private Button btn_back, btn_start, btn_next;
    private ImageSwitcher myImageSwitch;
    /**
     * 当前选中的图片id序号 默认显示第一张
     */
    private int currentPosition = 0;
    private Timer timer = new Timer();
    private GestureDetector myGestureDetector;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_show);

        imgIdArray = getIntent().getIntArrayExtra("image");

        btn_back = (Button) findViewById(R.id.back);
        btn_start = (Button) findViewById(R.id.start);
        btn_next = (Button) findViewById(R.id.forward);
        myImageSwitch = (ImageSwitcher) findViewById(R.id.myImageSwitch);

        btn_back.setOnClickListener(this);
        btn_start.setOnClickListener(this);
        btn_next.setOnClickListener(this);
        myImageSwitch.setFactory(this);
        myGestureDetector = new GestureDetector(this, new myOnGestureListener());
        myImageSwitch.setImageResource(imgIdArray[currentPosition]);

        myImageSwitch.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View v, MotionEvent event)
            {
                myGestureDetector.onTouchEvent(event);
                return true;
            }
        });
    }

    //滑动逻辑
    class myOnGestureListener extends GestureDetector.SimpleOnGestureListener
    {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                               float velocityY)
        {
            if (e1.getX() - e2.getX() > 50)
            {
                //下一个
                nextFun();

            } else if (e2.getX() - e1.getX() > 50)
            {
                //上一个
                backFun();
            }
            return super.onFling(e1, e2, velocityX, velocityY);
        }
    }

    TimerTask task = new TimerTask()
    {
        @Override
        public void run()
        {
            Message message = new Message();
            message.what = 1;
            handler.sendMessage(message);
        }
    };

    Handler handler = new Handler()
    {
        public void handleMessage(Message msg)
        {
            if (msg.what == 1)
            {
                if (currentPosition == (imgIdArray.length - 1))
                {
                    currentPosition = 0;
                    animRight();
                    myImageSwitch.setImageResource(imgIdArray[0]);
                } else
                {
                    animRight();
                    myImageSwitch.setImageResource(imgIdArray[currentPosition + 1]);
                    currentPosition++;
                }
            }
            super.handleMessage(msg);
        }
    };

    //页面间跳转
    public static void setDataIntent(Context context, int[] array)
    {
        Intent intent = new Intent();
        Bundle bundle = new Bundle();
        intent.setClass(context, ImageShowActivity.class);
        bundle.putIntArray("image", array);
        intent.putExtras(bundle);
        context.startActivity(intent);
    }

    //按钮点击事件
    @Override
    public void onClick(View v)
    {
        switch (v.getId())
        {
            case R.id.back:
                backFun();
                break;
            case R.id.start:
                if (timer == null)
                {
                    timer = new Timer();
                    timer.schedule(task, 1000, 2000); // 1s后执行task,经过1s再次执行
                }
                break;
            case R.id.forward:

                 nextFun();
                break;
            default:
                break;
        }

    }

    @Override
    public View makeView()
    {
        final ImageView i = new ImageView(this);
        i.setBackgroundColor(0xff000000);
        i.setScaleType(ImageView.ScaleType.CENTER_CROP);
        i.setLayoutParams(new ImageSwitcher.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        return i;
    }

    /**
     * 取消定时器
     */
    public void cancleTimer()
    {
        if (timer != null)
        {
            timer.cancel();
            timer.purge();
            timer = null;
        }
    }

    /**
     * 右侧动画
     */
    public void animRight()
    {
        myImageSwitch.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_out));
        myImageSwitch.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_in));
    }

    /**
     * 左侧动画
     */
    public void animLeft()
    {
        myImageSwitch.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_in));
        myImageSwitch.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_out));
    }


    /**
     * 上一个
     */
    public void backFun(){
        cancleTimer();
        if (currentPosition == 0)
        {
            animLeft();
            currentPosition = imgIdArray.length - 1;
            myImageSwitch.setImageResource(imgIdArray[currentPosition]);

        } else
        {
            animLeft();
            myImageSwitch.setImageResource(imgIdArray[currentPosition - 1]);
            currentPosition--;
        }
    }


    /**
     * 下一个
     */
    public void nextFun(){
        cancleTimer();
        if (currentPosition == (imgIdArray.length - 1))
        {
            animRight();
            currentPosition = 0;
            myImageSwitch.setImageResource(imgIdArray[currentPosition]);
        } else
        {
            animRight();
            myImageSwitch.setImageResource(imgIdArray[currentPosition + 1]);
            currentPosition++;
        }
    }

    @Override
    protected void onDestroy()
    {
        super.onDestroy();
        cancleTimer();
    }

}

完毕！！！！！！！