Android开发之上下轮播

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

先上效果图:

Android开发之上下轮播_第1张图片


由于不是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 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 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,需要自定义显示的内容。




    


接下来看activity_main:



    

    

        
    



这里我为了美观,加了一个背景图片,接下来看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 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




你可能感兴趣的:(Android开发之上下轮播)