Android：＜10＞触摸切图和页面跳转的介绍

之前我们学过单击监听，这次我们来试一试触摸的事件，当我们在查看手机的相册的时候经常使用到滑动屏幕来切换图片，我们也可以在写一个切图的小案例，当然我们首先需要到网上下载五张图片，当然你想下多少就多少，只要后面按照逻辑来写就没有问题：

1、触摸切图布局:

这个切图的界面就是这个样子的，大家可以想一想怎么做的，然后再开始码代码；

这里呢，我用的是线性布局，含有一个Textview，一个imageview，还有一个linearyalout，里面有五个Textview，当然这里呢，你有几张图片就需要定义几个，因为这是上面图标的导航栏，我们看到的导航栏一般是可以跳转的，那我这里就不示范了，如果大家有意向的话自己设计好了，无非就用接口监听这里面的Textview就可以；具体的布局看代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:layout_marginTop="70dp"
        android:text="滑动切换图片"
        android:background="@drawable/titleshape"
        android:textSize="30sp"
         />
    <ImageView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:id="@+id/iv_photo"
        android:scaleType="fitXY"
        android:src="@drawable/tou1"
        />

    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal">
        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:background="@drawable/indexshape"
            android:id="@+id/tv_index1"
            android:text="1"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:id="@+id/tv_index2"
            android:text="2"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:id="@+id/tv_index3"
            android:text="3"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:id="@+id/tv_index4"
            android:text="4"
            android:textSize="25sp"/>
        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:id="@+id/tv_index5"
            android:text="5"
            android:textSize="25sp"/>
    </LinearLayout>
</LinearLayout>

2、形状，我们这里为了美化就建了几个形状，用在Textview的背景上面更有范，大家可以按照自己的意愿设计：

导航图标：

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <size android:width="25dp" android:height="25dp"/>
    <solid android:color="#00ff00"/>
    <stroke android:color="#ff0000" android:width="1dp"/>
</shape>

标题图标：

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topRightRadius="10dp"/>
    <size android:width="250dp" android:height="60dp"/>
    <solid android:color="#0000ff"/>
</shape>

3、处理函数：

我们想要实现滑动来实现切图首先需要写一个函数：

这个函数注意一点，我们拿到鼠标的其实横坐标和结束横坐标之后进行判断鼠标移动方向，以方便对索引的变换

 //1.2 编写触摸活动函数，接口为onTouchlistener,实现该方法
    public boolean onTouchEvent(MotionEvent event){
        //1.3 记录下鼠标的开始和结束坐标
        if(event.getAction() == MotionEvent.ACTION_DOWN){
            startx = event.getX();
        }else if(event.getAction() == MotionEvent.ACTION_UP){
            endx = event.getX();
            //1.4 开始判断是下一张还是上一张
            if(startx - endx > 40){
                if(index < 5){
                    index++;
                }else{
                    index=1;
                }
            }else {
                if(endx - startx > 40){
                    if(index>1){
                        index--;
                    }else{
                        index=5;
                    }
                }
            }
        }

        setImage();
        return false;
    }

这个函数是一个获取触摸事件的函数，通过event.getAction() == MotionEvent.ACTION_DOWN可以判断鼠标的按下，当然up的话就是抬起，在按下的时候我们需要存储一下鼠标的位置，然后在抬起的时候存储鼠标的结束位置，然后进行图片索引的递增和递减，需要判断一下防止越界，记住是在鼠标抬起的时候精心增减，然后通过这个索引实现对图片的切换和导航栏的切换：

//1.5 设置我们的图片
    public void setImage(){
        //1.6 获取资源对象
        Resources resources = getResources();
        //1.7 拿到图片id
        int id = resources.getIdentifier(getPackageName()+":"+"drawable/tou"+index,null,null);

        iv_photo.setImageResource(id);

        //1.8 同时切换当前导航图标背景
        for (int i = 0; i < 5; i++) {
            if(index == (i+1)){
                textViews[i].setBackgroundResource(R.drawable.indexshape);
            }else{
                textViews[i].setBackgroundResource(0);
            }
        }
    }

当然，我这里对于五个图标的切换用到了数组，因为简单，每次设置图片的同时对下面的导航图标进行一次变化，但是只能实现跳变，所以就使用数组的遍历来实现就可以；

4、初始化变量：因为我们每次工程少不了获取组件来进行初始化，当然这里既然要改变图片和导航图标，数据初始化肯定是必不可少的：

 //1.8 初始化变量函数
    public void initparmas(){
        iv_photo = findViewById(R.id.iv_photo);

        tv_index1 = findViewById(R.id.tv_index1);
        tv_index2 = findViewById(R.id.tv_index2);
        tv_index3 = findViewById(R.id.tv_index3);
        tv_index4 = findViewById(R.id.tv_index4);
        tv_index5 = findViewById(R.id.tv_index5);

        textViews = new TextView[]{tv_index1,tv_index2,tv_index3,tv_index4,tv_index5};

    }

之前我们说过，对于大量数据的初始化我们就拿一个初始化函数做就可以了：

//1.1 创建好布局文件和形状之后，我们先定义需要用到的参数
    float startx,endx;//记录鼠标的位置
    int index;//切换图片的索引
    TextView tv_index1,tv_index2,tv_index3,tv_index4,tv_index5;

    //1.9 使用一个Textview数组简化代码
    TextView[] textViews;
    ImageView iv_photo;

5、页面跳转，关于页面跳转的内容，我这里就提一下，intent对象，我们新建一个空的界面，然后自定义一个布局，可以写一个按钮什么的，再加上单击属性，在单级响应函数里面我们新建一个Intent对象，然后使用startActivity函数启动这个对象：

//2.1 布局好页面之后，在响应函数里面实现页面跳转操作
    public void myintent(View view) {
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
    }

至于这一个界面的布局文件大家就靠自己想想设计吧，注意，这里的intent第二个参数就是主类，需要跳转的页面的主类对象，按照上面这样写就可以；

intent

好了，这一期就到这，大家快去试试吧！