AndroidStudio 中用fragment+ViewPager+LinearLayout 实现图片轮播效果

图片轮播效果

要模仿某宝等APP的效果将图片轮播运用到自己的APP上，只需要在用Android Studio开发时在布局文件和Java类文件中添加两份代码即可，转自CSDN原博：

https://blog.csdn.net/qq_36789366/article/details/60598623

代码出处：

http://www.cnblogs.com/yoyohong/p/5688913.html

一、首先是布局，需要在/res/layout/目录下新建一个xml布局文件，作为图片轮播效果的显示文件

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

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

——此处例子是用相对布局和线性布局嵌套使用，轮播五张图片

这里dot_no和dot_yes就是图片中的暗小点和亮小点，百度就可以得到小圆点的图片——我是在iconfont阿里巴巴矢量图标库中找到圆点图标，修改颜色即可；顺便把需要进行轮播的图片也准备好，全部复制到drawable文件夹（注意：图片命名千万不能有中文字和大写字母）

二、之后是对fragment进行设置，新建一个fragment，在里面完成所有的轮播代码的实现

package com***************；
import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
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.TextView;
import com.example.R;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
* Created by Administrator on 2019/3/5.
*/

public class HomeFragment extends Fragment {
	private View mView;
	private ViewPager mViewPaper;
	private List<ImageView> images;
	private List<View> dots;
	private int currentItem;
	//记录上一次点的位置
	private int oldPosition = 0;
	//存放图片的id，可以根据自己的需求进行修改
	private int[] imageIds = new int[]{
		R.drawable.home_bg1,
		R.drawable.home_bg2,
		R.drawable.home_bg3,
		R.drawable.home_bg4,
		R.drawable.home_bg5
	};
	//存放图片的标题
	private String[] titles = new String[]{
		"轮播1",
		"轮播2",
		"轮播3",
		"轮播4",
		"轮播5"
	};
	private TextView title;
	private ViewPagerAdapter adapter;
	private ScheduledExecutorService scheduledExecutorService;
	
	@Nullable
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		mView=inflater.inflate(R.layout.fragment_home_layout, null);
		setView();
		return mView;
	}
	private void setView(){
		mViewPaper = (ViewPager)mView.findViewById(R.id.vp);
		//显示的图片
		images = new ArrayList<ImageView>();
		for(int i = 0; i < imageIds.length; i++){
		ImageView imageView = new ImageView(getActivity());
		imageView.setBackgroundResource(imageIds[i]);
		images.add(imageView);
	}
	//显示的小点
	dots = new ArrayList<View>();
	dots.add(mView.findViewById(R.id.dot_0));
	dots.add(mView.findViewById(R.id.dot_1));
	dots.add(mView.findViewById(R.id.dot_2));
	dots.add(mView.findViewById(R.id.dot_3));
	dots.add(mView.findViewById(R.id.dot_4));
	
	title = (TextView) mView.findViewById(R.id.title);
	title.setText(titles[0]);
	adapter = new ViewPagerAdapter();
	
	mViewPaper.setAdapter(adapter);
	mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
		@Override
		public void onPageSelected(int position) {
			title.setText(titles[position]);
			dots.get(position).setBackgroundResource(R.drawable.dot_yes);
			dots.get(oldPosition).setBackgroundResource(R.drawable.dot_no);
			oldPosition = position;
			currentItem = position;
		}
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		
		}
		@Override
		public void onPageScrollStateChanged(int arg0) {
		
		}
	});
}
/*定义的适配器*/
public class ViewPagerAdapter 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) {
// TODO Auto-generated method stub
//          super.destroyItem(container, position, object);
//          view.removeView(view.getChildAt(position));
//          view.removeViewAt(position);
			view.removeView(images.get(position));
	}
	@Override
	public Object instantiateItem(ViewGroup view, int position) {
// TODO Auto-generated method stub
		view.addView(images.get(position));
		return images.get(position);
	}
}
	
/**
   * 利用线程池定时执行动画轮播
	*/
	
@Override
public void onStart() {
// TODO Auto-generated method stub
super.onStart();
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleWithFixedDelay(
new ViewPageTask(),
2,
2,
TimeUnit.SECONDS);
}
//此处可以修改数字，改变轮播定时时间

/**
    * 图片轮播任务
    * @author liuyazhuang
    *  
    *  /
	
private class ViewPageTask implements Runnable{
	@Override
	public void run() {
		currentItem = (currentItem + 1) % imageIds.length;
		mHandler.sendEmptyMessage(0);
	}
}

/**
  * 接收子线程传递过来的数据
 */
	
private Handler mHandler = new Handler(){
	public void handleMessage(android.os.Message msg) {
		mViewPaper.setCurrentItem(currentItem);
	};
};
	@Override
	public void onStop() {
	// TODO Auto-generated method stub
		super.onStop();
		if(scheduledExecutorService != null){
		scheduledExecutorService.shutdown();
		scheduledExecutorService = null;
		}
	}
}

直接搬代码的话肯定会出错
先把各个图片资源文件的名字改过来还有导包
修改完以后一定要进行重新编译项目

Build-->Rebuild Project

防止Android Studio自己识别不了然后出现错误

效果图=_=

假装很好看的样子…

今日份的AS项目练习结束
奶思！