如何使用Android仿京東快報無限輪播效果

小編給大家分享一下如何使用Android仿京東快報無限輪播效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公告內(nèi)容大概每3s從中間向上滑出，同時下一條內(nèi)容從底部向上滑動進(jìn)入。整個過程還伴隨有內(nèi)容的漸變消失,動畫效果很流暢。

采用ViewFlipper來實現(xiàn)更為簡單。 看看ViewFlipper類官方注釋：

Simple {@link 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.

直譯:ViewFlipper是一個容器，能夠?qū)⑻砑釉诶锩娴膬蓚€或更多子View動畫的切換，在一個時間點只有一個child展示出來。并且可以自動的在每隔一個時間段切換到一個child。 要實現(xiàn)京東快報的切換效果，我們只需要將需要根據(jù)輪播的公告內(nèi)容設(shè)置到TextView并添加到ViewFlipper，同時設(shè)置他們之間的切換動畫就可以了。

為了方便在項目中直接重復(fù)使用，我們可以將其自定義為一個繼承自ViewFlipper的控件NoticeView。

public class NoticeView extends ViewFlipper implements View.OnClickListener {  private Context mContext;  private List<String> mNotices;  private OnNoticeClickListener mOnNoticeClickListener;  public NoticeView(Context context) {    super(context);  }  public NoticeView(Context context, AttributeSet attrs) {    super(context, attrs);    init(context);  }  private void init(Context context) {    mContext = context;    // 輪播間隔時間為3s    setFlipInterval(3000);    // 內(nèi)邊距5dp    setPadding(dp2px(5f), dp2px(5f), dp2px(5f), dp2px(5f));    // 設(shè)置enter和leave動畫    setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.notice_in));    setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.notice_out));  }  /**   * 添加需要輪播展示的公告   *   * @param notices   */  public void addNotice(List<String> notices) {    mNotices = notices;    removeAllViews();    for (int i = 0; i < mNotices.size(); i++) {      // 根據(jù)公告內(nèi)容構(gòu)建一個TextView      String notice = notices.get(i);      TextView textView = new TextView(mContext);      textView.setSingleLine();      textView.setText(notice);      textView.setTextSize(20f);      textView.setEllipsize(TextUtils.TruncateAt.END);      textView.setTextColor(Color.parseColor("#666666"));      textView.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL);      // 將公告的位置設(shè)置為textView的tag方便點擊是回調(diào)給用戶      textView.setTag(i);      textView.setOnClickListener(this);      // 添加到ViewFlipper      NoticeView.this.addView(textView, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));    }  }  @Override  public void onClick(View v) {    int position = (int) v.getTag();    String notice = (String) mNotices.get(position);    if (mOnNoticeClickListener != null) {      mOnNoticeClickListener.onNotieClick(position, notice);    }  }  /**   * 通知點擊監(jiān)聽接口   */  public interface OnNoticeClickListener {    void onNotieClick(int position, String notice);  }  /**   * 設(shè)置通知點擊監(jiān)聽器   *   * @param onNoticeClickListener 通知點擊監(jiān)聽器   */  public void setOnNoticeClickListener(OnNoticeClickListener onNoticeClickListener) {    mOnNoticeClickListener = onNoticeClickListener;  }  private int dp2px(float dpValue) {    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,        dpValue,        mContext.getResources().getDisplayMetrics());  }}

布局文件

<?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="wrap_content"  android:layout_marginBottom="20sp"  android:layout_marginLeft="15sp"  android:layout_marginRight="15sp"  android:layout_marginTop="20sp"  android:background="@drawable/jingdong_news_bgcolor"  android:orientation="horizontal"  android:paddingLeft="15sp"  android:paddingRight="15sp">  <ImageView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:src="@drawable/jd_news_tit" />  <com.project.jingdong.customview.NoticeView    android:id="@+id/notice_view"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:layout_gravity="center_horizontal|center_vertical"    android:layout_weight="1"></com.project.jingdong.customview.NoticeView>  <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center_horizontal|center_vertical"    android:text=" | 更多 "    android:textSize="22sp" /></LinearLayout>

布局的樣式

<?xml version="1.0" encoding="utf-8"?><!-- 定義圓角矩形 --><shape xmlns:android="http://schemas.android.com/apk/res/android"  android:padding="10dp"  android:shape="rectangle">  <!-- 填充顏色 -->  <solid android:color="#FFFFFF" />  <!-- 圓角 -->  <corners    android:bottomLeftRadius="16dp"    android:bottomRightRadius="16dp"    android:topLeftRadius="16dp"    android:topRightRadius="16dp" />  <!-- 邊框顏色 -->  <stroke    android:width="1dip"    android:color="#FFFFFF" /></shape>

公告內(nèi)容進(jìn)入動畫notice_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">  <!--平移-->  <translate    android:duration="@android:integer/config_mediumAnimTime"    android:fromYDelta="50%p"    android:toYDelta="0"/>  <!--漸變-->  <alpha    android:duration="@android:integer/config_mediumAnimTime"    android:fromAlpha="0.0"    android:toAlpha="1.0"/></set>

公告內(nèi)容滑出動畫notice_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">  <!--平移-->  <translate    android:duration="@android:integer/config_mediumAnimTime"    android:fromYDelta="0"    android:toYDelta="-50%p"/>  <!--漸變-->  <alpha    android:duration="@android:integer/config_mediumAnimTime"    android:fromAlpha="1.0"    android:toAlpha="0.0"/></set>

在Activity或者Fragment中直接使用就可以了

//定義成為一個方法,直接調(diào)用就行了 private void init() {    NoticeView noticeView = (NoticeView) getActivity().findViewById(R.id.notice_view);    List<String> notices = new ArrayList<>();    notices.add("大促銷下單拆福袋，億萬新年紅包隨便拿");    notices.add("家電五折團(tuán)，搶十億無門檻現(xiàn)金紅包");    notices.add("星球大戰(zhàn)剃須刀首發(fā)送200元代金券");    noticeView.addNotice(notices);    noticeView.startFlipping();  }

以上是“如何使用Android仿京東快報無限輪播效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！