小圆点+XlistView+RadioGroup

主Activity

public class MainActivity extends AppCompatActivity {
    ViewPager vp;
    List<Fragment>list;
    RadioGroup rg;
    RadioButton rb1,rb2,rb3,rb4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        vp = (ViewPager) findViewById(R.id.vp);
        rg = (RadioGroup) findViewById(R.id.rg);
        rb1 = (RadioButton) findViewById(R.id.rb1);
        rb2 = (RadioButton) findViewById(R.id.rb2);
        rb3 = (RadioButton) findViewById(R.id.rb3);
        rb4 = (RadioButton) findViewById(R.id.rb4);
        initData();
        MyFragmentApdata  mfa = new MyFragmentApdata(getSupportFragmentManager());
        vp.setAdapter(mfa);

        //给ViewPage设置监听事件
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            @Override
            public void onPageSelected(int position) {

                switch (position){
                    case 0:
                        rg.check(R.id.rb1);
                        rb1.setBackgroundColor(Color.BLUE);
                        rb2.setBackgroundColor(Color.GRAY);
                        break;
                    case 1:
                        rg.check(R.id.rb2);
                        rb2.setBackgroundColor(Color.BLUE);
                        rb1.setBackgroundColor(Color.GRAY);
                        break;
                    case 2:
                        rg.check(R.id.rb3);
                        rb3.setBackgroundColor(Color.GREEN);
                        rb4.setBackgroundColor(Color.GRAY);
                        break;
                    case 3:
                        rg.check(R.id.rb4);
                        rb4.setBackgroundColor(Color.GREEN);
                        rb3.setBackgroundColor(Color.GRAY);
                        break;
                }
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
        //给RadioGroup设置监听事件
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch(i){
                    case R.id.rb1:
                        vp.setCurrentItem(0);
                        break;
                    case R.id.rb2:
                        vp.setCurrentItem(1);
                        break;
                    case R.id.rb3:
                        vp.setCurrentItem(2);
                        break;
                    case R.id.rb4:
                        vp.setCurrentItem(3);
                        break;
                }
            }
        });
    }
    //添加数据
    private void initData() {
        list = new ArrayList<>();
        list.add(new Fragment_One());
        list.add(new Fragment_Two());
        list.add(new Fragment_three());
        list.add(new Fragment_Frou());
    }
    //适配器
    class MyFragmentApdata extends FragmentPagerAdapter{

        public MyFragmentApdata(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }
    }
}
主Activity布局
<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"
    tools:context="com.example.day9_12.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </android.support.v4.view.ViewPager>
    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        >
        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="首页"
            android:textSize="20dp"
            android:button="@null"
            android:layout_gravity="center"
            />
         <RadioButton
        android:id="@+id/rb2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="西瓜视频"
             android:textSize="20dp"
        android:button="@null"
        android:gravity="center"
        />
        <RadioButton
            android:id="@+id/rb3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="微头条"
            android:textSize="20dp"
            android:button="@null"
            android:gravity="center"
            />
        <RadioButton
            android:id="@+id/rb4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="我的"
            android:textSize="20dp"
            android:button="@null"
            android:gravity="center"
            />
    </RadioGroup>

