Android仿京東快報無限輪播效果

這篇文章主要爲大家詳細介紹了Android仿京東快報無限輪播效果，具有一定的參考價值，感興趣的小夥伴們可以參考一下

我們常用的京東有一個非常好看的效果:
首頁的京東快播有一個無限輪播的公告欄，先看效果：

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

採用ViewFlipper來實現更爲簡單。
看看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是一個容器，能夠將添加在裏面的兩個或更多子View動畫的切換，在一個時間點只有一個child展示出來。並且可以自動的在每隔一個時間段切換到一個child。
要實現京東快報的切換效果，我們只需要將需要根據輪播的公告內容設置到TextView並添加到ViewFlipper，同時設置他們之間的切換動畫就可以了。

爲了方便在項目中直接重複使用，我們可以將其自定義爲一個繼承自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);
    // 內邊距5dp
    setPadding(dp2px(5f), dp2px(5f), dp2px(5f), dp2px(5f));
    // 設置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++) {
      // 根據公告內容構建一個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);
      // 將公告的位置設置爲textView的tag方便點擊是回調給用戶
      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);
    }
  }

  /**
   * 通知點擊監聽接口
   */
  public interface OnNoticeClickListener {
    void onNotieClick(int position, String notice);
  }

  /**
   * 設置通知點擊監聽器
   *
   * @param onNoticeClickListener 通知點擊監聽器
   */
  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>

公告內容進入動畫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>

公告內容滑出動畫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中直接使用就可以了

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。