带指示点显示三个子界面的viewpager轮播效果

原创 2018年04月16日 14:05:18

效果图:



这种效果的viewpager在项目中用的还是比较多的,话不多说,直接上代码。

xml布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:layout_height="match_parent"
    tools:context="com.sinosoft.mysupperapp.activity.BannerActivity">

    <FrameLayout
        android:id="@+id/fl_pager"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:clipChildren="false"
        android:background="#aadc71ff"
        >
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_marginLeft="60dp"
            android:layout_marginRight="60dp"
            android:clipChildren="false"
            android:layout_height="120dp"
            android:layout_gravity="center"
            >
        </android.support.v4.view.ViewPager>
    </FrameLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/fl_pager"
        android:background="#44000000"
        android:padding="5dp"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv_title"
            android:padding="3dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="精武门"
            android:textColor="#fff"
            android:gravity="center"/>
        <LinearLayout
            android:id="@+id/ll_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal">
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

MainAtivity:

package com.sinosoft.mysupperapp.activity;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.sinosoft.mysupperapp.R;

import butterknife.Bind;
import butterknife.ButterKnife;

public class BannerActivity extends Activity {

    private int[] images = {R.mipmap.title_01,R.mipmap.title_02,R.mipmap.title_03,R.mipmap.title_04};
    private String[] title = {"精武门","黄飞鸿","霍元甲","陈真"};
    private int pre_position = 0;
    @Bind(R.id.viewpager)
    ViewPager viewPager;
    @Bind(R.id.tv_title)
    TextView tv_title;
    @Bind(R.id.ll_point)
    LinearLayout ll_point;
    Handler handler;
    boolean isrunning = true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner);
        ButterKnife.bind(this);
        for(int i=0;i<images.length;i++){
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
            if(i==0){
                point.setEnabled(true);
            }else{
                point.setEnabled(false);
                params.leftMargin = 8;
            }
            point.setLayoutParams(params);
            ll_point.addView(point);
        }
        //设置Page间间距
        viewPager.setPageMargin(20);
        //设置缓存的页面数量
        viewPager.setOffscreenPageLimit(3);
        viewPager.setAdapter(new MyViewPager(images));
        tv_title.setText(title[0]);

        handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                if(msg.what==0){
                    //让ViewPager滑到下一页
                    viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
                    //延时,循环调用handler
                    if(isrunning){
                        handler.sendEmptyMessageDelayed(0, 3000);
                    }
                };
            }
        };

        new Thread(){
            public void run() {
                Message message = Message.obtain();
                message.what=0;
                handler.sendMessage(message);
            };
        }.start();

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                tv_title.setText(title[position%images.length]);
                //把上一个点设置为灰色
                ll_point.getChildAt(pre_position).setEnabled(false);
                //把当前点设置为红色
                ll_point.getChildAt(position%images.length).setEnabled(true);
                pre_position = position%images.length;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    class MyViewPager extends PagerAdapter{

        int[] data;
        public MyViewPager(int[] data){
            this.data = data;
        }
        @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) {

            ImageView imageView = new ImageView(BannerActivity.this);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//ͼƬ-ʬ
            int img = data[position % data.length];
            imageView.setImageResource(img);
            container.addView(imageView,0);
            return imageView;
        }

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

    @Override
    protected void onDestroy() {
        super.onDestroy();
        isrunning = false;
    }
}

drawable文件:

point_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/point_normal" />
    <item android:state_enabled="true" android:drawable="@drawable/point_press"></item>

</selector>

point_normal:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
          <size android:width="8dp"
           android:height="8dp"/>
            <solid android:color="#44000000"/>
</shape>

point_press:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="8dp"
        android:height="8dp"/>
    <solid android:color="#ff0000"/>

</shape>

好了,大功告成。最后部分代码来自洪洋大神的微博:https://blog.csdn.net/lmj623565791/article/details/51339751

希望能帮助到大家。

APP主界面Tab的4种实现

涉及知识点:1.在LinearLayout中,如果一个控件在中间,要想让该控件占据剩余的空间,使用match_parent会导致它底部的控件被挤出去,所以要使用layout_weight=1 heig...
  • u010542146
  • u010542146
  • 2016-03-04 09:47:45
  • 1575

ViewPager实现图片轮播,下方带小点显示当前位置

先来张效果图 还是从布局文件开始说,使用到的布局文件就一个content_main.xml,因为小点图片是覆盖在大图片的上面的,所以这里要用Framelayout,包含了两个linearLayout,...
  • qq_33224517
  • qq_33224517
  • 2016-06-07 11:52:54
  • 1377

一个案例教你简单地玩转ViewPager(三)之带指示点的图片自动轮播效果

前言这周因为工作上的问题,搞到都没时间写博客了。之前自己对于很多公司上的招聘要求的工作经验都还没什么大概印象,现在倒是明白了。一个困扰自己几天的问题,问了一下有多年经验的人,一下子就能给你提供到突破点...
  • ppyyzz628
  • ppyyzz628
  • 2016-09-08 16:08:19
  • 837

Android使用ViewPager实现带指示点的页面导航效果

老样子,先上效果图: 参考博客:Android App 第一次打开时的引导界面 先上布局文件:其中activity_main.xml文件并没有什么作用。 activity_main.xm...
  • mate_ge
  • mate_ge
  • 2017-01-12 18:09:27
  • 945

viewpager实现图片自动轮播,带小点标明当前位置

  • 2016年06月07日 12:10
  • 12.91MB
  • 下载

安卓:ViewPager及带指示圆点的

打开应用程序看到的滑动页面:滑动时无小圆点 1.在布局文件中加入ViewPager控件: 2.逻辑代码中: findViewById 找到控件:android.support.v4.view.V...
  • my_worldlet
  • my_worldlet
  • 2015-09-24 09:45:24
  • 1581

ViewPager 轮播图,添加指示点

重要的地方都加了注释,public class MyViewpagerFragment extends Activity { private ViewPager mViewPager; ...
  • qq_31060955
  • qq_31060955
  • 2016-03-29 23:00:01
  • 342

ViewPager加载网络图片+自动轮播+小圆点指示

handler接收消息更新pager页Handler handler = new Handler() { public void handleMessage(android.os.Me...
  • qq_35658238
  • qq_35658238
  • 2016-09-22 21:52:40
  • 1592

带指示器的ViewPager循环翻页的实现

这是之前实习的时候要求实现的一个功能,用来支持Banner循环轮播。今天来总结一下,希望也能给需要的初学者带来帮助 普通的Viewpager是这样的:左滑到第一页,不能继续左滑了,右滑到最后一页,不...
  • u014137988
  • u014137988
  • 2016-08-03 11:59:48
  • 989

Android循环轮播ViewPager

  • 2017年09月28日 13:06
  • 28.28MB
  • 下载
收藏助手
不良信息举报
您举报文章:带指示点显示三个子界面的viewpager轮播效果
举报原因:
原因补充:

(最多只允许输入30个字)