Android开发之上下轮播

在Android开发中，商城类app的首页，经常会有公告信息上下轮播，今天主要讲的也是公告信息上下轮播，文字结尾会放上demo的下载链接。

先上效果图：

由于不是gif图，想要看效果的可以下载demo自己运行。

首先我们来看自定义的RelativeSwitcherView轮播类的代码：

package pts.com.articleproject.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.ViewSwitcher;

import java.util.ArrayList;
import java.util.List;

import pts.com.articleproject.R;
import pts.com.articleproject.model.bean.ArticleListBean;

public class RelativeSwitcherView extends ViewSwitcher implements ViewSwitcher.ViewFactory, View.OnClickListener {
    private int index;
    private int size;
    private AttributeSet attrs;
    private List<ArticleListBean> arrays;

    public RelativeSwitcherView(Context context) {
        super(context);
        init();
    }

    public RelativeSwitcherView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.attrs = attrs;
        init();
    }

    private void init() {
        index = 0;
        arrays = new ArrayList<>();
        setFactory(this);
        setInAnimation(animIn());
        setOutAnimation(animOut());
        setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (mListener != null) {
            ArticleListBean bean = null;
            if (arrays != null && arrays.size() > 0) {
                bean = arrays.get(index);
            }
            mListener.clickWhich(bean);
        }
    }

    private Runnable runnable = new Runnable() {
        @Override
        public void run() {
            if (size > 1) {
                index++;
                index = index % size;
                if (arrays != null && arrays.size() > index) {
                    setDataForView(arrays.get(index));
                }
                postDelayed(this, 5000);
            }
        }
    };

    @Override
    public View makeView() {
        View view = View.inflate(getContext(), R.layout.layout_article_item, null);
        view.setLayoutParams(new LayoutParams(
                LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT));
        return view;
    }

    private Animation animIn() {
        TranslateAnimation anim = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 1.0f,
                Animation.RELATIVE_TO_PARENT, -0.0f);
        anim.setDuration(1500);
        anim.setInterpolator(new LinearInterpolator());
        return anim;
    }

    private Animation animOut() {
        TranslateAnimation anim = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, -1.0f);
        anim.setDuration(1500);
        anim.setInterpolator(new LinearInterpolator());
        return anim;
    }

    @Override
    protected void onDetachedFromWindow() {
        try {
            removeCallbacks(runnable);
            super.onDetachedFromWindow();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public void setOnMyClickListener(OnMyClickListener listener) {
        this.mListener = listener;
    }

    private OnMyClickListener mListener;

    public interface OnMyClickListener {
        void clickWhich(ArticleListBean bean);
    }

    public void setArticleList(List<ArticleListBean> texts) {
        removeCallbacks(runnable);
        this.index = 0;
        this.size = texts != null ? texts.size() : 0;
        this.arrays = texts;
        if (size > 0) {
            if (arrays != null && arrays.size() > 0) {
                setDataForView(arrays.get(index));
            }
            postDelayed(runnable, 500);
        } else {
            setDataForView(null);
        }
    }

    private void setDataForView(ArticleListBean indexBase) {
        if (indexBase != null) {
            final RelativeLayout containerView = (RelativeLayout) getNextView();
            TextView tv_title = (TextView) containerView.findViewById(R.id.txt_article_item);
            tv_title.setText(indexBase.getArticle());
            showNext();
        }
    }
}

接下来看 RelativeSwitcherView里面的xml，里面主要就是写的轮播时候显示的item，需要自定义显示的内容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txt_article_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:textColor="@color/color_2B2424"
        android:text="公告信息"
        android:lines="1"
        android:ellipsize="end"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"/>

</RelativeLayout>

接下来看activity_main:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_article_bg"
        android:scaleType="fitXY"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="@drawable/bg_96ffffff_5"
        android:layout_margin="10dp">

        <pts.com.articleproject.view.RelativeSwitcherView
            android:id="@+id/switcherView_article"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>
    </LinearLayout>

</RelativeLayout>

这里我为了美观，加了一个背景图片，接下来看MainActivity的代码，MainActivity里面的代码比较简单，主要是设置数据。

package pts.com.articleproject.ui.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

import pts.com.articleproject.R;
import pts.com.articleproject.model.bean.ArticleListBean;
import pts.com.articleproject.view.RelativeSwitcherView;

public class MainActivity extends AppCompatActivity {

    private RelativeSwitcherView switcherView;
    private List<ArticleListBean> articleList;

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

        initView();
        initData();
    }

    private void initView(){
        articleList = new ArrayList<>();
        switcherView = (RelativeSwitcherView) findViewById(R.id.switcherView_article);
    }

    private void initData(){
        articleList.add(new ArticleListBean("公告轮播"));
        articleList.add(new ArticleListBean("公告轮播demo"));
        articleList.add(new ArticleListBean("一个小demo"));
        articleList.add(new ArticleListBean("2017年6月21日暴雨"));

        // 设置数据
        switcherView.setArticleList(articleList);
        // 触发事件
        switcherView.setOnMyClickListener(new RelativeSwitcherView.OnMyClickListener() {
            @Override
            public void clickWhich(ArticleListBean bean) {
                if (bean != null){
                    // 点击事件
                }
            }
        });
    }

}

好了，公告信息上下轮播就到这了，主要是看明白自定义类 RelativeSwitcherView。

demo下载链接：http://download.csdn.net/detail/emptoney/9876852