5

введите сюда описание изображения

Есть приложение с нижним тулбаром. Нужно сделать окно камеры, которое выезжает снизу по нажатию на левую кнопку. Окно должно выезжать на 1/3 экрана, тулбар должен быть над ним. Сделал камеру в SurfaceView. Как сделать выезжание?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context=".activity.MainActivity">

    <SurfaceView
        android:id="@+id/camera_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone" />

    <RelativeLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#f4f5f7">

        <ImageButton
            android:id="@+id/btn_camera"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="#f4f5f7"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@drawable/camera59" />

        <ImageButton
            android:id="@+id/btn_mic"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="#f4f5f7"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@drawable/microphone85" />

        <ImageButton
            android:id="@+id/btn_cat"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_toLeftOf="@id/btn_mic"
            android:layout_toStartOf="@id/btn_mic"
            android:background="#f4f5f7"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@drawable/square234" />

        <com.superup.smartshelf.utils.ClearableAutoComplete
            android:id="@+id/autocomplete"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/btn_camera"
            android:layout_toLeftOf="@id/btn_cat"
            android:layout_toRightOf="@id/btn_camera"
            android:layout_toStartOf="@id/btn_cat"
            android:background="@drawable/round_rect_shape"
            android:padding="3dp"
            android:singleLine="true" />

    </RelativeLayout>

    <com.superup.smartshelf.view.SnappingRecyclerView
        android:id="@+id/item_list"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_above="@id/toolbar" />



</RelativeLayout>
5
  • 1
    Добавьте фрагмент и при необходимости показывайте его с анимацией, что он выезжает снизу.
    – VAndrJ
    Commented 18 февр. 2016 в 7:52
  • Ваш вопрос не относится к камере, вам нужно анимировать SurfaceView так же, как и любой другой View. Commented 18 февр. 2016 в 8:43
  • @metalurgus можете поделиться примером? Commented 18 февр. 2016 в 8:55
  • ну да, это просто, дольше ваш "тулбар" верстать придется, если вы добавите свою разметку, я быстро могу вам пример сделать. Commented 18 февр. 2016 в 10:04
  • @ShwarzAndrei добавил. SurfaceView - вид, который должен выезжать снизу. сейчас он открывается в фоне по нажатию на первый ImageButton Commented 18 февр. 2016 в 14:18

1 ответ 1

7

Camera_Activity.class

public class Camera_Activity extends AppCompatActivity {

ImageButton btn_camera;
ImageButton btn_mic;
SurfaceView sv;
LinearLayout show_video;

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.anim_footer);

    show_video = (LinearLayout) findViewById(R.id.show_video);
    btn_camera = (ImageButton) findViewById(R.id.btn_camera);
    btn_mic = (ImageButton) findViewById(R.id.btn_mic);
    sv = (SurfaceView) findViewById(R.id.camera_view);


    btn_camera.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (sv.getVisibility() == View.GONE) {
                sv.setVisibility(View.VISIBLE);
                final Animation show = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.show_video);
                show_video.startAnimation(show);
            }
        }
    });

    btn_mic.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (sv.getVisibility() == View.VISIBLE) {
                final Animation hide = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.hide_video);
                hide.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                                sv.setVisibility(View.GONE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                show_video.startAnimation(hide);
            }
        }
    });
  }
}

anim_footer.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/parent"
android:background="@drawable/gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity">

<LinearLayout
    android:id="@+id/show_video"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">

    <RelativeLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#80000000">

        <ImageButton
            android:id="@+id/btn_camera"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@android:drawable/ic_media_play" />

        <ImageButton
            android:id="@+id/btn_mic"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@android:drawable/ic_delete" />

        <ImageButton
            android:id="@+id/btn_cat"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_toLeftOf="@id/btn_mic"
            android:layout_toStartOf="@id/btn_mic"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:src="@android:drawable/ic_lock_lock" />

    </RelativeLayout>

    <SurfaceView
        android:visibility="gone"
        android:background="@drawable/photo"
        android:id="@+id/camera_view"
        android:layout_width="match_parent"
        android:layout_height="300dp" />
</LinearLayout>

</RelativeLayout>

Две анимации:

show_video.xml

<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:interpolator/accelerate_cubic"
android:startOffset="150"
android:fromYDelta="86%"
android:toYDelta="0"
android:fillAfter="true"
android:duration="2000"/>

hide_video.xml

<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:interpolator/bounce"
android:fromYDelta="0"
android:toYDelta="85%"
android:duration="1500"/>

Результат: введите сюда описание изображения

Я старался по мин. задеть Вашу разметку, получается что добавился только LinerLayout, как контейнер для всего этого дела внизу. Иконки стандартные. В целом в коде особого нет ничего, но один момент я думаю стоит объяснить. Анимация translate: так как панелька у нас всегда видна, поэтому требуется выдвигать панель меньше на этот размер, но его подсчитать не будет сложности, даже если динамически будет меняться, просто придется анимацию переписывать программно. Да и в одной из анимации 1% больше, это фича, чтоб старт казался плавней, можете поставить на 85% поймете почему. Остальное вроде все по стандарту.

3
  • Андрей, спасибо. Работает отлично. Камера немного тормозит при открытии, но видимо это из-за ее инициализации. У меня остался только один вопрос. Над выезжающим view у меня находится RecyclerView (id = item_list, в конце моего layout). Мне нужно, чтобы он динамически увеличивался при открывании камеры и уменьшался при закрытии. Commented 22 февр. 2016 в 13:09
  • Попробуйте сформулировать вопрос как новый, я чет не могу сразу понять, что нужно сделать. Желательно с примером кода и изображением желаемого результата. Удачи) Commented 22 февр. 2016 в 13:14
  • ru.stackoverflow.com/questions/496300/… Commented 23 февр. 2016 в 13:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.