【Android】【完善】MarqueeView垂直跑马灯解析和完善

MarqueeView垂直跑马灯解析和完善

上次看到一个垂直跑马灯的项目,于是就研究了一下,在此记录一下

源代码地址,点击

效果图

下面开始解析代码

public class MarqueeView extends ViewFlipper {

private Context mContext;
private List<String> notices;//储存拆分好的字符串,然后通过这个数据源创造TextView
private boolean isSetAnimDuration = false;//是否要重置动画持续时间
private OnItemClickListener onItemClickListener;//自己定义的监听

private int interval = 2000;//默认切换时间
private int animDuration = 500;//默认动画持续时间
private int textSize = 14;//字体大小  单位px
private int textColor = 0xffffffff;//字体颜色 白色

public MarqueeView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}

private void init(Context context, AttributeSet attrs, int defStyleAttr) {
this.mContext = context;
if (notices == null) {
notices = new ArrayList<>();
}
//获取自定义属性
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MarqueeViewStyle, defStyleAttr, 0);
interval = typedArray.getInteger(R.styleable.MarqueeViewStyle_mvInterval, interval);
isSetAnimDuration = typedArray.hasValue(R.styleable.MarqueeViewStyle_mvAnimDuration);
animDuration = typedArray.getInteger(R.styleable.MarqueeViewStyle_mvAnimDuration, animDuration);
if (typedArray.hasValue(R.styleable.MarqueeViewStyle_mvTextSize)) {
textSize = (int) typedArray.getDimension(R.styleable.MarqueeViewStyle_mvTextSize, textSize);
textSize = DisplayUtil.px2sp(mContext, textSize);
}
textColor = typedArray.getColor(R.styleable.MarqueeViewStyle_mvTextColor, textColor);
typedArray.recycle();
//设置切换间隔时间
setFlipInterval(interval);
//设置进场动画
Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in);
if (isSetAnimDuration) animIn.setDuration(animDuration);
setInAnimation(animIn);
//设置出场动画
Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out);
if (isSetAnimDuration) animOut.setDuration(animDuration);
setOutAnimation(animOut);
}

// 根据公告字符串启动轮播
public void startWithText(final String notice) {
if (TextUtils.isEmpty(notice)) return;
getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
getViewTreeObserver().removeGlobalOnLayoutListener(this);
startWithFixedWidth(notice, getWidth());
}
});
}

// 根据公告字符串列表启动轮播
public void startWithList(List<String> notices) {
setNotices(notices);
start();
}

// 根据宽度和公告字符串启动轮播
private void startWithFixedWidth(String notice, int width) {
int noticeLength = notice.length();
int dpW = DisplayUtil.px2dip(mContext, width);
int limit = dpW / textSize;
if (dpW == 0) {
throw new RuntimeException("Please set MarqueeView width !");
}

if (noticeLength <= limit) {
notices.add(notice);
} else {
int size = noticeLength / limit + (noticeLength % limit != 0 ? 1 : 0);
for (int i = 0; i < size; i++) {
int startIndex = i * limit;
int endIndex = ((i + 1) * limit >= noticeLength ? noticeLength : (i + 1) * limit);
notices.add(notice.substring(startIndex, endIndex));
}
}
start();
}

// 启动轮播
public boolean start() {
if (notices == null || notices.size() == 0) return false;
removeAllViews();

for (int i = 0; i < notices.size(); i++) {
final TextView textView = createTextView(notices.get(i));
final int finalI = i;
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (onItemClickListener != null) {
onItemClickListener.onItemClick(finalI, textView);
}
}
});
addView(textView);
}

if (notices.size() > 1) {
startFlipping();
}
return true;
}

// 创建ViewFlipper下的TextView
private TextView createTextView(String text) {
TextView tv = new TextView(mContext);
tv.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);
tv.setText(text);
tv.setTextColor(textColor);
tv.setTextSize(textSize);
return tv;
}

private List<Integer> getTextWidth(TextView tv, int width) {
String text = tv.getText().toString();
List<Integer> lists = new ArrayList<>();
if (TextUtils.isEmpty(text) || "".equals(text))
return null;
Paint mPaint = tv.getPaint();
int start = 0;
int end = text.length();
do {
while (mPaint.measureText(text, start, end) > width) {
end--;
}
start = end;
end = text.length();
lists.add(start);
} while (start != text.length());

return lists;
}

public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}

public List<String> getNotices() {
return notices;
}

public void setNotices(List<String> notices) {
this.notices = notices;
}

public interface OnItemClickListener {
void onItemClick(int position, TextView textView);
}

}

下面我来简述一下: 我们在外部只需要调用startWithText,这个方法即可,这个方法中调用了startWithFixedWidth(String notice, int width) 这个方法内计算了指定的宽度内TextView能显示多少字,以及要分成多少条,然后把拆分好的数据放到notices中,执行start(),在方法内创建TextView,addView, startFlipping(),一系列操作,然后就是我们开到的效果了.

一切看起来都很正常,下面我们把notice的内容改成 混合着 中文英文数字特殊符号,在看下效果



好像不行了! 为什么会这样?

startWithFixedWidth(String notice, int width)方法中有这样的定义

int noticeLength = notice.length();
int dpW = DisplayUtil.px2dip(mContext, width);
int limit = dpW / textSize;

这个 limit 就是作者算出来的 dpw宽度下能放多少 textSize大小的字,但这样算如果只包含了中文,中文字符那没问题,一但有英文,数字,特殊字号就不行了.

有没有一个万能的计算方法?能够算出指定的width下textSize大小的字符能放多少个?

有,请看

private List<Integer> getTextWidth(TextView tv, int width) {
String text = tv.getText().toString();
List<Integer> lists = new ArrayList<>();
if (TextUtils.isEmpty(text) || "".equals(text))
return null;
Paint mPaint = tv.getPaint();
int start = 0;
int end = text.length();
do {
while (mPaint.measureText(text, start, end) > width) {
end--;
}
start = end;
end = text.length();
lists.add(start);
} while (start != text.length());

return lists;
}

接下来,我们用这个方法改写startWithFixedWidth(String notice, int width)

该写后如下

private void startWithFixedWidth(String notice, int width) {
TextView tv = createTextView(notice);
List<Integer> lists = getTextWidth(tv, width);
int start=0;
for (int end:lists) {
notices.add(notice.substring(start, end));
start= end;
}
start();
}