</RelativeLayout>
数据请求的包
public class Util {
    static int NUM=1;
    //XListView
    public static String getNetDataStr() {
        String json = null;
        try {
            URL url = new URL(
                    "http://api.kkmh.com/v1/daily/comic_lists/0?since=0&gender=0&sa_event=eyJwcm9qZWN0Ijoia3VhaWthbl9hcHAiLCJ0aW1lIjoxNDg3NzQyMjQwNjE1LCJwcm9wZXJ0aWVzIjp7IkhvbWVwYWdlVGFiTmFtZSI6IueDremXqCIsIlZDb21tdW5pdHlUYWJOYW1lIjoi54Ot6ZeoIiwiJG9zX3ZlcnNpb24iOiI0LjQuMiIsIkdlbmRlclR5cGUiOiLlpbPniYgiLCJGcm9tSG9tZXBhZ2VUYWJOYW1lIjoi54Ot6ZeoIiwiJGxpYl92ZXJzaW9uIjoiMS42LjEzIiwiJG5ldHdvcmtfdHlwZSI6IldJRkkiLCIkd2lmaSI6dHJ1ZSwiJG1hbnVmYWN0dXJlciI6ImJpZ25veCIsIkZyb21Ib21lcGFnZVVwZGF0ZURhdGUiOjAsIiRzY3JlZW5faGVpZ2h0IjoxMjgwLCJIb21lcGFnZVVwZGF0ZURhdGUiOjAsIlByb3BlcnR5RXZlbnQiOiJSZWFkSG9tZVBhZ2UiLCJGaW5kVGFiTmFtZSI6IuaOqOiNkCIsImFidGVzdF9ncm91cCI6MTEsIiRzY3JlZW5fd2lkdGgiOjcyMCwiJG9zIjoiQW5kcm9pZCIsIlRyaWdnZXJQYWdlIjoiSG9tZVBhZ2UiLCIkY2FycmllciI6IkNoaW5hIE1vYmlsZSIsIiRtb2RlbCI6IlZQaG9uZSIsIiRhcHBfdmVyc2lvbiI6IjMuNi4yIn0sInR5cGUiOiJ0cmFjayIsImRpc3RpbmN0X2lkIjoiQTo2YWRkYzdhZTQ1MjUwMzY1Iiwib3JpZ2luYWxfaWQiOiJBOjZhZGRjN2FlNDUyNTAzNjUiLCJldmVudCI6IlJlYWRIb21lUGFnZSJ9"+NUM);
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
            conn.setRequestMethod("GET");
            int code = conn.getResponseCode();
            if (code == 200) {
                InputStream is = conn.getInputStream();
                ByteArrayOutputStream bos = new ByteArrayOutputStream();
                int len = -1;
                byte[] buff = new byte[1024];
                while((len = is.read(buff)) != -1){
                    bos.write(buff,0,len);
                }
                json = new String(bos.toByteArray());
            }
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return json;
    }
}

第一个Fragment的代码
public class Fragment_One extends Fragment implements  XListView.IXListViewListener {
    ViewPager vp_one;  //用于实现轮播
    XListView xlv;   //XlistView用于实现上拉刷新下拉加载 (记得导第三方架包)
    bean bn;  //bean包
    Util ut;  //用于请求网路数据进行加载XlsitView和ViewPage
    List<ImageView> list; //这个集合用于存放XlistView的图片
    private LinearLayout linearLayout;  //这是一个用于实现小圆点的布局
    int NUM = 1;//用于上拉刷新 下拉加载
    MyPageApdata myPagerApdata; //轮播图的适配器
     MyApdata myApdata; //XlistView的适配器
    List<bean.DataBean.ComicsBean> results;
    boolean boo;  //布尔值  用于上拉刷新和下拉加载
    //这个是用于存放小圆点的集合
    private List<ImageView> imagesList;
    //Handler机制用于实现无限轮播
    private Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            //获取当前条目
            int index = vp_one.getCurrentItem();
            //向右轮播
            vp_one.setCurrentItem(index+=1);
            //间隔3秒
            handler.sendEmptyMessageDelayed(3,3000);
        }
    };
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        View view = View.inflate(getActivity(), R.layout.fragment_one, null);//加载布局
        vp_one = view.findViewById(R.id.vp_one); //这是ViewPage的控件
        xlv = view.findViewById(R.id.xlv);  //这是XlsitView的控件
        linearLayout = view.findViewById(R.id.linear_layout);//这是小圆点的控件
        //使xlistview支持下拉刷新和上拉加载
        xlv.setPullRefreshEnable(true); //设置是否可以下拉刷新
        xlv.setPullLoadEnable(true);   //设置是否可以上拉加载
        xlv.setXListViewListener(this);  //xlistView上拉加载,下拉刷新
        getBeanByGson();//轮播图的解析
        ListGson();  //XListView的解析
        //viewPager页面改变的监听事件
       vp_one.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
           @Override
           public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
          }
           @Override
           public void onPageSelected(int position) {
               //如果选中了这一页,,,当前小圆点红色,,,否则绿色
            for (int i = 0;i<imagesList.size();i++){
                 if (i== position%imagesList.size()){
                      imagesList.get(i).setImageResource(R.drawable.doc_select);
                  }else {
                      imagesList.get(i).setImageResource(R.drawable.doc_select_no);
                  }
              }
        }
           @Override
            public void onPageScrollStateChanged(int state) {
           }
      });
        return view;
    }
    //轮播图的解析
    public void getBeanByGson() {
        // 使用该方法得到了一个 Json的字符输入流
        new AsyncTask<String, String, String>() {
            @Override
            protected String doInBackground(String... strings) {
                String reader = Util.getNetDataStr();
                return reader;
            }
            @Override
            protected void onPostExecute(String s) {
                super.onPostExecute(s);
                // 使用Gson把该字符输入流转换成JavaBean
                Gson gson = new Gson();
                bn = gson.fromJson(s, bean.class);
                list = new ArrayList<ImageView>();
                //循环遍历图片添加道集合
                for (int i = 0; i < bn.getData().getComics().size(); i++) {
                    ImageView imageView = new ImageView(getActivity());
                    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                    ImageLoader.getInstance().displayImage(bn.getData().getComics().get(i).getCover_image_url(), imageView);
                    list.add(imageView);
                }

                //初始化小圆点
                initDoc();
                myPagerApdata = new MyPageApdata(list);//初始化适配器
                vp_one.setAdapter(myPagerApdata);//绑定适配器
                handler.sendEmptyMessageDelayed(3, 3000);//handler进行图片的轮播速度的设置发送
            }
        }.execute();
    }
    //XListView的解析
    public void ListGson() {
        new AsyncTask<String, String, String>() {
            @Override
            protected String doInBackground(String... strings) {
                String read = ut.getNetDataStr();  //调用网络请求的数据包
                return read;  //返回所求到的数据
            }
            @Override
            protected void onPostExecute(String result) {
                super.onPostExecute(result);
                Gson gson = new Gson();//使用Gson解析
                bn = gson.fromJson(result, bean.class);  //接收传过来的数据
                results = bn.getData().getComics();
                setAdapter(results); //绑定适配器
                Date date = new Date(System.currentTimeMillis());//设置时间
                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("HH:mm");
               String time = simpleDateFormat.format(date);
               xlv.setRefreshTime(time); //XlistView刷新的时候加载时间
            }
        }.execute();

    }
    //进行适配器的判断
    public void setAdapter(List<bean.DataBean.ComicsBean> list){
        //如果适配器是空的就行 适配器的绑定 发送
        if(myApdata == null){
            myApdata = new MyApdata(results, getActivity());
            xlv.setAdapter(myApdata);
        }else{
            //相反如果不是空的 把数据添加到适配器中 调代用解析的数据进行刷新适配器
            myApdata.add(list,boo);
            ListGson();
            myApdata.notifyDataSetChanged();
        }
    }
    //下拉加载
    @Override
    public void onRefresh() {
        NUM++;
        boo = true;
        ListGson();
        xlv.stopRefresh();
    }
    //上拉刷新
    @Override
    public void onLoadMore() {
        NUM++;
        boo = false;
        ListGson();
        xlv.stopLoadMore();
    }
    /**
     * 初始化小圆点
     */
  private void initDoc() {
        //首先需要一个集合记录这些小圆点的图片,,,,当页面切换的时候,可以从集合中取出imageView进行显示图片的设置
       imagesList = new ArrayList<>();
      linearLayout.removeAllViews();//清空/移除所有的view
      for (int i = 0;i<list.size();i++){
            ImageView imageView = new ImageView(getActivity());
            if (i==0){//显示第一页,,,红的
               imageView.setImageResource(R.drawable.doc_select);
            }else {//绿的
               imageView.setImageResource(R.drawable.doc_select_no);
           }
           //添加到集合
           imagesList.add(imageView);
           //加入到线性布局中显示
           LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(5,0,5,0);
            linearLayout.addView(imageView,params);  //把小圆点添加到线性集合中
        }
   }
}

