无限轮播加小圆点(从网络获取图片)



思路:
1:floatview移动范围:直播下面和主题下面,最左边是直播View的
tabLive.getX (),最右边是
tabLive.getX ()加上3倍的直播View宽度。
2:滑动一个页面floatview移动范围:直播View的宽度。
3:计算从第一个到第二个:floatview的联动滑动距离与viewpager的滑动百分比有关,即viewpager滑到中间floatview也要在直播动态中间,移动距离为直播view左边加上floatview的宽度乘以滑动百分比,
positionOffset*floatView.getWidth () + tabLive.getX ();
4:其他位置滑动与position有关,加上
 position * tabLive.getWidth ()即可。
提示:
onPageScrolled 中的position为即将展现的位置,即从2滑到3,只要触发滑动position就会变成3(position值为2).
大概就是这么就完成了。


首先展示他的视图


<?xml version="1.0"encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:id="@+id/ll"
        android:orientation="horizontal"
        android:layout_marginTop="-35dp"
        >
    </LinearLayout>
</LinearLayout>
 
在这需要注意的细节就是两个小圆点需要在drawable下创建立两个小圆点
 
这是小圆点点的视图
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="8dp"
        android:layout_height="8dp"
        android:layout_margin="10dp"
        android:id="@+id/view"
        android:background="@drawable/yes"
        />
</LinearLayout>

 
选中的时候
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <solid android:color="@color/red"></solid>
    <corners android:radius="8dp"></corners>

</shape>
未选中的时候
 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">


    <solid android:color="@color/yellow"></solid>
    <corners android:radius="8dp"></corners>

</shape>

 
接下来就是最主要的MainActivity.java的代码
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.nostra13.universalimageloader.core.ImageLoader;

import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;

/**
 *  2017/9/21.
 */

public class Fragment_01 extends Fragment {
    private ViewPager vip;
    private static final String JSON_URL = "http://api.kkmh.com/v1/daily/comic_lists/0?since=0&gender=0&sa_event=eyJwcm9qZWN0Ijoia3VhaWthbl9hcHAiLCJ0aW1lIjoxNDg3NzQyMjQwNjE1LCJwcm9wZXJ0aWVzIjp7IkhvbWVwYWdlVGFiTmFtZSI6IueDremXqCIsIlZDb21tdW5pdHlUYWJOYW1lIjoi54Ot6ZeoIiwiJG9zX3ZlcnNpb24iOiI0LjQuMiIsIkdlbmRlclR5cGUiOiLlpbPniYgiLCJGcm9tSG9tZXBhZ2VUYWJOYW1lIjoi54Ot6ZeoIiwiJGxpYl92ZXJzaW9uIjoiMS42LjEzIiwiJG5ldHdvcmtfdHlwZSI6IldJRkkiLCIkd2lmaSI6dHJ1ZSwiJG1hbnVmYWN0dXJlciI6ImJpZ25veCIsIkZyb21Ib21lcGFnZVVwZGF0ZURhdGUiOjAsIiRzY3JlZW5faGVpZ2h0IjoxMjgwLCJIb21lcGFnZVVwZGF0ZURhdGUiOjAsIlByb3BlcnR5RXZlbnQiOiJSZWFkSG9tZVBhZ2UiLCJGaW5kVGFiTmFtZSI6IuaOqOiNkCIsImFidGVzdF9ncm91cCI6MTEsIiRzY3JlZW5fd2lkdGgiOjcyMCwiJG9zIjoiQW5kcm9pZCIsIlRyaWdnZXJQYWdlIjoiSG9tZVBhZ2UiLCIkY2FycmllciI6IkNoaW5hIE1vYmlsZSIsIiRtb2RlbCI6IlZQaG9uZSIsIiRhcHBfdmVyc2lvbiI6IjMuNi4yIn0sInR5cGUiOiJ0cmFjayIsImRpc3RpbmN0X2lkIjoiQTo2YWRkYzdhZTQ1MjUwMzY1Iiwib3JpZ2luYWxfaWQiOiJBOjZhZGRjN2FlNDUyNTAzNjUiLCJldmVudCI6IlJlYWRIb21lUGFnZSJ";
    private LinearLayout linear;
    private NewWorkUtils network;

