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

效果图:



这种效果的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

希望能帮助到大家。

猜你喜欢

转载自blog.csdn.net/qq_32209983/article/details/79959674