16.图片切换器ImageSwitcher和画廊Gallery,子线程自动切换界面

通过图片查看器和画廊实现如下效果：

实现思路，

界面使用上面一个图片切换器

下面使用一个画廊

1.上面的切换器需要使用一个图片工厂进行配置，配置的内容有：背景颜色，显示图片时的比例缩放，布局参数，图片进出动画

2.下面的画廊需要使用一个baseadapter将图片显示到界面上，（就是填好里面的构造方法）

3.其中实现的事件是这样的，下面的画廊选中了什么，上面的VIew就可以显示什么，

到此，前三步就可以实现画廊控件左右滑动，上面显示下面滑到哪里了，

自动转换的实现：

4.由于不能在主线程中采用占时操作，所以需要开启子线程，在子线程中完成占时的操作，

开启子线程，在子线程中，实现定时改变画廊的被选择的条目，

5.定时实现改变条目，这个属于更改UI，安卓中不能实现在子线程中更改UI

　所以这里引入一个叫做消息机制的东西，

6.使用Handle发送消息，在主线程中准备接收，主线程接收到之后对接受到的数据进行判断，

　判断完毕之后，作出相应的动作，这里就是更改UI，

以下为代码

布局文件,只需要上面放图片切换器下面放一个画廊即可完成界面，

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.xialm.gallery_circulation.MainActivity">
    <Gallery android:id="@+id/glr"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:spacing="5dp"/>

    <ImageSwitcher android:id="@+id/imgSwt"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:paddingBottom="5dp"
        android:layout_above="@+id/glr"></ImageSwitcher>

</RelativeLayout>

逻辑代码：

package com.example.xialm.gallery_circulation;

import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;
import android.R.integer;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.provider.MediaStore.Images;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.Gallery.LayoutParams;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends AppCompatActivity {

    //图像切换器
    ImageSwitcher imageSwitcher;
    //画廊
    Gallery glr;

    //将要显示的资源放在drawable目录下
    int[] imgs={R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.f};

    //图片组
    ImageView[] galleryViews=new ImageView[imgs.length];

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

        //找到关心的控件
        imageSwitcher=(ImageSwitcher)findViewById(R.id.imgSwt);
        glr=(Gallery)findViewById(R.id.glr);

        //为图片切换器添加图片工厂，，工厂作用是用来将图片和父窗口分开
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                // TODO Auto-generated method stub
                //
                ImageView iv=new ImageView(MainActivity.this);
                //设置背景颜色
                iv.setBackgroundColor(0xFF000000);
                //图片在view显示时，进行什么样子比例的缩放，以及显示图片的整体还是显示图片的部分
                iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                //如下参数常用3,4
                /*1. SetScaleType(ImageView.ScaleType.CENTER);
                按图片的原来size居中显示，当图片长/宽超过View的长/宽，则截取图片的居中部分显示
                2. SetScaleType(ImageView.ScaleType.CENTER_CROP);
                按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽)
                3. setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽
                4. setScaleType(ImageView.ScaleType.FIT_CENTER);
                把图片按比例扩大/缩小到View的宽度，居中显示
                5. FIT_START, FIT_END
                在图片缩放效果上与FIT_CENTER一样，只是显示的位置不同，FIT_START是置于顶部，FIT_CENTER居中，FIT_END置于底部。
                6. FIT_XY
                不按比例缩放图片，目标是把图片塞满整个View。*/

                //设置布局参数
                iv.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
                return iv;
            }
        });

        //设置动画，进来出去的动画
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        imageSwitcher.setAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

        //为图像view添加图像资源
        for(int i=0;i<galleryViews.length;i++){
            ImageView iv=new ImageView(MainActivity.this);
            iv.setImageResource(imgs[i]);
            iv.setAdjustViewBounds(true);//是否保持宽高比吗，需要和MaxWidth和MaxHeight一起使用单独使用无效
            iv.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
            galleryViews[i]=iv;

        }

        //画廊添加适配器，是一个匿名的类
        glr.setAdapter(new BaseAdapter() {
            @Override
            public View getView(int arg0, View arg1, ViewGroup arg2) {
                // TODO Auto-generated method stub
                return galleryViews[arg0];
            }

            @Override
            public long getItemId(int arg0) {
                // TODO Auto-generated method stub
                return arg0;
            }

            @Override
            public Object getItem(int arg0) {
                // TODO Auto-generated method stub
                return null;
            }

            //个数和图片个数一样
            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return imgs.length;
            }
        });

        //设置监听事件，监听的发送的消息，响应的事件为上面的图片切换器有图片显示
        glr.setOnItemSelectedListener(new OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> arg0, View arg1,
                                       int arg2, long arg3) {
                // TODO Auto-generated method stub
                //图片设置显示
                imageSwitcher.setImageResource(imgs[arg2]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> arg0) {
                // TODO Auto-generated method stub
            }

        });

        //由于我们要实现的内容中有延时的部分，但是android编程的原则为不能在主线程中出现延时操作
        //所以在下面实现能够在子线程中进行数据处理之后，向主线程发一个消息，
        //收到消息后主线程将进行处理

        //主线程接收操作
        final Handler hhHandler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                // TODO Auto-generated method stub
                //去掉继承
                //super.handleMessage(msg);
                //拿到子线程发来的数据
                int p=msg.what;
                glr.setSelection(p);
            }
        };

        //开启一个子线程，使用子线程返回数据给主线程更改UI
        new Thread(){
            //重写run方法
            public void run() {
                //在子线程中的代码
                int i = 0;
                while(i<6){
                    //休眠，1000ms
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }

                    Message mm = new Message();
                    //what是消息标记
                    mm.what = i;

                    //在主线程中实例化一个Handler
                    hhHandler.sendMessage(mm);
                    //下次传一，下下次传二
                    i++;
                    if (i==6){
                        i=0;
                    }
                }
            };

        }.start();

    }
}

16.图片切换器ImageSwitcher和画廊Gallery,子线程自动切换界面

猜你喜欢