AdapterViewFlipper image/text rotation animation control – Juejin.

1. Problems/potholes

1.1 Item Width and height does not take effect

Note that the width and height of the AdapterViewFlipper must be match_parent or dp.

If wrap_content is used in width and high, this results in the width and height of the AdapterViewFlipper container, which eventually becomes the width and height of the first item. Even if the width and height of subsequent items are greater than that of the first item, this does not take effect, and the content display is limited only to the width and height of the first item.

The principle is easy to understand. When a subsequent item is not drawn, wrap_content calculates the width and height of the first item. There is no place to update the width and height of the parent AdapterViewFlipper when subsequent items are displayed.

2. Common methods

  1. AdapterViewAnimator supports the following XML attributes:

    • Android :animateFirstView: Sets whether to use animation when displaying the first View of the component.
    • Android :inAnimation: Sets the animation used when the component is displayed.
    • Android :loopViews: Sets whether to automatically jump to the first component when looping to the last component.
    • Android :outAnimation: Sets the animation used when the component is hidden.

  2. Rotation control:

    • startFlipping,stopFlipping: Start or stop playing
    • showPrevious,showNext: Previous, next

  3. Rotation state and parameters

    • isFlipping: Indicates whether it is in rotation
    • flipInterval: Animation interval

  4. Set the entry and exit animations: setInAnimation and setOutAnimation

3. Text/picture rotation Demo

/** * class FlipperAnimActivity: /** * class FlipperAnimActivity: AppCompatActivity(), View.OnClickListener { private var textFlipper: AdapterViewFlipper? = null private var imgFlipper: AdapterViewFlipper? = null private var preBtn: Button? = null private var nextBtn: Button? = null private var autoBtn: Button? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_flipper_anim) initTextFlipper() initImgFlipper() } Private fun initTextFlipper() {textFlipper = findViewById(r.i.t.ext_flipper) val list = listOf(" textFlipper test 0", "Text rotation Test 02..." ) textFlipper? .adapter = TextFlipperAdapter(this, list) textFlipper? .setInAnimation(this, R.animator.text_flipper_in_from_bottom) textFlipper? .setOutAnimation(this, R.animator.text_flipper_out_to_top) // textFlipper? .flipInterval // textFlipper? .startflipping ()} // Image flipping private fun initImgFlipper() {imgFlipper = findViewById(R.i.img_flipper) val list = listOf("http://www.nicesoso.com/test/file/img/test.jpg", "http://www.nicesoso.com/test/file/img/test_h_1.jpg", "http://www.nicesoso.com/test/file/img/test_h_2.jpg") imgFlipper?.adapter = ImgFlipperAdapter(this, list) imgFlipper?.setInAnimation(this, R.animator.img_flipper_in) preBtn = findViewById(R.id.prev_btn) nextBtn = findViewById(R.id.next_btn) as Button autoBtn = findViewById(R.id.auto_btn) as Button preBtn?.setOnClickListener(this) nextBtn?.setOnClickListener(this) autoBtn?.setOnClickListener(this) } override fun onClick(v: View?) { when (v?.id) { R.id.prev_btn -> { imgFlipper?.showPrevious() imgFlipper?.stopFlipping() } R.id.next_btn -> { imgFlipper?.showNext() imgFlipper?.stopFlipping() } R.id.auto_btn -> { imgFlipper?.startFlipping() } } } override fun onDestroy() { super.onDestroy() textFlipper?.takeIf { it.isFlipping }?.stopFlipping() imgFlipper?.takeIf { it.isFlipping  }?.stopFlipping() } }Copy the code

3.1 Text rotation: TextFlipperAdapter

class TextFlipperAdapter(private val context: Context, private val datas: List<String>) : BaseAdapter() { override fun getView(position: Int, convertView: View? , parent: ViewGroup?) : View { val view = convertView ? : LayoutInflater.from(context).inflate(R.layout.item_flipper_text, parent, false) val textView = view?.findViewById<TextView?>(R.id.text) textView?.text = datas.get(position) return view } override fun getItem(position: Int): Any { return datas.get(position) } override fun getItemId(position: Int): Long { return position.toLong() } override fun getCount(): Int { return datas.size } }Copy the code

3.2 Image rotation: ImgFlipperAdapter

class ImgFlipperAdapter(private val context: Context, private val datas: List<String>) : BaseAdapter() { override fun getView(position: Int, convertView: View? , parent: ViewGroup?) : View { val view = convertView ? : ImageView(context) (view as? ImageView)? .scaleType = ImageView.ScaleType.FIT_XY view.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT) (view as? ImageView)? .let { Glide.with(context).load(datas.get(position)).into(it) } return view } override fun getItem(position: Int): Any { return datas.get(position) } override fun getItemId(position: Int): Long { return position.toLong() } override fun getCount(): Int { return datas.size } }Copy the code

3.3 Layout: activity_flipper_im.xml

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout 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:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="100dp" android:background="@android:color/holo_red_light" android:orientation="vertical"> <! -- Width and height must be set to fill, otherwise wrap_content <AdapterViewFlipper android:id="@+id/text_flipper" Android :layout_width="match_parent" android:layout_height="match_parent" android:autoStart="true" android:flipInterval="2000" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <AdapterViewFlipper android:id="@+id/img_flipper" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:flipInterval="5000" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" <Button android:id="@+id/ prev_bTN "android:id="@+id/ prev_bTN" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" <Button android:id="@+id/ next_bTN "android:layout_alignParentBottom="true" Android :text=" last" /> <Button Android :id="@+id/ next_bTN" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" <Button android:id="@+id/ auto_bTN "style =" box-sizing: border-box! Important; word-wrap: break-word! Important; android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" Android :layout_alignParentBottom="true" Android :text=" Auto Play "/> </RelativeLayout> </LinearLayout>Copy the code

3.4 the animation

Text rotation, entry animation: res/animator/text_flipper_in_from_bottom.xml

<? The XML version = "1.0" encoding = "utf-8"? > <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="y" android:valueFrom="100"  android:valueTo="0" android:valueType="floatType" />Copy the code

Text rotation, appearance animation: res/animator/text_flipper_out_to_top.xml

<? The XML version = "1.0" encoding = "utf-8"? > <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="y" android:valueFrom="0" android:valueTo="-100" android:valueType="floatType" />Copy the code

Image rotation, entry animation: res/animator/img_flipper_in.xml

<? The XML version = "1.0" encoding = "utf-8"? > <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="x" android:valueFrom="500"  android:valueTo="0" android:valueType="floatType" />Copy the code

At the end of your point like collection is the biggest encouragement to me! Welcome to pay attention to my simple book, share Android dry goods, exchange Android technology. If you have any comments or technical questions about this article, please leave a comment in the comments section.