Android - Image Switcher Tutorial

2021-12-07 13:59 Android开发

Sometimes you don't want an image to appear abruptly on the screen, rather you want to apply some kind of animation to the image when it transitions from one image to another. This is supported by android in the form of ImageSwitcher. An image switcher allows you to add some transitions on the images through the way they appear on screen. In order to use image Switcher, you need to define its XML component first. Its syntax is given below − <pre class="prettyprint notranslate prettyprinted" > <ImageSwitcher android:id="@+id/imageSwitcher1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" > </ImageSwitcher></pre> Now we create an intance of ImageSwithcer in java file and get a reference of this XML component. Its syntax is given below − <pre class="result notranslate" > private ImageSwitcher imageSwitcher; imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher1); </pre> The next thing we need to do implement the ViewFactory interface and implement unimplemented method that returns an imageView. Its syntax is below − <pre class="prettyprint notranslate prettyprinted" > imageSwitcher.setImageResource(R.drawable.ic_launcher); imageSwitcher.setFactory(new ViewFactory() { public View makeView() { ImageView myView = new ImageView(getApplicationContext()); return myView; } }</pre> The last thing you need to do is to add Animation to the ImageSwitcher. You need to define an object of Animation class through AnimationUtilities class by calling a static method loadAnimation. Its syntax is given below − <pre class="prettyprint notranslate prettyprinted" > Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); imageSwitcher.setInAnimation(in); imageSwitcher.setOutAnimation(out); </pre> The method setInAnimaton sets the animation of the appearance of the object on the screen whereas setOutAnimation does the opposite. The method loadAnimation() creates an animation object. Apart from these methods, there are other methods defined in the ImageSwitcher class. They are defined below − <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >Method & description</th> </tr> <tr > <td >1</td> <td >setImageDrawable(Drawable drawable) Sets an image with image switcher. The image is passed in the form of bitmap </td> </tr> <tr > <td >2</td> <td >setImageResource(int resid) Sets an image with image switcher. The image is passed in the form of integer id </td> </tr> <tr > <td >3</td> <td >setImageURI(Uri uri) Sets an image with image switcher. THe image is passed in the form of URI </td> </tr> <tr > <td >4</td> <td >ImageSwitcher(Context context, AttributeSet attrs) Returns an image switcher object with already setting some attributes passed in the method </td> </tr> <tr > <td >5</td> <td >onInitializeAccessibilityEvent (AccessibilityEvent event) Initializes an AccessibilityEvent with information about this View which is the event source </td> </tr> <tr > <td >6</td> <td >onInitializeAccessibilityNodeInfo (AccessibilityNodeInfo info) Initializes an AccessibilityNodeInfo with information about this view </td> </tr> </tbody> </table> <h2 >Example</h2> The below example demonstrates some of the image switcher effects on the bitmap. It crates a basic application that allows you to view the animation effects on the images. To experiment with this example , you need to run this on an actual device. <table class="table table-bordered" > <tbody > <tr > <th >Steps</th> <th >Description</th> </tr> <tr > <td >1</td> <td >You will use Android studio IDE to create an Android application under a package com.example.sairamkrishna.myapplication. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.</td> </tr> <tr > <td >2</td> <td >Modify src/MainActivity.java file to add necessary code.</td> </tr> <tr > <td >3</td> <td >Modify the res/layout/activity_main to add respective XML components</td> </tr> <tr > <td >4</td> <td >Run the application and choose a running android device and install the application on it and verify the results</td> </tr> </tbody> </table> Following is the content of the modified main activity filesrc/MainActivity.java. <pre class="prettyprint notranslate prettyprinted" > package com.example.sairamkrishna.myapplication; import android.app.Activity; import android.app.ActionBar.LayoutParams; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.ImageSwitcher; import android.widget.ImageView; import android.widget.Toast; import android.widget.ViewSwitcher.ViewFactory; public class MainActivity extends Activity { private ImageSwitcher sw; private Button b1,b2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); b1 = (Button) findViewById(R.id.button); b2 = (Button) findViewById(R.id.button2); sw = (ImageSwitcher) findViewById(R.id.imageSwitcher); sw.setFactory(new ViewFactory() { @Override public View makeView() { ImageView myView = new ImageView(getApplicationContext()); myView.setScaleType(ImageView.ScaleType.FIT_CENTER); myView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); return myView; } }); b1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(), "previous Image",Toast.LENGTH_LONG).show(); sw.setImageResource(R.drawable.abc); } }); b2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(), "Next Image",Toast.LENGTH_LONG).show(); sw.setImageResource(R.drawable.tp); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }</pre> Following is the modified content of the xmlres/layout/activity_main.xml. <pre class="prettyprint notranslate prettyprinted" > <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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:text="Gestures Example" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview" android:textSize="35dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tutorials point" android:id="@+id/textView" android:layout_below="@+id/textview" android:layout_centerHorizontal="true" android:textColor="#ff7aff24" android:textSize="35dp" /> <ImageSwitcher android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageSwitcher" android:layout_below="@+id/textView" android:layout_centerHorizontal="true" android:layout_marginTop="168dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="<" android:id="@+id/button" android:layout_below="@+id/textView" android:layout_centerHorizontal="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=">" android:id="@+id/button2" android:layout_alignParentBottom="true" android:layout_alignLeft="@+id/button" android:layout_alignStart="@+id/button" /> </RelativeLayout></pre> Following is the content ofAndroidManifest.xmlfile. <pre class="prettyprint notranslate prettyprinted" > <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.imageswitcher" android:versionCode="1" android:versionName="1.0" > <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.example.sairamkrishna.myapplication.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest></pre> Let's try to run your application we just modified. I assume you had created yourAVDwhile doing environment setup. To run the app from Android studio, open one of your project's activity files and click Run<img alt="Eclipse Run Icon" class="inline" src="http://www.tutorialspoint.com/android/images/eclipse_run.jpg" />icon from the toolbar. Android studio installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window − <img alt="Android Image Switcher Tutorial" src="http://www.tutorialspoint.com/android/images/image_switcher.jpg" /> Now if you will look at your device screen , you will see the two buttons. Now just select the upper button that right arrow. An image would appear from right and move towards left. It is shown below − <img alt="Android Image Switcher Tutorial" src="http://www.tutorialspoint.com/android/images/image_switcher1.jpg" /> Now tap on the below button, that will bring back the previous image with some transition. It is shown below − <img alt="Android Image Switcher Tutorial" src="http://www.tutorialspoint.com/android/images/image_switcher2.jpg" /> <div></div>