溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android仿淘寶頭條向上滾動(dòng)廣告條ViewFlipper

發(fā)布時(shí)間:2020-10-11 06:56:27 來(lái)源:腳本之家 閱讀:274 作者:吳威龍 欄目:移動(dòng)開(kāi)發(fā)

所謂前人栽樹(shù),后人乘涼,在此感謝博主的貢獻(xiàn)。

參考博文:

仿淘寶首頁(yè)的淘寶頭條View垂直滾動(dòng)

我在博主的基礎(chǔ)上做了如下工作:

  • 修復(fù)了滾動(dòng)條第二條點(diǎn)擊事件無(wú)法觸發(fā)這個(gè)bug;
  • 充分簡(jiǎn)化了自定義ViewFlipper類(lèi)的代碼;
  • 添加了直接使用ViewFlipper控件實(shí)現(xiàn)同樣效果;

先上效果圖:

Android仿淘寶頭條向上滾動(dòng)廣告條ViewFlipper

這里使用了一個(gè)比較少用的控件:ViewFlipper
學(xué)習(xí)一個(gè)未知的東西,第一步就是要搞懂what:學(xué)的這個(gè)東西是什么以及能夠?qū)崿F(xiàn)什么效果!第二步就是要搞懂How:這個(gè)東西如何使用。

What:

該控件的官方介紹:

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

鄙人的翻譯:

簡(jiǎn)單ViewAnimator實(shí)現(xiàn)器將已添加到其兩個(gè)或多個(gè)視圖之間實(shí)現(xiàn)動(dòng)畫(huà)效果。 一次只顯示一個(gè)孩子(子視圖)。
如果需要,可以在每個(gè)孩子(子視圖)之間定期自動(dòng)翻轉(zhuǎn)。

How:

實(shí)現(xiàn)方式:

1.繼承ViewFlipper類(lèi)通過(guò)代碼設(shè)置動(dòng)畫(huà)間隔時(shí)間以及動(dòng)畫(huà)效果

1.1自定義ViewFlipper

/**
 * Created by Veyron on 2017/2/20.
 * Function:自定義ViewFlipper控件
 */

public class UpView extends ViewFlipper {

 private Context mContext;
 private boolean isSetAnimDuration = false;
 private int interval = 2000;
 /**
 * 動(dòng)畫(huà)時(shí)間
 */
 private int animDuration = 500;

 public UpView(Context context, AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs, 0);
 }

 private void init(Context context, AttributeSet attrs, int defStyleAttr) {
 this.mContext = context;
 setFlipInterval(interval);//設(shè)置時(shí)間間隔2000毫秒
 //進(jìn)來(lái)的動(dòng)畫(huà)
 Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_in);
 if (isSetAnimDuration)
 animIn.setDuration(animDuration);
 setInAnimation(animIn);
 //退出的動(dòng)畫(huà)
 Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_out);
 if (isSetAnimDuration)
 animOut.setDuration(animDuration);
 setOutAnimation(animOut);
 }

 /**
 * 設(shè)置循環(huán)滾動(dòng)的View數(shù)組
 *
 * @param views
 */
 public void setViews(final List<View> views) {
 if (views == null || views.size() == 0) return;
 removeAllViews();
 for ( int i = 0; i < views.size(); i++) {
 final int position=i;
 //設(shè)置翻滾的子view
 addView(views.get(i));
 }
 startFlipping(); //開(kāi)啟翻滾
 }
}

1.2布局文件中引入

 <com.veyron.www.viewflipperdemo.View.UpView
 android:id="@+id/upview1"
 android:layout_marginLeft="20dp"
 android:layout_width="match_parent"
 android:layout_toRightOf="@+id/tbtv"
 android:layout_centerVertical="true"
 android:layout_marginTop="10dp"
 android:layout_height="match_parent">
 </com.veyron.www.viewflipperdemo.View.UpView>

2.除了方式一,還可以在布局文件中通過(guò)設(shè)定ViewFlipper的屬性來(lái)達(dá)到同樣的效果。

<ViewFlipper
 android:id="@+id/upview2"
 android:autoStart="true"
 android:background="#fff"
 android:inAnimation="@anim/anim_in"
 android:outAnimation="@anim/anim_out"
 android:flipInterval="3000">
 </ViewFlipper>

具體實(shí)現(xiàn)上面兩種方式

MainActivity.java

/**
 * Created by Veyron on 2017/2/20.
 * Function:主界面,加載布局
 */
public class MainActivity extends AppCompatActivity {
 private UpView upview1; //自定義的ViewFlipper
 private ViewFlipper mViewFlipper; //直接使用該控件

