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