سلامی دوباره خدمت همه ی عزیزان سایت کد ایت ، با آموزشی دیگر از سری آموزش کاتلین در خدمت شما عزیزان هستیم . امروز قصد دارم یک مبحثی را برای شما آموزش دهم که به نظر خودم یک موضوع مهم میباشد. و برای اینکه کاربران شما برنامه اندرویدی شما را بهتر بشناسند لازم است رعایت کنید . برای این کار کتابخانه TapTargetView در کاتلین را به کار میبریم. اینکار مانند ساختن ساخت راهنما برای اندروید میباشد .

کتابخانه TapTargetView در کاتلین برای ساخت راهنما برای برنامه اندرویدی

فرض کنید یک برنامه اندرویدی ساخته اید و در آن برنامه ویژگی استفاده کرده اید و دوست دارید که کاربران برنامه شما از این ویژگیها استفاده کنند . ولی اگر مخاطبان شما اصلا از این ویژگی استفاده نکرده باشند و یا اصلا نداند که این ویژگی دربرنامه شما وجود دارد . در این حالت چه اتفاق میافتد ؟ به نظر من که یه اتفاق خیلی بدی هست . و لازم است من برنامه نویس این ویژگی را در برنامه خودم نشان دهم . در واقع من برای برنامه ی خودم یک راهنما درست میکنیم.

نگران نباشید چون امروز من قصد دارم برای شما آموزش دهم که چگونه این ویژگیها را برای کاربران خودتون نشان دهید و همچنین توضیح دهید که این ویژگی برای چه کاری هست . برجسته کردن قابلیت اپلیکیشن در کاتلین یک کار مهمی هست که توسعه دهندگان کاتلین باید آن را رعایت کنند . برای این کار ما از کتابخانه TapTargetView در کاتلین استفاده میکنیم .

ساخت راهنما برای اندروید

پیاده سازی TapTargetView برای برجسته کردن ویژگی های استفاده شده در برنامه

ما طبق روال آموزش قبلیمون این مبحث را با یک پروژه خدمت شما عزیزان آموزش میدهیم . ابتدا یک پروژه به اسم TapTargetView ایجاد مینماییم. بعد از این کار ما در ابتدای این پروژه باید کتابخانه تب تارگت ویو در کاتلین را باید به پروژه خودمون اضافه کنیم . برای این کار وارد بخش build.gradle (Module:app) شوید و کتابخانه TapTargetView در کاتلین را مطابق زیر وارد سازید .

 implementation 'com.getkeepsafe.taptargetview:taptargetview:1.13.0'

1	implementation 'com.getkeepsafe.taptargetview:taptargetview:1.13.0'

ابتدا یک ایکتیویتی به اسم ActivityMain ایجاد میکنیم و code لایه xml آن را به صورت زیر وارد سازید .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="اکتیویتی دوم"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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=".MainActivity">

<Button

android:id="@+id/btn"

android:layout_width="150dp"

android:layout_height="wrap_content"

android:text="اکتیویتی دوم"

android:layout_centerInParent="true"

</RelativeLayout>

در کد بالا یک دکمه گذاشتیم که با کلیک روی آن به اکتویتی دوم میروید و روی این دکمه نیز رویداد TapTargetView را اعمال کردیم . code بخش Main به صورت زیر میباشد .

package com.example.retrofit
import com.getkeepsafe.taptargetview.TapTarget
import com.getkeepsafe.taptargetview.TapTargetView

class ShowCase : AppCompatActivity() {
    lateinit var btn: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btn = findViewById(R.id.btn)
        TapTargetView.showFor(this,
            TapTarget.forView(btn, "این یک Button می باشد", "با فشار دادن این Button به اکتیویتی دوم می روید.")
                .outerCircleAlpha(0.96f)
                .outerCircleColor(R.color.teal_200)
                .targetCircleColor(R.color.white)
                .titleTextSize(25)
                .descriptionTextSize(20)
                .descriptionTextColor(R.color.black)
                .textTypeface(Typeface.SANS_SERIF)
                .drawShadow(true)
                .cancelable(false)
                .tintTarget(true)
                .transparentTarget(true)
                .targetRadius(60), object : TapTargetView.Listener() {
                override fun onTargetClick(view: TapTargetView?) {
                    super.onTargetClick(view)
                    val intent: Intent = Intent(applicationContext, SecondActivity::class.java)
                    startActivity(intent)
                }
            }
        )
    }
}

