Sample code of Android home page unlimited carousel function
- 2021-09-12 02:19:08
- OfStack
Recently, I am not very busy at work. I also learn from the Great God and summarize some small technical points:
For an App, almost all of them have Banner advertising function, which is our common carousel. Of course, the third-party framework in the market is very mature at present, especially youth5201314/banner. There is an github address here, which can also be learned: https://github.com/youth5201314/banner.git
Then let's introduce my summary:
Firstly, the design of the next carousel map is analyzed
Timing effect of multiple carousel pictures Indicate the point and text description of each picture Realize unlimited carousel, sliding and picture click events
Start the layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yangziling.carousel.MainActivity">
<!-- Carousel chart -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- Indicate points and picture titles -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dip"
android:layout_gravity="bottom"
android:background="#33000000"
android:gravity="center"
android:orientation="vertical">
<!-- Picture with text -->
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Picture title "
android:textColor="@android:color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dip"
android:orientation="horizontal" >
<!-- Indicating point -->
<View
android:id="@+id/dot_0"
style="@style/view_attr"
android:background="@drawable/dot_focused"/>
<View
android:id="@+id/dot_1"
style="@style/view_attr"
android:background="@drawable/dot_normal"/>
<View
android:id="@+id/dot_2"
style="@style/view_attr"
android:background="@drawable/dot_normal"/>
<View
android:id="@+id/dot_3"
style="@style/view_attr"
android:background="@drawable/dot_normal"/>
<View
android:id="@+id/dot_4"
style="@style/view_attr"
android:background="@drawable/dot_normal"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</RelativeLayout>
view attributes extracted from the layout:
<style name="view_attr">
<item name="android:layout_width">5dp</item>
<item name="android:layout_height">5dp</item>
<item name="android:layout_marginLeft">5dp</item>
<item name="android:layout_marginRight">5dp</item>
</style>
Here I show some of the pictures are in the local, through the network frame loading picture principle is also a kind of.
Here, I will post the core code directly to you:
public class MainActivity extends AppCompatActivity {
private ViewPager mMyViewPaper;
private List<ImageView> images;
private List<View> dots;
private int currentItem;
private TextView title;
private MyAdapter adapter;
// Where the picture is currently displayed
private int localPosition = 0;
// Pictorial id
private int[] imageIds =
new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
// The title of the picture
private String[] titles =
new String[]{" Blue sky and white clouds ", " Green mountains and green waters ", " Dry vine and old tree ", " Wonderland on Earth ", " Island tree "};
private TimerTask mTimerTask;
// Create 1 Timer
private final Timer timer = new Timer();
private ImageView mImageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mMyViewPaper = (ViewPager) findViewById(R.id.vp);
// Picture displayed
images = new ArrayList<>();
for (int i = 0; i < imageIds.length; i++) {
mImageView = new ImageView(this);
mImageView.setBackgroundResource(imageIds[i]);
images.add(mImageView);
}
// Indicating point
dots = new ArrayList<>();
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]);
adapter = new MyAdapter(MainActivity.this, images);
mMyViewPaper.setAdapter(adapter);
mMyViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
position = position % images.size();
title.setText(titles[position]);
dots.get(position).setBackgroundResource(R.drawable.dot_focused);
dots.get(localPosition).setBackgroundResource(R.drawable.dot_normal);
localPosition = position;
currentItem = position;
}
/**
* Callback when page slides
*/
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
/**
* When ViewPager Callback when the state changes
*/
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* Carousel mission
*/
@Override
protected void onStart() {
super.onStart();
mTimerTask = new TimerTask() {
@Override
public void run() {
currentItem = (currentItem + 1) % imageIds.length;
mHandler.sendEmptyMessage(0);
}
};
timer.schedule(mTimerTask, 2000, 2000);
}
/**
* Receive data passed by child threads
*/
private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
// Carousel to the end 1 When you have a picture, jump directly to the 1 Page and cancel the sliding effect
if (currentItem % images.size() == 0) {
mMyViewPaper.setCurrentItem(currentItem, false);
}
// Non-final 1 Zhang shows the sliding effect of the picture
mMyViewPaper.setCurrentItem(currentItem, true);
}
};
@Override
protected void onStop() {
super.onStop();
timer.cancel();
}
}
Customized 1 Adapter adapter:
public class MyAdapter extends PagerAdapter {
private List<ImageView> images;
private Context mContext;
public MyAdapter(Context context,List<ImageView> images) {
this.mContext =context;
this.images = images;
}
// Return Viewpager In view Number
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
// Judge instantiateItem Object returned by the function in key And 1 Does the page diagram represent the same 1 A
// Usually directly equal to OK La
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
// Remove 1 Pages in fixed position
@Override
public void destroyItem(ViewGroup view, int position, Object object) {
view.removeView((View) object);
}
// Will the fixed position of the View Add to Viewgroup And create a display
@Override
public Object instantiateItem(ViewGroup view, final int position) {
ImageView imageView = images.get(position % images.size());
ViewGroup parent = (ViewGroup) imageView.getParent();
// Here is the dynamic addition diagram, 1 Subclasses can only have 1 Parent class
// Judge if parent Existence 1 Remember to remove
if (parent != null) {
parent.removeView(imageView);
}
view.addView(imageView);
// Add click events to pictures
imageView.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Toast.makeText(mContext," Click on the number "+(position % images.size()+1)+" Picture ",Toast.LENGTH_SHORT).show();
}
});
return images.get(position % images.size());
}
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}
I also encountered some problems and made some "compromises". For example, when I played the last one, I found that I would return to the first one to broadcast again, but I would feel stuck. Therefore, I made a "compromise treatment", that is, when playing to the last one, I canceled my own animation effect, jumped directly to the first one, and then carried out carousel.
private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
// Carousel to the end 1 When you have a picture, jump directly to the 1 Page and cancel the sliding effect
if (currentItem % images.size() == 0) {
mMyViewPaper.setCurrentItem(currentItem, false);
}
// Non-final 1 Zhang shows the sliding effect of the picture
mMyViewPaper.setCurrentItem(currentItem, true);
}
};
github address of the project: https://github.com/yangziling/Carousel.git