android 高仿抖音界面,2018

admin管理员组

文章数量:1516870

android 高仿抖音界面,2018

写在前头，抖音里面很多控件，效果很不错，但是，Android 跟iOS的表现形式以及实现方式，都是有区别的，这里实现Android左右拖拉控件进行视频封面选择。

public class ChoiceCover extends View {

private int mWidth;

private int mHeight;

private Paint mPaint;

private RectF rectF;

private RectF rectF2;

private int rectWidth;

private Bitmap bitmap;

private OnScrollBorderListener onScrollBorderListener;

private int minPx;

public ChoiceCover(Context context) {

super(context);

init();

}

public ChoiceCover(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

init();

}

public ChoiceCover(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init();

}

private void init() {

mPaint = new Paint();

mPaint.setAntiAlias(true);

int dp5 = (int) getResources().getDimension(R.dimen.pat_dimen_2);

mPaint.setStrokeWidth(dp5);

//bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.video_thumbnail);

rectWidth = (int) getResources().getDimension(R.dimen.pat_dimen_2);

minPx = (int) getResources().getDimension(R.dimen.pat_dimen_28);

}

public void setMinInterval(int minPx) {

if (mWidth > 0 && minPx > mWidth) {

minPx = mWidth;

}

this.minPx = minPx;

}

public interface OnScrollBorderListener {

void OnScrollBorder(float start, float end);

void onScrollStateChange();

}

public void setOnScrollBorderListener(OnScrollBorderListener listener) {

this.onScrollBorderListener = listener;

}

public float getLeftInterval() {

return rectF.left;

}

public float getRightInterval() {

return rectF2.right;

}

@Override

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

super.onLayout(changed, left, top, right, bottom);

if (mWidth == 0) {

mWidth = getWidth();

mHeight = getHeight();

rectF = new RectF();

rectF.left = 0;

rectF.top = 0;

rectF.right = rectWidth;

rectF.bottom = mHeight;

rectF2 = new RectF();

rectF2.left = minPx + rectWidth;

rectF2.top = 0;

rectF2.right = (rectWidth * 2) + minPx;

rectF2.bottom = mHeight;

}

private float downX;

private boolean isScroll;

@Override

public boolean onTouchEvent(MotionEvent event) {

move(event);

return isScroll;

}

boolean scrollChange;

private boolean move(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

downX = event.getX();

if (downX > rectF.left && downX < rectF2.right) {

isScroll = true;

} else {

Log.e("downX", "downX = " + downX + " left*" + rectF.left + " right*" + rectF2.right);

rectF.left = (downX - minPx / 2) - rectWidth;

rectF.right = downX - minPx / 2;

rectF2.left = downX + minPx / 2;

rectF2.right = (downX + minPx / 2) + rectWidth;

//滑动到左边最大值

if (rectF.left < 0) {

rectF.left = 0;

rectF.right = rectWidth;

rectF2.left = minPx + rectWidth;

rectF2.right = (rectWidth * 2) + minPx;

}

//滑动至右边最大值

if (rectF2.right > mWidth) {

rectF2.right = mWidth;

rectF2.left = mWidth - rectWidth;

rectF.right = mWidth - minPx - rectWidth;

rectF.left = mWidth - minPx - (rectWidth * 2);

}

isScroll = true;

invalidate();

if (onScrollBorderListener != null) {

onScrollBorderListener.OnScrollBorder(rectF.left, rectF2.right);

}

}

break;

case MotionEvent.ACTION_MOVE:

float moveX = event.getX();

float scrollX = moveX - downX;

if (isScroll) {

rectF.left = rectF.left + scrollX;

rectF.right = rectF.right + scrollX;

rectF2.left = rectF2.left + scrollX;

rectF2.right = rectF2.right + scrollX;

//滑动到左边最大值

if (rectF.left < 0) {

rectF.left = 0;

rectF.right = rectWidth;

rectF2.left = minPx + rectWidth;

rectF2.right = (rectWidth * 2) + minPx;

}

//滑动至右边最大值

if (rectF2.right > mWidth) {

rectF2.right = mWidth;

rectF2.left = mWidth - rectWidth;

rectF.right = mWidth - minPx - rectWidth;

rectF.left = mWidth - minPx - (rectWidth * 2);

}

scrollChange = true;

invalidate();

if (onScrollBorderListener != null) {

onScrollBorderListener.OnScrollBorder(rectF.left, rectF2.right);// 回调选择的区域

}

}

downX = moveX;

break;

case MotionEvent.ACTION_CANCEL:

case MotionEvent.ACTION_UP:

downX = 0;

isScroll = false;

//invalidate();

if (onScrollBorderListener != null) {

onScrollBorderListener.onScrollStateChange();

}

scrollChange = false;

break;

}

return true;

}

@Override

protected void onDraw(Canvas canvas) {

//TODO 动图托框 绘制

mPaint.setColor(Color.RED);

canvas.drawLine(rectF.left, rectF.top, rectF.left, rectF.bottom, mPaint);

canvas.drawLine(rectF2.right, rectF2.top, rectF2.right, rectF2.bottom, mPaint);

canvas.drawLine(rectF.left, 0, rectF2.right, 0, mPaint);

canvas.drawLine(rectF.left, mHeight, rectF2.right, mHeight, mPaint);

/**

* 添加灰色图层

*/

mPaint.setColor(Color.parseColor("#99313133"));

RectF rectF3 = new RectF();

rectF3.left = 0;

rectF3.top = 0;

rectF3.right = rectF.left;

rectF3.bottom = mHeight;

canvas.drawRect(rectF3, mPaint);

RectF rectF4 = new RectF();

rectF4.left = rectF2.right;

rectF4.top = 0;

rectF4.right = mWidth;

rectF4.bottom = mHeight;

canvas.drawRect(rectF4, mPaint);

}

}

使用方法：直接在布局里面使用当前view,

//监听裁剪器滑动

coverView.setOnScrollBorderListener(new OnScrollBorderListener() {

@Override

public void OnScrollBorder(float start, float end) {

// 游标变更

int startTIme = (int) start;

float result = startTIme / (float) coverView.getWidth();

mCursor = (int) (result * mDuration);

startDurationTime = String.valueOf(start);

}

@Override

public void onScrollStateChange() {

}

});

这里实现原理，主要通过Paint绘制两个不同区域，一个是灰色图层区域，一个是选中封面的框的区域，通过滑动实时绘制改变选择的范围,这里有兴趣的话，可以了解下invalidView跟postInvalidView两者在线程绘制中的区别以及使用场景效率等。

注：可以在这个view的基础上进行延伸，设计改造成仿抖音裁剪视频片段的view。

有疑问可以底下留言，并点个喜欢，一起沟通下

本文标签： android 高仿抖音界面2018