package com.example.retrofit

import com.getkeepsafe.taptargetview.TapTarget

import com.getkeepsafe.taptargetview.TapTargetView

class ShowCase : AppCompatActivity() {

lateinit var btn: Button

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

btn = findViewById(R.id.btn)

TapTargetView.showFor(this,

TapTarget.forView(btn, "این یک Button می باشد", "با فشار دادن این Button به اکتیویتی دوم می روید.")

.outerCircleAlpha(0.96f)

.outerCircleColor(R.color.teal_200)

.targetCircleColor(R.color.white)

.titleTextSize(25)

.descriptionTextSize(20)

.descriptionTextColor(R.color.black)

.textTypeface(Typeface.SANS_SERIF)

.drawShadow(true)

.cancelable(false)

.tintTarget(true)

.transparentTarget(true)

.targetRadius(60), object : TapTargetView.Listener() {

override fun onTargetClick(view: TapTargetView?) {

super.onTargetClick(view)

val intent: Intent = Intent(applicationContext, SecondActivity::class.java)

startActivity(intent)

}

)

}

در کدنویسی بخش اکتیویتی main ما از رویداد TapTargetView در کاتلین استفاده کردیم . ما در قسمت بالا به شما نشون دادیم که چگونه برای تب تارگت ویو خودمون عنوان و توضیحات قرار دهیم . همچنین چگونه سایز آن ها را تغییر دهیم و چه نوع فونتی برای متن تب تارگت ویو خودمون به کار ببریم و کار زیادی که شما میتونید به روی TapTargetView اعمال نمایید.

شاید شما بخواهید برای چندین ویجت به صورت پشت سر هم و ترتیبی TapTargetView راپیاده سازی کنید که خیلی مواقع نیاز پیدا میکنید. برای این کار ما در SecondActivity چند button قرار دادیم و از TapTargetSequence استفاده کردیم تا این رویداد را به روی چندین ویجت خودمون به صورت ترتیبی اعمال کنیم . کد این بخش نیز مانند زیر می باشد .

activity_second.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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=".SecondActivity">

    <Button
        android:layout_margin="25dp"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_centerVertical="true"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="25dp"
        />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

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=".SecondActivity">

<Button

android:layout_margin="25dp"

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button1"

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button2"

android:layout_centerVertical="true"

<Button

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button3"

android:layout_alignParentRight="true"

android:layout_alignParentBottom="true"

android:layout_margin="25dp"

</RelativeLayout>

SecondActivity.

import android.os.Bundle
import com.getkeepsafe.taptargetview.TapTarget
import com.getkeepsafe.taptargetview.TapTargetSequence
import com.getkeepsafe.taptargetview.TapTargetView

class SecondActivity : AppCompatActivity() {
    lateinit var btn1: Button
    lateinit var btn2: Button
    lateinit var btn3: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_second)
        btn1 = findViewById(R.id.button)
        btn2 = findViewById(R.id.button2)
        btn3 = findViewById(R.id.button3)
        TapTargetSequence(this).targets(
            TapTarget.forView(btn1, "button1", "button1")
                .outerCircleAlpha(0.96f)
                .outerCircleColor(R.color.teal_200)
                .targetCircleColor(R.color.white)
                .titleTextSize(25)
                .descriptionTextSize(20)
                .descriptionTextColor(R.color.black)
                .textTypeface(Typeface.SANS_SERIF)
                .drawShadow(true)
                .cancelable(false)
                .tintTarget(true)
                .transparentTarget(true)
                .targetRadius(60),
            TapTarget.forView(btn2, "button2", "button2")
                .outerCircleAlpha(0.96f)
                .outerCircleColor(R.color.teal_200)
                .targetCircleColor(R.color.white)
                .titleTextSize(25)
                .descriptionTextSize(20)
                .descriptionTextColor(R.color.black)
                .textTypeface(Typeface.SANS_SERIF)
                .drawShadow(true)
                .cancelable(false)
                .tintTarget(true)
                .transparentTarget(true)
                .targetRadius(60),
            TapTarget.forView(btn3, "button3", "button3")
                .outerCircleAlpha(0.96f)
                .outerCircleColor(R.color.teal_200)
                .targetCircleColor(R.color.white)
                .titleTextSize(25)
                .descriptionTextSize(20)
                .descriptionTextColor(R.color.black)
                .textTypeface(Typeface.SANS_SERIF)
                .drawShadow(true)
                .cancelable(false)
                .tintTarget(true)
                .transparentTarget(true)
                .targetRadius(60)
        ).listener(object : TapTargetSequence.Listener {
            override fun onSequenceCanceled(lastTarget: TapTarget?) {
            }

            override fun onSequenceFinish() {
                Toast.makeText(applicationContext, "Sequence is finish", Toast.LENGTH_LONG).show()
            }

            override fun onSequenceStep(lastTarget: TapTarget?, targetClicked: Boolean) {
                Toast.makeText(applicationContext, "Create!", Toast.LENGTH_LONG).show()

            }

        }).start()


    }
}

