如何将屏幕保存为移动设备中的图像。我正在使用 kotlin 为 android 制作 meme creator 应用程序

Question

我正在制作一个模因创建器应用程序。我将从 firebase 数据库加载 meme，用户将选择其中一个 meme 模板并开始编辑它。为了在模因中输入文本，我使用的是 github 库 implementation 'com.github.hantrungkien:Awesome-Input-Layout:1.0.0' 它允许用户旋转文本视图，用手指移动它等等。但问题是我对 android dev 很陌生。我不知道如何保存背景模因图像以及用户在用户设备或图库中输入的文本。请告诉我详细的步骤，因为我很新。感谢您的每一次帮助。

我的 Meme 编辑活动代码

package com.example.memecreator

import android.app.Activity
import android.content.Context
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.inputmethod.InputMethodManager
import android.widget.Button
import android.widget.RelativeLayout
import com.squareup.picasso.Picasso
import htkien.awesome_input.AwesomeInputLayout
import kotlinx.android.synthetic.main.activity_meme.*


class MemeActivity : AppCompatActivity() {

    val TAG = MainActivity::class.java.simpleName

    var mLayoutRoot: RelativeLayout? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_meme)
        setSupportActionBar(meme_toolbar)
        supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        meme_toolbar.setNavigationOnClickListener {
            finish()
        }

//I am passing intent from last activity and using picasso to load images. Its working fine.


        val intent=intent
        val memeImage=intent.getStringExtra("image")
        Picasso.get().load(memeImage).into(meme_image)
        mLayoutRoot=findViewById<RelativeLayout>(R.id.rl_meme)
        val added=findViewById<Button>(R.id.btn_add_text)
        added.setOnClickListener {
            onClickBtnAddText()
        }
    }



    override fun onBackPressed() {
        if (!mLayoutRoot!!.isFocused) {
            mLayoutRoot!!.requestFocus()
            mLayoutRoot!!.requestFocusFromTouch()
        } else {
            super.onBackPressed()
        }
    }

    private fun onClickBtnAddText() {
        val awesomeLayout = LayoutInflater.from(this).inflate(
            R.layout.layout_awesome_input,
            mLayoutRoot,
            false
        ) as AwesomeInputLayout
        mLayoutRoot?.addView(awesomeLayout)
        awesomeLayout.post {
            val w = mLayoutRoot!!.width
            val h = mLayoutRoot!!.height
            awesomeLayout.x = w / 2 - awesomeLayout.width / 2.toFloat()
            awesomeLayout.y = h / 2 - awesomeLayout.height / 2.toFloat()
            awesomeLayout.requestLayout()
            awesomeLayout.visibility = View.VISIBLE
            showKeyboard(this@MemeActivity)
        }
        awesomeLayout.setDeleteViewListener { awesomeLayout ->
            hideKeyboard(awesomeLayout)
            mLayoutRoot!!.requestFocus()
            mLayoutRoot!!.requestFocusFromTouch()
            try {
                mLayoutRoot!!.removeView(awesomeLayout)
            } catch (e: IndexOutOfBoundsException) {
                Log.e(TAG, "onDeleteView: ", e)
            }
        }
    }

    private fun hideKeyboard(view: View) {
        val imm =
            view.context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.toggleSoftInput(
            InputMethodManager.HIDE_IMPLICIT_ONLY,
            0
        ) // hide
    }

    private fun showKeyboard(activity: Activity) {
        val imm = activity.getSystemService(
            Activity.INPUT_METHOD_SERVICE
        ) as InputMethodManager
        imm.toggleSoftInput(
            0,
            InputMethodManager.HIDE_IMPLICIT_ONLY
        ) // show
    }
}

我的 Meme 编辑 xml 代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_meme"
    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=".MemeActivity">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout_meme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:background="@android:color/white">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/meme_toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorDarkGrey">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/app_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Meme"
                    android:textSize="20sp"
                    android:maxLines="1"
                    android:textStyle="bold"
                    android:textColor="@android:color/white"
                    android:layout_centerVertical="true"/>


            </RelativeLayout>

        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/meme_image"
            android:layout_width="match_parent"
            android:layout_height="420dp"
            android:layout_marginTop="152dp"
            android:scaleType="fitXY"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btn_add_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/meme_image"
            android:text="Add Text"
            android:layout_marginStart="40dp"
            android:layout_marginEnd="40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/meme_image" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</RelativeLayout>

最后是我从 github 库中使用的编辑文本的设计

<?xml version="1.0" encoding="utf-8"?>
<htkien.awesome_input.AwesomeInputLayout
    xmlns:autofit="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:layout_marginTop="152dp"
    android:background="@drawable/button_black_background"
    android:orientation="vertical"
    android:visibility="invisible">

    <ImageButton
        android:id="@+id/button_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@android:color/transparent"
        android:scaleType="fitXY"
        android:src="@drawable/ic_cross" />

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        android:hint="Type"
        android:imeOptions="flagNoExtractUi"
        android:textColor="@color/colorDark"
        android:textColorHint="@color/colorDark"
        android:textSize="16sp" />

</htkien.awesome_input.AwesomeInputLayout>

This is a screenshot image of my edit meme activity screen. I want to save this in the device

Answer 1

让我们稍微修改activity_meme里面的ConstraintLayout布局，

...
...

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/meme_container"
        android:layout_width="match_parent"
        android:layout_height="420dp"
        android:layout_marginTop="152dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/meme_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY" />

    </FrameLayout>

    <Button
        android:id="@+id/btn_add_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/meme_container"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:text="Add Text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/meme_container" />

</androidx.constraintlayout.widget.ConstraintLayout>

...
...

在onCreate内，替换

 mLayoutRoot = findViewById<RelativeLayout>(R.id.rl_meme)

与

mLayoutRoot = findViewById<FrameLayout>(R.id.meme_container)

此布局现在将包含带有文本的 meme 图像。因此我们在mLayoutRoot 上调用drawToBitmap 并保存图像。