Android image / text rotation animation control based on adapterviewflipper

Time:2021-10-15
catalogue
  • 1. Problems / pits
    • 1.1 item width and height does not take effect
  • 2. Common methods
    • 3. Text / picture rotation demo
      • 3.1 text rotation: textfliperadapter
      • 3.2 picture rotation: imgfipperadapter
      • 3.3 layout: activity_ flipper_ anim.xml
      • 3.4 animation
    • reference resources

      1. Problems / pits

      1.1 item width and height does not take effect

      It should be noted that the width and height of the adapterviewflipper must be matched during layout_ Parent or specific DP value.

      If wrap is used for wide and high school_ Content, the width and height of the adapterviewflipper container will eventually become the width and height of the first item. Even if the width and height of the subsequent item exceeds the first item, it will not take effect, and the content display will only be limited to the width and height of the first item.

      The principle is also well understood. When subsequent items are not drawn, wrap_ The result of content calculation is the width and height of the first item. When subsequent items are displayed, there is no place to update the width and height of the parent container adapterviewflipper.

      2. Common methods

      1. The XML attributes supported by adapterviewanimator are as follows:

      • Android: animatefirstview: sets whether to use animation when displaying the first view of the component.
      • Android: inanimation: sets the animation used when displaying components.
      • 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 and stop playback
      • Showprevious, shownext: previous, next

      3. Rotation status and parameters

      • Isflipping: is it in rotation
      • Flipinterval: animation interval

      4. Set entrance and exit Animation: setinanimation, setoutanimation

      3. Text / picture rotation demo

      /**
       *Picture / text rotation
       *Pit point: Text_ Flip height if wrap is set_ Content causes the item width to be subject to the first item only
       */
      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()
          }
      
          //Text rotation
          private fun initTextFlipper() {
              textFlipper = findViewById(R.id.text_flipper)
              Val list = listof ("text rotation 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()
          }
      
          //Picture rotation
          private fun initImgFlipper() {
              imgFlipper = findViewById(R.id.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()
          }
      }

      3.1 text rotation: textfliperadapter

      
      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
          }
      }
      

      3.2 picture rotation: imgfipperadapter

      
      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
          }
      }
      
      
      

      3.3 layout: activity_ flipper_ anim.xml

      <?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">
      
              <!-- The width and height must be set to full, otherwise wrap_ Content, the size becomes the size of the first item -- >
              <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"
                  android:gravity="center"
                  Android: text = "picture rotation test (5S)"
                  android:textSize="24sp" />
      
              <Button
                  android:id="@+id/prev_btn"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentLeft="true"
                  android:layout_alignParentBottom="true"
                  Android: text = "previous" / >
      
              <Button
                  android:id="@+id/next_btn"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:layout_centerHorizontal="true"
                  Android: text = "next" / >
      
              <Button
                  android:id="@+id/auto_btn"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentRight="true"
                  android:layout_alignParentBottom="true"
                  Android: text = "autoplay" / >
      
          </RelativeLayout>
      </LinearLayout>

      Text layout: item_ flipper_ text.xml

      
      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="100dp"
          android:background="@android:color/holo_blue_light">
      
          <TextView
              android:id="@+id/text"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_marginLeft="5dp"
              android:layout_weight="1"
              android:background="@android:color/holo_green_light"
              android:gravity="center"
              android:maxLines="1"
              android:textSize="22sp" />
      </LinearLayout>
      

      3.4 animation

      Text rotation, admission Animation: RES / Animator / text_ flipper_ in_ from_ bottom.xml

      
      <?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" />
      

      Text rotation, appearance Animation: RES / Animator / text_ flipper_ out_ to_ top.xml

      
      <?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" />
      

      Picture rotation, admission Animation: RES / Animator / img_ flipper_ in.xml

      
      <?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" />
      

      reference resources

      https://www.jb51.net/article/210687.htm

      The above is the details of the image / text rotation animation control implemented by Android based on adapterviewfliper. For more information about the image / text rotation animation control implemented by Android, please pay attention to other relevant articles of developeppaer!

      Recommended Today

      What process is rundll32.exe

      Rundll32.exe process informationProcess file: rundll32 or rundll32.exeProcess name: Microsoft rundll32 normal location: X: (current system partition) \ windows \ system32Description: Test for Netguide.. — caiger2008Produced by: Microsoft CorpOf: Microsoft Windows operating systemSystem process: YesDaemons: YesUse network: noHardware related: noCommon error: unknown n / AMemory usage: unknown n / a security level (0-5): 0We found that […]