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

Posted 2023-02-26

【中文标题】为 android 应用程序创建类似 snapchat 的按钮

【英文标题】：Creating snapchat like button for android app

【发布时间】：2014-02-05 11:35:48

【问题描述】：

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

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

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

我想要像 snapchat 这样的按钮。

这是我当前的视图 xml：

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

    <FrameLayout
        android:id="@+id/camera_preview"
        android:layout_
        android:layout_
        android:layout_weight="1" >

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

    </FrameLayout>

</LinearLayout>

还有我的主要活动 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 应用这样的按钮。

感谢您的宝贵时间。

【问题讨论】：

this 对我来说似乎是一个合理的解决方案

或者你可以使用ViewGroup.bringChildToFront();

【参考方案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 的外观顺序非常重要，因为您无法手动设置视图的 z-index。 z-index 是根据出现的顺序自动设置的。添加到FrameLayout 的第一个视图将是底层（mPreview）。连续的层将建立在它之前的视图之上。

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

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