Android基于A(yíng)dapterViewFlipper實(shí)現(xiàn)的圖片/文字輪播動(dòng)畫(huà)控件

需要注意的是,AdapterViewFlipper 在布局時(shí),寬高一定要用 match_parent 或者 具體dp值。
如果寬、高中使用了 wrap_content 時(shí),會(huì)導(dǎo)致 AdapterViewFlipper 容器的寬高,最終變成第一個(gè)item的寬高。即使后續(xù)item的寬高超過(guò)第一個(gè)item,也不會(huì)生效,內(nèi)容顯示只會(huì)被限定在第一個(gè)的寬高范圍內(nèi)。
原理也很好理解,后續(xù)item沒(méi)有繪制出來(lái)時(shí), wrap_content 計(jì)算出來(lái)的結(jié)果,就是第一個(gè)item的寬高。當(dāng)后續(xù) item 顯示的時(shí)候,沒(méi)有地方去重新更新父容器 AdapterViewFlipper 的寬高。
2. 常用方法1.AdapterViewAnimator支持的XML屬性如下:
android:animateFirstView:設(shè)置顯示組件的第一個(gè)View時(shí)是否使用動(dòng)畫(huà)。 android:inAnimation:設(shè)置組件顯示時(shí)使用的動(dòng)畫(huà)。 android:loopViews:設(shè)置循環(huán)到最后一個(gè)組件時(shí)是否自動(dòng)跳轉(zhuǎn)到第一個(gè)組件。 android:outAnimation:設(shè)置組件隱藏時(shí)使用的動(dòng)畫(huà)。2.輪播控制:
startFlipping、stopFlipping : 開(kāi)始、停止播放 showPrevious、showNext:上一個(gè)、下一個(gè)3.輪播狀態(tài)與參數(shù)
isFlipping:是否輪播中 flipInterval: 動(dòng)畫(huà)間隔4.設(shè)置入場(chǎng)、出場(chǎng)動(dòng)畫(huà):setInAnimation、setOutAnimation
3. 文字/圖片 輪播 Demo/** * 圖片/文字輪播 * 坑點(diǎn):text_flipper height 如果設(shè)置wrap_content 導(dǎo)致item寬度只會(huì)以第一個(gè)item的為準(zhǔn) */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.id.text_flipper)val list = listOf('文字輪播測(cè)試0', '文字輪播測(cè)試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() } // 圖片輪播 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 ButtonautoBtn = findViewById(R.id.auto_btn) as ButtonpreBtn?.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 文字輪播: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 }}3.2 圖片輪播: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_XYview.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 布局: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'> <RelativeLayoutandroid:layout_width='match_parent'android:layout_height='100dp'android:background='@android:color/holo_red_light'android:orientation='vertical'><!--寬高要必須設(shè)置填充滿(mǎn),否則wrap_content時(shí),大小變成第一個(gè)item的大小--><AdapterViewFlipper android: android:layout_width='match_parent' android:layout_height='match_parent' android:autoStart='true' android:flipInterval='2000' /> </RelativeLayout> <RelativeLayoutandroid:layout_width='match_parent'android:layout_height='0dp'android:layout_weight='1'><AdapterViewFlipper android: 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='圖片輪播測(cè)試(5s)' android:textSize='24sp' /><Button android: android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_alignParentLeft='true' android:layout_alignParentBottom='true' android:text='上一個(gè)' /><Button android: android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_alignParentBottom='true' android:layout_centerHorizontal='true' android:text='下一個(gè)' /><Button android: android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_alignParentRight='true' android:layout_alignParentBottom='true' android:text='自動(dòng)播放' /> </RelativeLayout></LinearLayout>
文字item布局: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'> <TextViewandroid: 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 動(dòng)畫(huà)
文字輪播,入場(chǎng)動(dòng)畫(huà):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' />
文字輪播,出場(chǎng)動(dòng)畫(huà):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' />
圖片輪播,入場(chǎng)動(dòng)畫(huà):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' />參考
https://www.jb51.net/article/210687.htm
以上就是Android基于A(yíng)dapterViewFlipper實(shí)現(xiàn)的圖片/文字輪播動(dòng)畫(huà)控件的詳細(xì)內(nèi)容,更多關(guān)于A(yíng)ndroid 實(shí)現(xiàn)圖片/文字輪播動(dòng)畫(huà)控件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. php模擬實(shí)現(xiàn)斗地主發(fā)牌2. IntelliJ IDEA安裝插件的方法步驟3. 理解PHP5中static和const關(guān)鍵字4. MyBatis中的JdbcType映射使用詳解5. vue 使用localstorage實(shí)現(xiàn)面包屑的操作6. Python random庫(kù)使用方法及異常處理方案7. spring acegi security 1.0.0 發(fā)布8. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟9. Android table布局開(kāi)發(fā)實(shí)現(xiàn)簡(jiǎn)單計(jì)算器10. Vuex localStorage的具體使用

網(wǎng)公網(wǎng)安備