Android仿淘寶頭條向上滾動廣告條ViewFlipper

2019-10-23 18:28:06

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

所謂前人栽樹，后人乘涼，在此感謝博主的貢獻(xiàn)。
參考博文：

仿淘寶首頁的淘寶頭條View垂直滾動

歡迎關(guān)注我的微信公眾號

不只是原創(chuàng)技術(shù)文章，更多的是對生活的思考總結(jié)

Android,滾動,ViewFlipper

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

修復(fù)了滾動條第二條點擊事件無法觸發(fā)這個bug；
充分簡化了自定義ViewFlipper類的代碼；
添加了直接使用ViewFlipper控件實現(xiàn)同樣效果；

先上效果圖：

Android,滾動,ViewFlipper

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

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.

鄙人的翻譯：

簡單ViewAnimator實現(xiàn)器將已添加到其兩個或多個視圖之間實現(xiàn)動畫效果。一次只顯示一個孩子（子視圖）。
如果需要，可以在每個孩子（子視圖）之間定期自動翻轉(zhuǎn)。

How:

實現(xiàn)方式：

1.繼承ViewFlipper類通過代碼設(shè)置動畫間隔時間以及動畫效果

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; /** * 動畫時間 */ 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è)置時間間隔2000毫秒 //進(jìn)來的動畫 Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_in); if (isSetAnimDuration)  animIn.setDuration(animDuration); setInAnimation(animIn); //退出的動畫 Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_out); if (isSetAnimDuration)  animOut.setDuration(animDuration); setOutAnimation(animOut); } /** * 設(shè)置循環(huán)滾動的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(); //開啟翻滾 }}

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.除了方式一，還可以在布局文件中通過設(shè)定ViewFlipper的屬性來達(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>

具體實現(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<>(); //滾動的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è)置滾動的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 * 為了靈活的使用滾動的View，所以把滾動的內(nèi)容讓用戶自定義 * 假如滾動的是三條或者一條，或者是其他，只需要把對應(yīng)的布局，和這個方法稍微改改就可以了， */ private void setView() { for (int i = 0; i < data.size(); i = i + 2) {  final int position = i;  //設(shè)置滾動的單個布局  LinearLayout moreView = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.item_view, null);  //初始化布局里面的控件,只要設(shè)置這兩個控件的監(jiān)聽就達(dá)到目的  TextView tv1 = (TextView) moreView.findViewById(R.id.tv1);  TextView tv2 = (TextView) moreView.findViewById(R.id.tv2);  /**  * 設(shè)置監(jiān)聽  */  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)聽  */  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)行對控件賦值  tv1.setText(data.get(i).toString());  if (data.size() > i + 1) {  //因為淘寶那兒是兩條數(shù)據(jù)，但是當(dāng)數(shù)據(jù)是奇數(shù)時就不需要賦值第二個，所以加了一個判斷，還應(yīng)該把第二個布局給隱藏掉  tv2.setText(data.get(i + 1).toString());  } else {  moreView.findViewById(R.id.rl2).setVisibility(View.GONE);  }  //添加到循環(huán)滾動數(shù)組里面去  views.add(moreView); //也就是滾動的view集合 } } /** * 初始化數(shù)據(jù) */ private void initdata() { data = new ArrayList<>(); data.add("美劇《行尸走肉》上線Steam 每一集售價2.99..."); data.add("2017四月新番動畫全預(yù)覽！你期待那部"); data.add("生娃后，老公有過這些舉動，你卻沒加錯人！"); data.add("汽車開空調(diào)耗油？只因為按錯了一個鍵"); data.add("心疼S7 edge 三星官方‘虐機'視頻上線"); }}

API介紹

常用屬性：