图片轮换

最新推荐文章于 2021-05-26 16:35:09 发布

good_idea_

最新推荐文章于 2021-05-26 16:35:09 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/good_idea_/article/details/74852810

版权

本文介绍如何实现图片轮换功能，包括XML布局定义、Drawable中小圆点的创建，以及Java类的编写。虽然提供了详细步骤和注释，但需要注意在Fragment中使用时，当滑动到最后一张图片时，可能会导致图片轮播与Fragment滑动冲突的问题。

摘要由CSDN通过智能技术生成

图片轮换

先定义xml

<FrameLayout
    android:layout_width="368dp"
    android:layout_height="200dp"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="8dp">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="35dip"
        android:layout_gravity="bottom"
        android:background="#33000000"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图片标题"
            android:textColor="@android:color/white" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dip"
            android:orientation="horizontal" >

            <View
                android:id="@+id/dot_0"
                android:layout_width="5dip"
                android:layout_height="5dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_focused"/>

            <View
                android:id="@+id/dot_1"
                android:layout_width="5dip"
                android:layout_height="5dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_normal"/>
            <View
                android:id="@+id/dot_2"
                android:layout_width="5dip"
                android:layout_height="5dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_normal"/>
            <View
                android:id="@+id/dot_3"
                android:layout_width="5dip"
                android:layout_height="5dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_normal"/>
            <View
                android:id="@+id/dot_4"
                android:layout_width="5dip"
                android:layout_height="5dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_normal"/>

        </LinearLayout>
    </LinearLayout>
</FrameLayout>

然后去drawable里面去定义两个小圆点

dot_focused.xml dot_normal.xml 两个小圆点

dot_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <corners android:radius="5dip"/>
   <solid android:color="#55000000"/>
</shape>



dot_normal.xml 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="5dip"/>
<solid android:color="#aaFFFFFF"/>
</shape>

最后是JAVA类

import android.app.Activity;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class MainActivity extends Activity{

    private ViewPager mViewPaper;
    private List<ImageView> images;
    private List<View> dots;
    private int currentItem;
    //记录上一次点的位置
    private int oldPosition = 0;
    //存放图片的id
    private int[] imageIds = new int[]{
            R.drawable.ic_action_add,
            R.drawable.ic_action_arrow_left,
            R.drawable.ic_action_arrow_right,
            R.drawable.ic_action_dialog,
            R.drawable.ic_action_gear
    };
    //存放图片的标题
    private String[]  titles = new String[]{
            "巩俐不低俗，我就不能低俗",
            "扑树又回来啦！再唱经典老歌引万人大合唱",
            "揭秘北京电影如何升级",
            "乐视网TV版大派送",
            "热血屌丝的反杀"
    };
    private TextView title;
    private ViewPagerAdapter adapter;
    private ScheduledExecutorService scheduledExecutorService;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPaper = (ViewPager) findViewById(R.id.vp);

        //显示的图片
        images = new ArrayList<ImageView>();
        for(int i = 0; i < imageIds.length; i++){
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            images.add(imageView);
        }
        //显示的小点
        dots = new ArrayList<View>();
        dots.add(findViewById(R.id.dot_0));
        dots.add(findViewById(R.id.dot_1));
        dots.add(findViewById(R.id.dot_2));
        dots.add(findViewById(R.id.dot_3));
        dots.add(findViewById(R.id.dot_4));

        title = (TextView) findViewById(R.id.title);
        title.setText(titles[0]);

        adapter = new ViewPagerAdapter();
        mViewPaper.setAdapter(adapter);

        mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {


            @Override
            public void onPageSelected(int position) {
                title.setText(titles[position]);
                dots.get(position).setBackgroundResource(R.drawable.dot_focused);
                dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);

                oldPosition = position;
                currentItem = position;
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    /**
     * 自定义Adapter
     * @author liuyazhuang
     *
     */
    private class ViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return images.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public void destroyItem(ViewGroup view, int position, Object object) {
            // TODO Auto-generated method stub
//       super.destroyItem(container, position, object);
//       view.removeView(view.getChildAt(position));
//       view.removeViewAt(position);
            view.removeView(images.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup view, int position) {
            // TODO Auto-generated method stub
            view.addView(images.get(position));
            return images.get(position);
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    /**
     * 利用线程池定时执行动画轮播
     */
    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleWithFixedDelay(
                new ViewPageTask(),
                2,
                2,
                TimeUnit.SECONDS);
    }


    private class ViewPageTask implements Runnable{

        @Override
        public void run() {
            currentItem = (currentItem + 1) % imageIds.length;
            mHandler.sendEmptyMessage(0);
        }
    }

    /**
     * 接收子线程传递过来的数据
     */
    private Handler mHandler = new Handler(){
        public void handleMessage(android.os.Message msg) {
            mViewPaper.setCurrentItem(currentItem);
        };
    };
    @Override
    protected void onStop() {
        // TODO Auto-generated method stub
        super.onStop();
    }
}

中间图片就自己放咯要几个图片就放几个图片吧

所有过程都有注释请大家自行观看

然后一个图片轮换就出来啦

但是会有BUG 当你放入碎片Fragement 里面滑动的时候滑动图片最后一张的时候就会变成滑动碎片