android - 为 Android 应用程序创建类似按钮的 snapchat

Question

您好，我正在创建一个相机应用，我的第一个 Activity 类似于 snapchat。

我已经学习了 android 相机开发教程 ( https://developer.android.com/guide/topics/media/camera.html )。

但不幸的是，它没有涵盖我想要的特定类型的按钮(类似 snapchat 的按钮)。

我想要像 snapchat 这样的按钮。

这是我当前的 View xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <FrameLayout
        android:id="@+id/camera_preview"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

    <Button
        android:id="@+id/button_capture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_vertical|center_horizontal"
        android:text="capture" />

    </FrameLayout>

</LinearLayout>

还有我的主要 Activity java:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Remove title bar
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);

    // Remove notification bar
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_main);

    // Create an instance of Camera
    mCamera = getCameraInstance(getApplicationContext());

    // Create our Preview view and set it as the content of our activity.
    mPreview = new CameraPreview(this, mCamera);
    FrameLayout preview = (FrameLayout) findViewById(R.id.camera_preview);
    preview.addView(mPreview);

    // Add a listener to the Capture button
    Button captureButton = (Button) findViewById(R.id.button_capture);
    captureButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // get an image from the camera
            mCamera.takePicture(null, null, mPicture);
        }
    });

}

我相信问题出在渲染 xml 布局之后，教程添加

preview.addView(mPreview);

在布局上，我相信相机预览是在按钮上绘制的。

我只想到了两个解决方案。

一种是以编程方式在 preview.addView(mPreview) 之后添加一个按钮；线。或者如果我可以在按钮的 xml 代码上设置某种 z-index？

snapchat 按钮是图像按钮？我想我的总体问题是如何创建像 snapchat 应用程序这样的按钮。

感谢您的宝贵时间。

Answer 1

以编程方式将 captureButton 添加到 FrameLayout，方法与将 mPreview 添加到布局相同。

// Add mPreview to the layout first
// so we can build on top of it
FrameLayout preview = (FrameLayout) findViewById(R.id.camera_preview);
preview.addView(mPreview);

// Then captureButton will go on top of mPreview
Button captureButton = new Button(this);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
    FrameLayout.LayoutParams.WRAP_CONTENT,
    FrameLayout.LayoutParams.WRAP_CONTENT,
    Gravity.CENTER_VERTICAL | Gravity.RIGHT
);
captureButton.setLayoutParams(params);
preview.addView(captureButton);

外观顺序对于 FrameLayout 非常重要，因为您无法手动设置 View 的 z-index。 z-index 是根据出现的顺序自动设置的。第一个添加到 FrameLayout 的 View 将是底层 (mPreview)。连续层将构建在之前的 View 之上。

至于使按钮半透明，我建议创建一个可绘制对象并执行类似的操作

Drawable cameraButton = getResources().getDrawable(R.drawable.drawableName);
cameraButton.setAlpha(170);
captureButton.setBackground(cameraButton);