Picture carousel is one of the functions we use more often. I have written similar articles before, but to be honest, it is not particularly convenient to write by myself, and there are often many bugs. On github, there are some great gods who have written viewpager's carousel framework and it is open source for everyone to learn and reference. This blog will teach you how to simply use the open source framework RollViewPager.
If you are interested in RollViewPager, or want to learn more, you can go directly to github to download the source code to learn: https://github.com/Jude95/RollViewPager
Some of the main supported functions:
1. Unlimited automatic rotation of pictures
2. The playback will be paused when touched, and will continue to play after a delay period of touch is over
3. Only it can be ordinary dots, numbers and custom pictures, and can be changed for occupations
4. Implement the click event
The main operation process:
1. Import the package in gradle (see the documentation on github for the latest version, use 1.2.9 here):
compile 'com.jude:rollviewpager:1.2.9'
The effect is as shown in the figure:
2. Set the playback time interval, transparency, indicator (the indicator can be the default origin, numbers, or custom pictures)
3. Set the adapter. This demo is StaticPagerAdapter. This is relatively simple and used more. If you have other needs, you can see the github source code.
Mainly need to set the picture, the number of pictures and so on.
Write the layout file activity_main.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=".MainActivity">
<com.jude.rollviewpager.RollPagerView
android:id="@+id/roll_view_pager"
android:layout_width="match_parent"
android:layout_height="180dp"
app:rollviewpager_play_delay="3000"/>
</RelativeLayout>
Import local image resources:
MainActivity:
package com.example.double2.rollviewpagertest;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.jude.rollviewpager.RollPagerView;
import com.jude.rollviewpager.adapter.StaticPagerAdapter;
import com.jude.rollviewpager.hintview.ColorPointHintView;
public class MainActivity extends AppCompatActivity {
private RollPagerView mRollViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView(R.layout.activity_main);
mRollViewPager = (RollPagerView) findViewById(R.id.roll_view_pager);
//Set the playback time interval
mRollViewPager.setPlayDelay(1000);
//set transparency
mRollViewPager.setAnimationDurtion (500);
//set the adapter
mRollViewPager.setAdapter(new TestNormalAdapter());
//Set the indicator (sequentially)
//custom indicator image
//Set the dot indicator color
//set text indicator
// hide the indicator
//mRollViewPager.setHintView(new IconHintView(this, R.drawable.point_focus, R.drawable.point_normal));
mRollViewPager.setHintView(new ColorPointHintView(this, Color.YELLOW,Color.WHITE));
//mRollViewPager.setHintView(new TextHintView(this));
//mRollViewPager.setHintView(null);
}
private class TestNormalAdapter extends StaticPagerAdapter {
private int[] imgs = {
R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
};
@Override
public View getView(ViewGroup container, int position) {
ImageView view = new ImageView(container.getContext());
view.setImageResource(imgs[position]);
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
view.setTag(position);
view.setOnClickListener(new View.OnClickListener() { // click event
@Override
public void onClick(View v) {
Toast.makeText(getActivity(), "clicked the first" + v.getTag() + "picture", Toast.LENGTH_SHORT).show();
}
});
return view;
}
@Override
public int getCount() {
return imgs.length;
}
}
}
Load network image resources (the adapter uses LoopPagerAdapter):
package edu.neu.steve.rollviewpagerdemo;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;
import com.jude.rollviewpager.RollPagerView;
import com.jude.rollviewpager.adapter.LoopPagerAdapter;
import com.jude.rollviewpager.hintview.ColorPointHintView;
public class MainActivity extends AppCompatActivity
{
private RollPagerView mRollViewPager;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate (savedInstanceState);
setContentView(R.layout.activity_main);
mRollViewPager = (RollPagerView) findViewById(R.id.roll_view_pager);
mRollViewPager.setAnimationDurtion(500); //Set the switching time
mRollViewPager.setAdapter(new TestLoopAdapter(mRollViewPager)); //Set the adapter
mRollViewPager.setHintView(new ColorPointHintView(this, Color.WHITE, Color.GRAY));// Set the dot indicator color
// mRollViewPager.setHintView(new IconHintView(this, R.drawable.point_focus, R.drawable.point_normal));
}
private class TestLoopAdapter extends LoopPagerAdapter
{
private int[] imgs = {R.drawable.img0, R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4,}; // 本地图片
private int count = imgs.length; // the number of pictures on the banner
public TestLoopAdapter(RollPagerView viewPager)
{
super(viewPager);
}
@Override
public View getView(ViewGroup container, int position)
{
final int picNo = position + 1;
ImageView view = new ImageView(container.getContext());
view.setImageResource(imgs[position]);
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
view.setOnClickListener(new View.OnClickListener() // click event
{
@Override
public void onClick(View v)
{
Toast.makeText(MainActivity.this, "Clicked" + picNo + "Picture", Toast.LENGTH_SHORT).show();
}
});
return view;
}
@Override
public int getRealCount()
{
return count;
}
}
}
Usually the content of the banner in our APP is obtained from the server. When the Activity is created (in the onCreate method), the client sends a GET request to the server to get the URL of the banner image. When the client gets the banner image URL returned by the server, it notifies the banner to update the image (it must be done in strict order)
mRollViewPager.setAdapter(new TestLoopAdapter(mRollViewPager)); // Set the adapter (request network pictures, the adapter should be set after the network request is completed) mRollViewPager.getViewPager().getAdapter().notifyDataSetChanged();//Update the banner image
Then load the network image in the getView method of the custom adapter TestLoopAdapter. Using Picasso here, one line of code is done!
Picasso.with(mContext).load(bannerPictureURLs.get(position)).into(view); // Load network image
The function of loading network pictures in the carousel can be completed by the above code and network requests. It is recommended to use OkHttp for network requests, which will not be repeated here.