最近在做视频录像的一个小功能,功能不多,就录像,保存,取消。界面类似微信那样。
界面是这样的,额,因为UI没给我图,右上角是切换摄像头,指纹那里是长按录像。松开录制结束,会出现两个按钮,位置和录像按钮一样,然后动画平移至两边,再把录像隐藏
在界面上就类似这种效果,动画也比较简单。上界面代码,代码都比较简单,可以跳过
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.envcloud.zhuhui.avoid.flood.ui.activity.RecordVideoActivity">
<SurfaceView
android:id="@+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/iv_camera_change"
android:layout_width="27dp"
android:layout_height="27dp"
android:padding="1dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="32dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_refresh"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/iv_back"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/circle_green"
android:layout_marginBottom="24dp"
android:gravity="center"
android:textSize="16sp"
android:visibility="gone"
android:textColor="@color/white"
android:text="返回"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/iv_save"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginBottom="24dp"
android:visibility="gone"
android:gravity="center"
android:textSize="16sp"
android:textColor="@color/white"
android:text="保存"
android:background="@drawable/circle_purple"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/iv_record"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/ic_fingerprint"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/iv_finish"
android:layout_width="25dp"
android:layout_height="16dp"
android:src="@drawable/ic_arrow_down"
app:layout_constraintTop_toTopOf="@+id/iv_record"
app:layout_constraintBottom_toBottomOf="@+id/iv_record"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/iv_record"/>
</android.support.constraint.ConstraintLayout>
后面应该是图片替换文字,所以取名先是iv_xxx了,不影响,iv_finish是一个结束当前activity,iv_back是不保存视频,重新拍摄,其他控件意思应该没什么问题。动画部分的代码:
private void initAnimator() {
showSave = new AnimatorSet();
ObjectAnimator backA = ObjectAnimator.ofFloat(ivBack, "translationX",
0, -150);
ObjectAnimator saveA = ObjectAnimator.ofFloat(ivSave, "translationX",
0, 150);
showSave.play(backA).with(saveA);
showSave.setDuration(600);
showSave.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
playing = false;
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
playing = true;//动画未完成不允许点击事件
}
});
showRecord = new AnimatorSet();
ObjectAnimator backB = ObjectAnimator.ofFloat(ivBack, "translationX",
-150, 0);
ObjectAnimator saveB = ObjectAnimator.ofFloat(ivSave, "translationX",
150, 0);
showRecord.play(backB).with(saveB);
showRecord.setDuration(600);
showRecord.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
playing = false;
visible(true);
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
playing = true;//动画未完成不允许点击事件
}
});
}
然后visible(boolean bool)是在动画开始前和结束后,控件的显示,比方保存和返回在要录像和录像中开始是GONE,录像结束录像按钮和转换摄像头是GONE,一个动画是在录制完成的时候showSave.start();一个是在点了返回后showRecord.start();
结果最后的显示效果是,用uc转gif是真的模糊,将就着看吧:
我懵逼了,这咋回事啊,为什么会显示一部份,像被遮挡了一样,检查了下代码,没东西遮住他,代码位置也是在SurfaceView下面,而且显示的这一部分刚好和录像按钮区域一致。原理没深究,我猜是(我猜的,看看就好,不要把这个作为理解,或者作为依据,这个还是需要看源码的)SurfaceView在实时绘制的时候,除了一开始在屏幕上显示,初始化的控件,会为他们留一片区域,位于SurfaceView的上方,其他区域都是在界面最上层。而那两个按钮,开始是设置成GONE的,界面初始化的时候在屏幕中没有被绘制,因此没有区域为他们预留。解决方法:将一个充满屏幕宽度的,高和按钮一样的,背景是透明的View,放置在按钮那个位置,让SurfaceView在实时绘制的时候,总是留一片区域在下层。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.envcloud.zhuhui.avoid.flood.ui.activity.RecordVideoActivity">
<SurfaceView
android:id="@+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/iv_camera_change"
android:layout_width="27dp"
android:layout_height="27dp"
android:padding="1dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="32dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_refresh"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="70dp"
app:layout_constraintTop_toTopOf="@+id/iv_record"
app:layout_constraintBottom_toBottomOf="@+id/iv_record"/>
<TextView
android:id="@+id/iv_back"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/circle_green"
android:layout_marginBottom="24dp"
android:gravity="center"
android:textSize="16sp"
android:visibility="gone"
android:textColor="@color/white"
android:text="返回"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/iv_save"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginBottom="24dp"
android:visibility="gone"
android:gravity="center"
android:textSize="16sp"
android:textColor="@color/white"
android:text="保存"
android:background="@drawable/circle_purple"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/iv_record"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/ic_fingerprint"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/iv_finish"
android:layout_width="25dp"
android:layout_height="16dp"
android:src="@drawable/ic_arrow_down"
app:layout_constraintTop_toTopOf="@+id/iv_record"
app:layout_constraintBottom_toBottomOf="@+id/iv_record"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/iv_record"/>
</android.support.constraint.ConstraintLayout>
java代码不需要改任何东西,上效果图:
酱酱,居然成功了。点击也是完美,没有冲突什么的!