 List<String> data = new ArrayList<>(); //文字?jǐn)?shù)據(jù)集合
 List<View> views = new ArrayList<>(); //滾動(dòng)的view集合

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 initdata();
 initView();
 }

 private void initView() {
 //自定義的
 upview1 = (UpView) findViewById(R.id.upview1);
 setView();
 upview1.setViews(views);//給自定義的ViewFlipper設(shè)置滾動(dòng)的view


 //非自定義的,直接使用控件的
 mViewFlipper = (ViewFlipper) findViewById(R.id.upview2);
 //添加翻滾的子view
 mViewFlipper.addView(View.inflate(this, R.layout.view1, null));
 mViewFlipper.addView(View.inflate(this, R.layout.view2, null));
 }

 /**
 * 初始化需要循環(huán)的View
 * 為了靈活的使用滾動(dòng)的View,所以把滾動(dòng)的內(nèi)容讓用戶自定義
 * 假如滾動(dòng)的是三條或者一條,或者是其他,只需要把對(duì)應(yīng)的布局,和這個(gè)方法稍微改改就可以了,
 */
 private void setView() {
 for (int i = 0; i < data.size(); i = i + 2) {
 final int position = i;
 //設(shè)置滾動(dòng)的單個(gè)布局
 LinearLayout moreView = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.item_view, null);
 //初始化布局里面的控件,只要設(shè)置這兩個(gè)控件的監(jiān)聽(tīng)就達(dá)到目的
 TextView tv1 = (TextView) moreView.findViewById(R.id.tv1);
 TextView tv2 = (TextView) moreView.findViewById(R.id.tv2);

 /**
 * 設(shè)置監(jiān)聽(tīng)
 */
 moreView.findViewById(R.id.rl).setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
  Toast.makeText(MainActivity.this, data.get(position).toString(), Toast.LENGTH_SHORT).show();
  Log.d("TAG",data.get(position).toString());
  /**
  * 添加業(yè)務(wù)代碼
  */
 }
 });
 /**
 * 設(shè)置監(jiān)聽(tīng)
 */
 moreView.findViewById(R.id.rl2).setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
  Toast.makeText(MainActivity.this, data.get(position+1).toString(), Toast.LENGTH_SHORT).show();
  Log.d("TAG",data.get(position+1).toString());
  /**
  * 添加業(yè)務(wù)代碼
  */
 }
 });


 //進(jìn)行對(duì)控件賦值
 tv1.setText(data.get(i).toString());
 if (data.size() > i + 1) {
 //因?yàn)樘詫毮莾菏莾蓷l數(shù)據(jù),但是當(dāng)數(shù)據(jù)是奇數(shù)時(shí)就不需要賦值第二個(gè),所以加了一個(gè)判斷,還應(yīng)該把第二個(gè)布局給隱藏掉
 tv2.setText(data.get(i + 1).toString());
 } else {
 moreView.findViewById(R.id.rl2).setVisibility(View.GONE);
 }

 //添加到循環(huán)滾動(dòng)數(shù)組里面去
 views.add(moreView); //也就是滾動(dòng)的view集合
 }
 }
 /**
 * 初始化數(shù)據(jù)
 */
 private void initdata() {
 data = new ArrayList<>();
 data.add("美劇《行尸走肉》上線Steam 每一集售價(jià)2.99...");
 data.add("2017四月新番動(dòng)畫(huà)全預(yù)覽!你期待那部");
 data.add("生娃后,老公有過(guò)這些舉動(dòng),你卻沒(méi)加錯(cuò)人!");
 data.add("汽車(chē)開(kāi)空調(diào)耗油?只因?yàn)榘村e(cuò)了一個(gè)鍵");
 data.add("心疼S7 edge 三星官方‘虐機(jī)'視頻上線");
 }
}

API介紹

常用屬性:

  • autoStart:ture,則自動(dòng)開(kāi)始滾動(dòng)
  • inAnimation:滾動(dòng)進(jìn)入的動(dòng)畫(huà)
  • outAnimation:滾動(dòng)出去的動(dòng)畫(huà)
  • flipInterval:時(shí)間間隔

常用方法:

  • startFlipping():開(kāi)始翻滾
  • setOutAnimation():滾動(dòng)出去的動(dòng)畫(huà)
  • setInAnimation():滾動(dòng)進(jìn)入的動(dòng)畫(huà)
  • setFlipInterval():設(shè)置時(shí)間間隔-毫秒
  • ViewFlipper對(duì)象的addView():加載需要滾動(dòng)的視圖對(duì)象

ViewFlipper具體屬性詳見(jiàn):ViewFlipper控件的官方api

源碼:

ViewFlipperDemo

如果該你喜歡該項(xiàng)目,歡迎fork,歡迎點(diǎn)個(gè)Star!!

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI