In Android, ImageViewSwitcher is used to implement image switching and carousel navigation,

In Android, ImageViewSwitcher is used to implement image switching and carousel navigation,

Previously I usedViewFlippeR andViewPagerEffects of switching between visual charts on the screen (ViewPager does not implement carousel) Link:

Use ViewFlipper in Android to implement screen Switching

Use ViewPager in Android to implement screen page switching and page Switching

 

Today we are changing the implementation methodImageViewSwitcher.

ImageSwitcher is a widget in Android that controls the image display effect, such as the slide effect.

A rough understanding of ImageSwitcher is the selector of ImageView.

ImageSwitcher principle: ImageSwitcher has two sub-views: ImageView. When sliding left and right, the two imageviews are switched back and forth to display the image.

Since there are two sub-imageviews, we need to create two imageviews for ImageSwitcher. The ImageView in ImageViewSwitcher is created throughViewFactoryFactory.

The following shows the implementation result (carousel is supported ):

Okay, let's talk about the code below:

Step 1: Create the active Layout (FrameLayout) file activity_main.xml in Layout (including the LinearLayout Layout of the navigation origin)

 1 <?xml version="1.0" encoding="utf-8"?> 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     xmlns:tools="http://schemas.android.com/tools" 4     android:id="@+id/activity_main" 5     android:layout_width="match_parent" 6     android:layout_height="match_parent" 7     tools:context="com.example.administrator.switcher.MainActivity"> 8     <ImageSwitcher 9         android:layout_width="match_parent"10         android:layout_height="match_parent"11         android:id="@+id/is">12     </ImageSwitcher>13     <LinearLayout14         android:id="@+id/point_layout"15         android:layout_width="match_parent"16         android:layout_height="wrap_content"17         android:layout_gravity="bottom"18         android:orientation="horizontal">19         <ImageView20             android:layout_width="wrap_content"21             android:layout_height="wrap_content"22             android:layout_weight="1"23             android:src="@mipmap/default_holo"/>24         <ImageView25             android:layout_width="wrap_content"26             android:layout_height="wrap_content"27             android:layout_weight="1"28             android:src="@mipmap/default_holo"/>29         <ImageView30             android:layout_width="wrap_content"31             android:layout_height="wrap_content"32             android:layout_weight="1"33             android:src="@mipmap/default_holo"/>34         <ImageView35             android:layout_width="wrap_content"36             android:layout_height="wrap_content"37             android:layout_weight="1"38             android:src="@mipmap/default_holo"/>39     </LinearLayout>40 </FrameLayout>

You can also use the configuration file to layout the following navigation dots without having to write them to the layout file.

Step 2: Java MainActivity. java

1 import android. support. v7.app. appCompatActivity; 2 import android. OS. bundle; 3 import android. view. motionEvent; 4 import android. view. view; 5 import android. widget. imageSwitcher; 6 import android. widget. imageView; 7 import android. widget. linearLayout; 8 import android. widget. viewSwitcher; 9 import java. util. arrayList; 10/** 11 * Created by panchengjia on 2016/12/04. 12 */13 public class MainActivit Y extends AppCompatActivity implements ViewSwitcher. viewFactory, View. onTouchListener {14 private ImageSwitcher is; // declare ImageSwitcher layout 15 private LinearLayout point_layout; // declare the layout of navigation bullets 16 // 17 int [] images = {R. mipmap. a1, R. mipmap. a2, R. mipmap. a3, R. mipmap. a4}; 18 // instantiate 19 ArrayList for storing the set of navigation dots <ImageView> points = new ArrayList <> (); 20 int index; // declare index, record image id array subscript 21 float startX; // coordinates of X when the finger contacts the screen (demonstrate sliding left and right) 22 fl Oat endX; // coordinates when the finger leaves the screen (sliding left and right) 23 24 @ Override25 protected void onCreate (Bundle savedInstanceState) {26 super. onCreate (savedInstanceState); 27 setContentView (R. layout. activity_main); 28 is = (ImageSwitcher) findViewById (R. id. is); 29 is. setFactory (this); // implement ImageSwitcher30 initpoint (); 31 is. setOnTouchListener (this); // set the touch event 32} 33 // Method for initializing the navigation dot 34 private void initpoint () {35 point_layout = (LinearLayou T) findViewById (R. id. point_layout); 36 int count = point_layout.getChildCount (); // obtain the number of circles in the layout. 37 for (int I = 0; I <count; I ++) {38 // Add the dot in the layout to 39 points in the dot set. add (ImageView) point_layout.getChildAt (I); 40} 41 // set the dot state of the first image (that is, the 0 subscript of the Image array) to the touch solid state 42 points. get (0 ). setImageResource (R. mipmap. touched_holo); 43} 44 // set the status of the navigation origin corresponding to the selected image 45 public void setImageBackground (int selectImage) {46 for (int I = 0; I <points. size (); I + +) {47 // if the subscript of the selected image is equal to the id of the lower mark in the dot set, the dot state is changed to 48 if (I = selectImage) {49 points. get (I ). setImageResource (R. mipmap. touched_holo); 50} else {51 points. get (I ). setImageResource (R. mipmap. default_holo); 52} 53} 54} 55 // instantiate imageView using the ViewFactory method (ImageView attributes are not set here) 56 @ Override57 public View makeView () {58 // instantiate an ImageView for switching 59 ImageView iv = new ImageView (this); 60 // The first view displayed by default is images [0] 61 iv. setImageResource (ima Ges [0]); 62 return iv; 63} 64 @ Override65 public boolean onTouch (View v, MotionEvent event) {66 // press the screen 67 if (event. getAction () = MotionEvent. ACTION_DOWN) {68 startX = event. getX (); // obtain the coordinate 69 on the X axis when the screen is pressed // lift the finger 70} else if (event. getAction () = MotionEvent. ACTION_UP) {71 endX = event. getX (); 72 // determine that the end coordinate is greater than the start coordinate and the next coordinate (to avoid misoperation, set the 30 judgment range) 73 if (startX-endX> 30) {74 // determine that the current image is the last image, and start from the beginning with 75 index = index + 1 <images. length? ++ Index: 0; 76 // use the system's built-in switch in/out animation effect (you can also customize the animation effect to ViewFlipper) 77 is. setInAnimation (this, android. r. anim. fade_in); 78 is. setOutAnimation (this, android. r. anim. fade_out); 79 80 // when the end coordinate is smaller than the start coordinate, the last one is used (to avoid misoperation, set the 30 judgment range) 81} else if (endX-startX> 30) {82 // determine that the current image is already the first image, and the last image in the group is 83 index = index-1> = 0? -- Index: images. length-1; 84 is. setInAnimation (this, android. r. anim. fade_in); 85 is. setOutAnimation (this, android. r. anim. fade_out); 86} 87 // set ImageSwitcher's image resource 88 is. setImageResource (images [index]); 89 // call the method to set the corresponding status of the dot 90 setImageBackground (index); 91} 92 return true; 93} 94}

In my personal sense, ImageViewSwitcher is much simpler than ViewFlipper and ViewPager in terms of image switching and carousel. You can share your views.