android Common Manual and Automatic Carousel Effects

In this paper, we share the specific codes of android manual and automatic carousel effect for your reference. The specific contents are as follows

1. Prepare the required carousel pictures and picture titles (initialization and declaration).

/** Carousel picture */
  private int[] imageIds=new int[]{
      R.drawable.ic_launcher,
      R.drawable.simple_player_control_focused_holo,
      R.drawable.dot_player1_1,
      R.drawable.jt5,
  };
  /** The title of the carousel picture */
  private String[] titles=new String[]{
      " I am 1",
      " I am 2",
      " I am 3",
      " I am 4",
  };

2. Add the following layout to the layout you want to carousel (equivalent to adding 1 control to see where you want to put it).

 <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="200dip" >
 
    <android.support.v4.view.ViewPager
      android:id="@+id/viewPager"
      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=" 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" >
 
        <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"/>
 
 
      </LinearLayout>
    </LinearLayout>
</FrameLayout>

3. Set the picture and title inside the control.

 /** Picture displayed */
    images = new ArrayList<ImageView>();
    for(int i=0;i<imageIds.length;i++){
      ImageView imageView = new ImageView(getActivity());
      imageView.setBackgroundResource(imageIds[i]);
      images.add(imageView);
    }
 
    /* Displayed dots  */
    dots = new ArrayList<View>();
    dots.add(view.findViewById(R.id.dot_0));
    dots.add(view.findViewById(R.id.dot_1));
    dots.add(view.findViewById(R.id.dot_2));
    dots.add(view.findViewById(R.id.dot_3));
    /** The title of the carousel */
    title = (TextView) view.findViewById(R.id.title);
    title.setText(titles[0]);

4. findViewById goes to ViewPager, new and ViewpagerAdapter () in the control layout, and monitors changes by setOnPageChangeListener method

viewPager = (ViewPager) view.findViewById(R.id.viewPager);
    adapter = new ViewPagerAdapter();
    viewPager.setAdapter(adapter);
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        title.setText(titles[position]);
 
        dots.get(position).setBackgroundResource(R.drawable.dot_focused);
        dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
 
        oldPosition = position;
        currentItem = position;
      }
 
      @Override
      public void onPageSelected(int position) {
 
      }
 
      @Override
      public void onPageScrollStateChanged(int state) {
 
      }
    });

5. Customize one ViewPagerAdapter

 /**
   *  Customize Adapter
   *  Inner class 
   */
  private class ViewPagerAdapter extends PagerAdapter {
 
    @Override
    public int getCount() {
      return images.size();// Incoming data 
    }
 
    @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);
    }
 
}

6. These self-watching changes are mainly thread pool, handler and regular rotation

 /**
   *  Picture carousel task 
   *
   */
  private class ViewPageTask implements Runnable{
 
    @Override
    public void run() {
      currentItem = (currentItem + 1) % imageIds.length;
      mHandler.sendEmptyMessage(0);
    }
  }
 
  /**
   *  Receive data passed by child threads 
   */
  private Handler mHandler = new Handler(){
    public void handleMessage(android.os.Message msg) {
      viewPager.setCurrentItem(currentItem);
    };
  };
  @Override
  public void onStop() {
    // TODO Auto-generated method stub
    super.onStop();
    if(scheduledExecutorService != null){
      scheduledExecutorService.shutdown();
      scheduledExecutorService = null;
    }
}