第一个Fragment的布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
   <android.support.v4.view.ViewPager
       android:id="@+id/vp_one"
       android:layout_width="wrap_content"
       android:layout_height="200dp">
   </android.support.v4.view.ViewPager>
   <com.example.day9_12.xlistview.XListView
       android:id="@+id/xlv"
       android:layout_below="@+id/vp_one"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   </com.example.day9_12.xlistview.XListView>
   <LinearLayout
       android:id="@+id/linear_layout"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignBottom="@+id/vp_one"
       android:layout_centerHorizontal="true"
       android:layout_marginBottom="20dp"
       android:orientation="horizontal">
   </LinearLayout>

</RelativeLayout>
XlistView多条目加载适配器

public class MyApdata extends BaseAdapter {
    //构造参数
    private List<bean.DataBean.ComicsBean> list;
    //创建上下文
    private Context context;

    public MyApdata(List<bean.DataBean.ComicsBean> list, Context context) {
        this.list = list;
        this.context = context;
    }

    public void add(List<bean.DataBean.ComicsBean> data, boolean b) {
        for (bean.DataBean.ComicsBean bean : data) {
            if (b) {
                list.add(0, bean);
            } else {
                list.add(bean);
            }
        }
    }

    //有几个条目类型
    @Override
    public int getViewTypeCount() {
        return 2;
    }