import android.os.Bundle

import com.getkeepsafe.taptargetview.TapTarget

import com.getkeepsafe.taptargetview.TapTargetSequence

import com.getkeepsafe.taptargetview.TapTargetView

class SecondActivity : AppCompatActivity() {

lateinit var btn1: Button

lateinit var btn2: Button

lateinit var btn3: Button

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_second)

btn1 = findViewById(R.id.button)

btn2 = findViewById(R.id.button2)

btn3 = findViewById(R.id.button3)

TapTargetSequence(this).targets(

TapTarget.forView(btn1, "button1", "button1")

.outerCircleAlpha(0.96f)

.outerCircleColor(R.color.teal_200)

.targetCircleColor(R.color.white)

.titleTextSize(25)

.descriptionTextSize(20)

.descriptionTextColor(R.color.black)

.textTypeface(Typeface.SANS_SERIF)

.drawShadow(true)

.cancelable(false)

.tintTarget(true)

.transparentTarget(true)

.targetRadius(60),

TapTarget.forView(btn2, "button2", "button2")

.outerCircleAlpha(0.96f)

.outerCircleColor(R.color.teal_200)

.targetCircleColor(R.color.white)

.titleTextSize(25)

.descriptionTextSize(20)

.descriptionTextColor(R.color.black)

.textTypeface(Typeface.SANS_SERIF)

.drawShadow(true)

.cancelable(false)

.tintTarget(true)

.transparentTarget(true)

.targetRadius(60),

TapTarget.forView(btn3, "button3", "button3")

.outerCircleAlpha(0.96f)

.outerCircleColor(R.color.teal_200)

.targetCircleColor(R.color.white)

.titleTextSize(25)

.descriptionTextSize(20)

.descriptionTextColor(R.color.black)

.textTypeface(Typeface.SANS_SERIF)

.drawShadow(true)

.cancelable(false)

.tintTarget(true)

.transparentTarget(true)

.targetRadius(60)

).listener(object : TapTargetSequence.Listener {

override fun onSequenceCanceled(lastTarget: TapTarget?) {

}

override fun onSequenceFinish() {

Toast.makeText(applicationContext, "Sequence is finish", Toast.LENGTH_LONG).show()

}

override fun onSequenceStep(lastTarget: TapTarget?, targetClicked: Boolean) {

Toast.makeText(applicationContext, "Create!", Toast.LENGTH_LONG).show()

}

}).start()

}

در اینجا آموزش ما به پایان میرسد . ما یاد گرفتیم که چگونه کتابخانه TapTargetView در کاتلین پیاده سازی میشود همچنین برجسته کردن ویژگی های اپلیکیشن با TapTargetView را یاد گرفتیم . و اینکه تونستیم پشت سر هم و ترتیبی برای ویجت های مختلف از TapTargetView کمک بگیریم . خروجی project ما به شکل زیر میباشد .

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

اشتراک‌گذاری

جاوا اسکریپت نوشته قبل

انیمیشن در کاتلین | استفاده از انیمیشن Yoyo در کاتلین برای زیباسازی اپلیکیشن ما نوشته بعد

فرشید حبیبی

من فرشید حبیبی هستم، یک برنامه نویس موبایل با بیش از 5 سال تجربه. من علاقه زیادی به برنامه نویسی دارم و در این زمینه به طور مداوم در حال یادگیری و پیشرفت هستم. در حال حاضر، به عنوان یک برنامه نویس اندروید در یک شرکت معتبر مشغول به کار هستم و همچنین یک وبسایت آموزشی به نام کدایت را اداره می کنم. در کدایت، به تولید محتوای آموزشی در مورد برنامه نویسی اندروید و وب می پردازیم. هدف من از ایجاد این وبسایت، کمک به سایر برنامه نویسان اندرویدی برای یادگیری و پیشرفت در این زمینه است.