类似焦点图的滚动图片形式

最新推荐文章于 2023-06-25 20:51:27 发布

yufengvac

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量509

点赞数

分类专栏： Android 文章标签：动画 viewpager

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

偶尔在网上找到的一个类似普通网页的焦点图滚动形式的banner，觉得很不错，下下来自己琢磨了一下，实现方式非常简单

布局main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="#ffffff">

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="200dip"
         >
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:layout_gravity="bottom|center_horizontal"
        android:gravity="center"
        android:background="#33000000"
        android:orientation="vertical"
        >
        
        <TextView 
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white"
                android:text="图片标题"
                />
        <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>
</LinearLayout>

其中有关于dot_0的background布局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="#55000000" />

</shape>

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="#aaFFFFFF" />

</shape>

主要的ViewPagerActivity.java

package com.itheima.viewpager;

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

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.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class ViewPagerActivity extends Activity {
	
	
    private int[] imageIDs;
    private String[] titles;
    private ArrayList<ImageView> images;
    private ArrayList<View> dots;
	private TextView title;
	private ViewPager viewPager;
	private MyAdapter madapter;
    
	private int currrentItem = 0; //记录当前显示页面的位置
	
	private ScheduledExecutorService scheduledExecutorService;
	
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        imageIDs = new int[] {
        		R.drawable.focusone,
        		R.drawable.focustwo,
        		R.drawable.focusthree,
        		R.drawable.focusfour,
        		R.drawable.focusfive
        		};
        titles = new String[]{
        		"五谷丰登",
        		"精品皇家营养套餐",
        		"健康早餐",
        		"西门小吃店开门",
        		"好营养快餐"
        };
        
        //用来显示的图片
        images = new ArrayList<ImageView>();
        for(int i = 0; i < imageIDs.length; i++){
        	ImageView imageView = new ImageView(getApplicationContext());
        	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]);
        
        viewPager = (ViewPager) findViewById(R.id.vp);
        madapter = new MyAdapter();
        viewPager.setAdapter(madapter);
        
        //设置页面切换的监听事件
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			int oldPosition = 0; 
        	
			@Override //1-->2当前显示界面切换成功后，调用的方法
			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;
				
				currrentItem = position;
			}
			
			@Override
			public void onPageScrolled(int position, float arg1, int arg2) {
				
			}
			
			@Override 
			public void onPageScrollStateChanged(int position) {
				
			}
		});
       
    }
	
    
	class MyAdapter 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) {
			//从viewpager里移除childview
			view.removeView(images.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup view, int position) {
			//在viewpager里添加childview
			view.addView(images.get(position));
			return images.get(position);
		}
	}
	@Override
	protected void onStart() {
		super.onStart();
		//创建定时器
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		//首次启动时5秒后开始执行，接下来5秒执行一次
		scheduledExecutorService.scheduleAtFixedRate(new ViewpagerTask(),5, 2, TimeUnit.SECONDS);
		
	}
	
	@Override
	protected void onStop() {
		super.onStop();
		scheduledExecutorService.shutdown();//停止线程任务
	}
	class ViewpagerTask implements Runnable{

		@Override
		public void run() {
			currrentItem = (currrentItem + 1)%imageIDs.length;
			handler.sendEmptyMessage(0);
		}
	}
	private Handler handler = new Handler(){
		
		public void handleMessage(Message msg) {
			//根据viewpager里图片的  角标设置当前要显示的图片
			viewPager.setCurrentItem(currrentItem);
		}
		
	};
	
	
}