    //判断怎样分辨每个条目的位置
    @Override
    public int getItemViewType(int position) {
        if (position % 2 == 0) {
            return 0;
        } else {
            return 1;
        }
    }

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

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder holder = null;
        ViewHolder2 holder2 = null;
        int type = getItemViewType(i);
        //进行多条目的判断
        switch (type) {
            //如果为0,则是第一种布局
            case 0:
                if (view == null) {
                    view = View.inflate(context, R.layout.itme_one, null);
                    holder = new ViewHolder();
                    holder.iv = (ImageView) view.findViewById(R.id.iv);
                    holder.tv1 = (TextView) view.findViewById(R.id.tv1);
                    view.setTag(holder);
                } else {
                    holder = (ViewHolder) view.getTag();
                }
                holder.tv1.setText(list.get(i).getTitle());
                ImageLoader.getInstance().displayImage(list.get(i).getCover_image_url(), holder.iv);
                break;
            //如果为1,则是第二种布局
            case 1:
                if (view == null) {
                    view = View.inflate(context, R.layout.itme_two, null);
                    holder2 = new ViewHolder2();
                    holder2.tv2 = (TextView) view.findViewById(R.id.tv2);
                    view.setTag(holder2);
                } else {
                    holder2 = (ViewHolder2) view.getTag();
                }
                holder2.tv2.setText(list.get(i).getTitle());
                break;
        }
        DisplayImageOptions build = new DisplayImageOptions.Builder()
                .cacheInMemory(true)
                .cacheOnDisk(true)
                .showImageForEmptyUri(R.mipmap.ic_launcher)
                .showImageOnFail(R.mipmap.ic_launcher)
                .showImageOnLoading(R.mipmap.ic_launcher)
                .build();
        return view;
    }

    //优化XlistView
    class ViewHolder {
        ImageView iv;
        TextView tv1;
    }

    class ViewHolder2 {
        TextView tv2;
    }
}

轮播图的适配器

public class MyPageApdata extends PagerAdapter {
    List<ImageView> list = new ArrayList<>();

    public MyPageApdata(List<ImageView> list) {
        this.list = list;
    }
    @Override
    public int getCount() {
        return Integer.MAX_VALUE;//Integer.MAX_VALUE可实现无限轮播
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;//固定的
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(list.get(position % list.size()));
        return list.get(position % list.size());
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
}
温馨提示:记得加联网权限,ImageLode的清单文件和架包,XlistView的第三方架包,谢谢观看







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 JavaScript 实现轮播图的示例代码,包括小圆点、标题和色块: HTML 代码: ```html <div class="slider"> <ul class="slides"> <li class="slide active"> <img src="slide1.jpg" alt="Slide 1" /> <div class="content"> <h2>Title 1</h2> <p>Description 1</p> </div> </li> <li class="slide"> <img src="slide2.jpg" alt="Slide 2" /> <div class="content"> <h2>Title 2</h2> <p>Description 2</p> </div> </li> <li class="slide"> <img src="slide3.jpg" alt="Slide 3" /> <div class="content"> <h2>Title 3</h2> <p>Description 3</p> </div> </li> </ul> <div class="dots"></div> </div> ``` CSS 代码: ```css .slider { position: relative; } .slides { list-style: none; margin: 0; padding: 0; } .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } .slide.active { opacity: 1; } .content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; } .content h2 { margin: 0; font-size: 24px; } .content p { margin: 0; font-size: 16px; } .dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .dot { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .dot.active { background-color: #fff; } ``` JavaScript 代码: ```js const slides = document.querySelectorAll('.slide'); const dots = document.querySelector('.dots'); let currentSlide = 0; let interval = setInterval(nextSlide, 5000); function nextSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); updateDots(); } function updateDots() { dots.innerHTML = ''; for (let i = 0; i < slides.length; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); if (i === currentSlide) { dot.classList.add('active'); } dot.addEventListener('click', () => { slides[currentSlide].classList.remove('active'); currentSlide = i; slides[currentSlide].classList.add('active'); updateDots(); clearInterval(interval); interval = setInterval(nextSlide, 5000); }); dots.appendChild(dot); } } updateDots(); ``` 这段代码实现了一个自动轮播的效果,每 5 秒钟自动切换到下一张图片,并且在图片下方添加了小圆点和标题、色块等内容。当用户点击小圆点时,会切换到对应的图片,并且停止自动轮播,等待 5 秒钟后重新开始自动轮播。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值