    //放图片的集合
    private ArrayList<ImageView> imageList = new ArrayList<ImageView>();
    //放小圆点的集合
    private ArrayList<View> dotList = new ArrayList<View>();
    private int current = 0;
    private int oldList = 0;
    //小圆点的滑动计时
    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            vip.setCurrentItem(current);
            dotList.get(oldList).setBackgroundResource(R.drawable.yes);
            dotList.get(current%dotList.size()).setBackgroundResource(R.drawable.no);
            oldList =current%dotList.size();

        }
    };
    //图片的地址
    private String[] img_url = new String[]{
            "http://f2.kkmh.com/image/170920/gbtdel0uk.webp-w640",
            "http://f2.kkmh.com/image/170707/6yh0oiynb.webp-w320",
            "http://f2.kkmh.com/image/170919/vqoZI89fQ.webp-w640",
    };

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_01, container, false);

        vip =(ViewPager) view.findViewById(R.id.vip);
        linear = (LinearLayout) view.findViewById(R.id.ll);
        getImagesViews();
        getCircles();
        //给轮播设置适配器
        vip.setAdapter(new MyAdapter());
        //计算滑动的页面
        int currentitem = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2%3;
        vip.setCurrentItem(currentitem);
        //默认第一张
        dotList.get(0).setBackgroundResource(R.drawable.no);
        //图片轮播倒计时
        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                current = vip.getCurrentItem()+1;
                handler.sendEmptyMessage(0*123);
            }
        },3000,2000);
        return view;
    }
    //获取图片
    private void getImagesViews() {
        for (int i=0; i<img_url.length; i++){
            ImageView imageView = new ImageView(getActivity());
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            ImageLoader.getInstance().displayImage(img_url[i],imageView);
            imageList.add(imageView);
        }
    }

     //获取小圆点
     private void getCircles() {
         for (int i=0; i<img_url.length; i++){
             View view = LayoutInflater.from(getActivity()).inflate(R.layout.item,null);
             View dot = view.findViewById(R.id.view);
             dotList.add(dot);
             linear.addView(view);
         }
         }


    //轮播的适配器
    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {

            View view = imageList.get(position % imageList.size());
            ViewGroup parent = (ViewGroup) view.getParent();
            if (parent == null) {
                container.addView(view);
            } else {
                parent.removeView(view);
                container.addView(view);
            }

//            int item = position % imageList.size();
//            View imageView = imageList.get(item);
//            container.addView(imageView);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }


}

//工具类
public class MyApplication extends Application {
    public void onCreate() {
        super.onCreate();
        ImageLoaderConfiguration config=new ImageLoaderConfiguration.Builder(this).build();
        ImageLoader.getInstance().init(config);
    }
}
//从网络加载的工具
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;



public class NewWorkUtils {
    public String getJsonByUrlConnection(String jsonUrl){
        String str = "";
        try {
            URL url = new URL(jsonUrl);
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
            conn.setConnectTimeout(5000);
            conn.setReadTimeout(5000);
            int resCode = conn.getResponseCode();
            if(resCode == 200){
                InputStream is = conn.getInputStream();
                byte[] b = new byte[1024];
                int len = 0;
                while((len=is.read(b)) != -1){
                    str += new String(b,0,len);
                }
            }

        } catch (MalformedURLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return str;
    }




}

 
 
 
//加载多条目的刷新加载

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;

import com.google.gson.Gson;
import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshListView;
import com.nostra13.universalimageloader.core.ImageLoader;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

/**
 *  2017/9/21.
 */

public class Fragment_01 extends Fragment {
    private ViewPager vip;
    private static final String JSON_URL = "http://api.kkmh.com/v1/daily/comic_lists/0?since=0&gender=0&sa_event=eyJwcm9qZWN0Ijoia3VhaWthbl9hcHAiLCJ0aW1lIjoxNDg3NzQyMjQwNjE1LCJwcm9wZXJ0aWVzIjp7IkhvbWVwYWdlVGFiTmFtZSI6IueDremXqCIsIlZDb21tdW5pdHlUYWJOYW1lIjoi54Ot6ZeoIiwiJG9zX3ZlcnNpb24iOiI0LjQuMiIsIkdlbmRlclR5cGUiOiLlpbPniYgiLCJGcm9tSG9tZXBhZ2VUYWJOYW1lIjoi54Ot6ZeoIiwiJGxpYl92ZXJzaW9uIjoiMS42LjEzIiwiJG5ldHdvcmtfdHlwZSI6IldJRkkiLCIkd2lmaSI6dHJ1ZSwiJG1hbnVmYWN0dXJlciI6ImJpZ25veCIsIkZyb21Ib21lcGFnZVVwZGF0ZURhdGUiOjAsIiRzY3JlZW5faGVpZ2h0IjoxMjgwLCJIb21lcGFnZVVwZGF0ZURhdGUiOjAsIlByb3BlcnR5RXZlbnQiOiJSZWFkSG9tZVBhZ2UiLCJGaW5kVGFiTmFtZSI6IuaOqOiNkCIsImFidGVzdF9ncm91cCI6MTEsIiRzY3JlZW5fd2lkdGgiOjcyMCwiJG9zIjoiQW5kcm9pZCIsIlRyaWdnZXJQYWdlIjoiSG9tZVBhZ2UiLCIkY2FycmllciI6IkNoaW5hIE1vYmlsZSIsIiRtb2RlbCI6IlZQaG9uZSIsIiRhcHBfdmVyc2lvbiI6IjMuNi4yIn0sInR5cGUiOiJ0cmFjayIsImRpc3RpbmN0X2lkIjoiQTo2YWRkYzdhZTQ1MjUwMzY1Iiwib3JpZ2luYWxfaWQiOiJBOjZhZGRjN2FlNDUyNTAzNjUiLCJldmVudCI6IlJlYWRIb21lUGFnZSJ";
    private LinearLayout linear;
    private NewWorkUtils network;

    //放图片的集合
    private ArrayList<ImageView> imageList = new ArrayList<ImageView>();
    //放小圆点的集合
    private ArrayList<View> dotList = new ArrayList<View>();
    private int current = 0;
    private int oldList = 0;
    //小圆点的滑动计时
    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            vip.setCurrentItem(current);
            dotList.get(oldList).setBackgroundResource(R.drawable.yes);
            dotList.get(current%dotList.size()).setBackgroundResource(R.drawable.no);
            oldList =current%dotList.size();

        }
    };
    //图片的地址
    private String[] img_url = new String[]{
            "http://f2.kkmh.com/image/170920/gbtdel0uk.webp-w640",
            "http://f2.kkmh.com/image/170707/6yh0oiynb.webp-w320",
            "http://f2.kkmh.com/image/170919/vqoZI89fQ.webp-w640",
            "http://f2.kkmh.com/image/170919/vqoZI89fQ.webp-w640",
    };
    private PullToRefreshListView prl;
    private List<News.DataBean.ComicsBean> list;
    private MySuperAdapter adapter;
    int j = 1;

    private String name;
    private String news_url;
    private PullToRefreshListView pullToRefreshListView;
    //private MyPullToListViewAdapter myadapter;
    private ArrayList<News> results;




    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_01, container, false);

        vip =(ViewPager) view.findViewById(R.id.vip);
        linear = (LinearLayout) view.findViewById(R.id.ll);
        getImagesViews();
        getCircles();

        //给轮播设置适配器
        vip.setAdapter(new MyAdapter());
        //计算滑动的页面
        int currentitem = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2%3;
        vip.setCurrentItem(currentitem);
        //默认第一张
        dotList.get(0).setBackgroundResource(R.drawable.no);

        //图片轮播倒计时
        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                current = vip.getCurrentItem()+1;
                handler.sendEmptyMessage(0*123);
            }
        },3000,2000);
        network = new NewWorkUtils();

        //刚开始请求的数据
      new AsyncTask<String,Integer,String>(){

            @Override
            protected String doInBackground(String... params) {

                String url = params[0];
                String json = network.getJsonByUrlConnection(JSON_URL);
                return json;
            }

            @Override
            protected void onPostExecute(String s) {
                super.onPostExecute(s);
                Gson gson = new Gson();
                News fromJson = gson.fromJson(s, News.class);
                list = fromJson.getData().getComics();
                adapter = new MySuperAdapter(list,getActivity());
                prl.setAdapter(adapter);
                //刷新完成停止
                prl.onRefreshComplete();
            }
        }.execute(JSON_URL+j);


        prl = (PullToRefreshListView) view.findViewById(R.id.pull_refresh_list);

        //刚进来,网络请求数据,配置数据
         //刷新
      prl.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener<ListView>() {
          @Override
          public void onRefresh(PullToRefreshBase<ListView> refreshView) {

              new AsyncTask<String,Integer,String>(){

                  @Override
                  protected String doInBackground(String... params) {

                      String url = params[0];
                      String json = network.getJsonByUrlConnection(JSON_URL);
                      return json;
                  }

                  @Override
                  protected void onPostExecute(String s) {
                      super.onPostExecute(s);
                      Gson gson = new Gson();
                      News fromJson = gson.fromJson(s, News.class);
                      list = fromJson.getData().getComics();
                      adapter = new MySuperAdapter(list,getActivity());
                      prl.setAdapter(adapter);
                      //刷新完成停止
                      prl.onRefreshComplete();
                  }
              }.execute(JSON_URL+j);

          }
      });

        //pulltofreash加载
        prl.setOnLastItemVisibleListener(new PullToRefreshBase.OnLastItemVisibleListener() {
            @Override
            public void onLastItemVisible() {
                new AsyncTask<String,Integer,String>(){

                    @Override
                    protected String doInBackground(String... params) {
                        j++;
                        String url = params[0];
                        String json = network.getJsonByUrlConnection(JSON_URL);
                        return json;
                    }

                    @Override
                    protected void onPostExecute(String s) {
                        super.onPostExecute(s);
                        Gson gson = new Gson();
                        News fromJson = gson.fromJson(s, News.class);
                        List<News.DataBean.ComicsBean> comics = fromJson.getData().getComics();
                        list.addAll(comics);
                        adapter.notifyDataSetChanged();

                    }
                }.execute(JSON_URL+j);
            }
        });



        return view;
    }


    //获取图片
    private void getImagesViews() {
        for (int i=0; i<img_url.length; i++){
            ImageView imageView = new ImageView(getActivity());
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            ImageLoader.getInstance().displayImage(img_url[i],imageView);
            imageList.add(imageView);
        }
    }

     //获取小圆点
     private void getCircles() {
         for (int i=0; i<img_url.length; i++){
             View view = LayoutInflater.from(getActivity()).inflate(R.layout.item,null);
             View dot = view.findViewById(R.id.view);
             dotList.add(dot);
             linear.addView(view);
         }
         }




    //轮播的适配器
    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {

            View view = imageList.get(position % imageList.size());
            ViewGroup parent = (ViewGroup) view.getParent();
            if (parent == null) {
                container.addView(view);
            } else {
                parent.removeView(view);
                container.addView(view);
            }

//            int item = position % imageList.size();
//            View imageView = imageList.get(item);
//            container.addView(imageView);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }


}

 
 
 
 
 
 
 
 
 
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的图片轮播底部小圆点轮播的示例代码: HTML: ```html <div class="slider"> <div class="slider-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <div class="slider-dots"></div> </div> ``` CSS: ```css .slider { position: relative; width: 100%; overflow: hidden; } .slider-container { position: relative; width: 300%; left: 0; transition: left 0.5s ease-in-out; } .slider-container img { width: 33.333%; float: left; } .slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .slider-dot { width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background-color: gray; cursor: pointer; } .slider-dot.active { background-color: black; } ``` JavaScript: ```javascript var sliderContainer = document.querySelector('.slider-container'); var sliderDots = document.querySelector('.slider-dots'); var sliderDot = document.querySelectorAll('.slider-dot'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 3000); function nextSlide() { currentSlide = (currentSlide + 1) % sliderDot.length; sliderContainer.style.left = "-" + currentSlide + "00%"; updateSliderDots(); } function updateSliderDots() { for (var i = 0; i < sliderDot.length; i++) { sliderDot[i].classList.remove('active'); } sliderDot[currentSlide].classList.add('active'); } for (var i = 0; i < sliderDot.length; i++) { sliderDot[i].addEventListener('click', function() { currentSlide = Array.prototype.indexOf.call(sliderDots.children, this); sliderContainer.style.left = "-" + currentSlide + "00%"; updateSliderDots(); clearInterval(slideInterval); slideInterval = setInterval(nextSlide, 3000); }); } ``` 这段代码实现了一个无限循环的图片轮播,并在底部添小圆点,点击小圆点可以切换到对应的图片

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值