آموزش برنامه نویسی اندروید با اندروید استودیو (بخش پنجاه و دوم: برنامه نویسی کلیپ بورد (ClipBoard) در اندروید )

استاندارد

در این بخش از برنامه نویسی اندروید، می خواهیم نحوه ساخت کلیپ بورد (ClipBoard) های ساده را به شما آموزش دهیم.

کلیپ بورد (clipboard) یک حافظه ی موقت است که تصاویر،متن و ..در این محیط به طور موقت ذخیره می شوند تا بعدا مورد استفاده قرار بگیرد و یا حذف شود.

این بخش را به صورت پروژه محور، انجام می دهیم.

من یک پروژه به نام Gsm-ClipBoard در اندروید استودیو ایجاد می کنم. به سراغ فایل Layout برنامه یعنی activity_main.xml می روم.

این فایل همان طور که می دانید در مسیر res->Layout می باشد.

کاری که می خواهیم انجام دهیم اینست که در یک EditText یا همان PlainText ، متنی را بنویسیم سپس با استفاده از ابزار دکمه button کپی کنیم. و در EditText دیگر، آن را با دکمه ی Button دیگر، Paste نماییم. پس به چهار ابزار نیاز داریم.

پس دو ابزار PlainText از جعبه ابزار (Palette) انتخاب کرده و به لایه اپلیکیشن می کشم.

سپس دو ابزار دکمه Button نیز به داخل این لایه می کشم. و اسم یکی از آن ها را Copy نام دیگری را Paste می گذارم.

من برای دو دکمه ی Button که ایجاد کردم خاصیت دیگری به اسم onClick اضافه می کنم.

این خاصیت شبیه Listener عمل می کند و باعث می شود که وقتی بر روی دکمه Button کلیک کردیم، دکمه تابعی که به آن در این قسمت معرفی می شود را اجرا نماید.

به عنوان مثال :

android:onClick="copy"

در قسمت جاوای برنامه باید متدی به نام copy وجود داشته باشد تا وقتی بر روی این دکمه کلیک شد، عملیات مربوط به آن اجرا شوند.

پس کد دکمه های ما به این صورت است:

<Button
        android:text="Copy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:onClick="copy"
        android:id="@+id/button" />

    <Button
        android:text="Paste"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/editText2"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_marginTop="80dp"
        android:onClick="paste"
        android:id="@+id/button2" />

کد Layout اپلیکیشن

<?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/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.gsm_developers.clipboard_gsm.MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Copy this text"
        android:ems="10"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="83dp"
        android:id="@+id/editText" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Paste The text here"
        android:ems="10"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/editText"
        android:layout_alignEnd="@+id/editText"
        android:layout_marginBottom="154dp"
        android:id="@+id/editText2" />

    <Button
        android:text="Copy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:onClick="copy"
        android:id="@+id/button" />

    <Button
        android:text="Paste"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/editText2"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_marginTop="80dp"
        android:onClick="paste"
        android:id="@+id/button2" />
</RelativeLayout>

به سراغ فایل MainActivity.java می رویم تا کدهای جاوای برنامه را بنویسیم.

در کلاس MainActivity ، ابتدا یک شی به نام Clipboard از کلاس ClipboardManager ، می سازیم. تا عملیات مربوط به Copy & Paste را بتوانیم با آن مدیریت نماییم.

private ClipboardManager Clipboard;

سپس یک شی به نام Clipdata از کلاس ClipData می سازیم تا مقدار رشته ای که می خواهیم از EditText اول، کپی کنیم را در خود نگه دارد.

private ClipData Clipdata;

همچنین دو شی نیز از کلاس EditText می سازیم تا بتوانیم ابزارهای CopyText و PasteText را به کد جاوای برنامه معرفی کنیم.

private EditText CopyText,PasteText;

در متد ()onCreate این اشیایی که ساختیم را مقدار دهی می کنیم. تا در هنگام اجرای برنامه دارای مقدار باشند.

Clipboard = (ClipboardManager)getSystemService(CLIPBOARD_SERVICE);
CopyText = (EditText)findViewById(R.id.editText);
PasteText = (EditText)findViewById(R.id.editText2);

البته Clipdata که شی از کلاس ClipData بود را در توابعی که می خواهیم بنویسیم، مقدار دهی می کنیم.

در خارج از متد ()onCreate یک تابع برای عملیات کپی مینویسیم. اسم این تابع را copy می گذاریم.

public void copy(View view){
        String text = CopyText.getText().toString();
        Clipdata = ClipData.newPlainText("text", text);
        Clipboard.setPrimaryClip(Clipdata);
        Toast.makeText(getApplicationContext(), "Text Copied",
                Toast.LENGTH_SHORT).show();
    }

کد بالا ابتدا متغیری به نام text را از نوع رشته معرفی کرده و مقدار آن را برابر با متنی که در ابزار EditText اول وجود دارد می گذارد.

سپس در خط دوم، مقدار آن را به عنوان ورودی متد newPlainText برای ذخیره ی نوشته ، در آبجکت Clipdata می ریزیم.

دستور getPrimaryClip که یکی از اجزای آبجکت Clipboard است، کلیپ بورد را برای عملیات کپی و پیس فراخوانی می کند.

مقدار آرگومان ورودی این متد (getPrimaryClip) برای کپی کردن، آبجکت Clipdata که شی از کلاس ClipData می باشد، است که در بالا آن را مقدار دهی کردیم.

در خط آخر نیز، عملیات کپی کردن متن، به کاربر با استفاده از یک Toast اطلاع داده می شود.

در قسمت بعدی یک متد برای Paste کردن به نام paste می نویسیم.

public void paste(View view){
        ClipData neveshte = Clipboard.getPrimaryClip();
        ClipData.Item item = neveshte.getItemAt(0);
        String text = item.getText().toString();
        PasteText.setText(text);
        Toast.makeText(getApplicationContext(), "Text Pasted",
                Toast.LENGTH_SHORT).show();
    }

در کد بالا و اولین خط با استفاده از متد getPrimaryClip ، آبجکت Clipdata که مقدار آن را در کد بالا از ورودی EditText اول گرفته بودیم، فراخوانی کرده و در یک آبجکت جدید به نام neveshte که نوعی از کلاس ClipData می باشد می ریزیم.

در دو خط بعدی مقدار نوشته ای که درون این آبجکت است، گرفته شده و به رشته تبدیل می شود.

در خط چهارم، مقدار این رشته را به عنوان ورودی متن در ابزار EditText دوم ( که با آیدی PasteText آن را می شناسیم)، می ریزیم.

در خط آخر نیز با استفاده از پیغام Toast موفق بودن عملیات به کاربر نشان داده می شود.

کدهای MainActivity.java

package com.gsm_developers.clipboard_gsm;

import android.content.ClipData;
import android.content.ClipboardManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ClipboardManager Clipboard;
    private ClipData Clipdata;
    private EditText CopyText,PasteText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Clipboard = (ClipboardManager)getSystemService(CLIPBOARD_SERVICE);
        CopyText = (EditText)findViewById(R.id.editText);
        PasteText = (EditText)findViewById(R.id.editText2);
    }

    public void copy(View view){
        String text = CopyText.getText().toString();
        Clipdata = ClipData.newPlainText("text", text);
        Clipboard.setPrimaryClip(Clipdata);
        Toast.makeText(getApplicationContext(), "Text Copied",
                Toast.LENGTH_SHORT).show();
    }

    public void paste(View view){
        ClipData neveshte = Clipboard.getPrimaryClip();
        ClipData.Item item = neveshte.getItemAt(0);
        String text = item.getText().toString();
        PasteText.setText(text);
        Toast.makeText(getApplicationContext(), "Text Pasted",
                Toast.LENGTH_SHORT).show();
    }
}

پروژه را Run می کنیم.

بر روی دکمه ی Copy کلیک می کنیم تا نوشته ی درون EditText ، کپی شود.

مشاهده می کنید که با استفاده از یک Toast این موضوع به اطلاع می رسد.

حال بر روی دکمه Paste کلیک می کنیم. مشاهده می کنید که نوشته ی بالا در ابزار EditText دوم، Paste شد.

“آموزش برنامه نویسی اندروید با اندروید استودیو (بخش چهلم: Shape در اندروید(قسمت دوم))

استاندارد

در بخش قبلی از آموزش های اندروید استودیو، کار با Shape را یاد گرفتیم.

فهمیدیم که Shape در اصل به چه کاری می آید. سپس یک Button ایجاد کردیم و سعی کردیم با استفاده از Shape شکل ظاهری آن را تغییر دهیم.

همچنین برای Buttonی که نوشته بودیم، دو شکل ظاهری تعریف کردیم. که اگر بر روی Button کلیک شد، شکل ظاهری آن تغییر کند. و برای آن از Selector استفاده نمودیم.

در این بخش از آموزش های اندروید استودیو، سعی می کنیم در ابتدا یک Button گرد ایجاد نماییم. سپس در ادامه آموزش ، با Gradient کار خواهیم کرد.

ایجاد یک Button گرد

گاهی اوقات نیاز دارید که یک دکمه ی گرد برای اپلیکیشن اندرویدی خود طراحی کنید.

کار را با همان پروژه ی قبلی پیش می بریم. ولی اگر پروژه جدیدی ایجاد کرده اید کافیست به سراغ فایل activity_main.xml یا همان لایه اپلیکیشن اندرویدی بروید و یک دکمه با آیدی Button ایجاد نمایید.

برای ایجاد یک دکمه گرد، به سراغ پوشه drawable در دایرکتوری res می رویم و بر روی آن کلیک راست می کنیم.

سپس از قسمت New به Drawable resource file بروید و بر روی آن کلیک کنید.

در پنجره ای که باز می شود اسم فایل (File Name) را circlebutton ( دکمه گرد ) می گذارم. شما هر نامی دوست دارید به آن بدهید.

حال یک فایل xml به نام circlebutton برای شما در پوشه drawable ایجاد شده است.

در جلسه پیش هم گفته شد، دوستانی که با اکلیپیس کار کرده اند قسمتی برای ایجاد Shape داشته اند. ولی ما به ناچار روش دیگری را انتخاب می کنیم.

بدین منظور بر روی circlebutton.xml کلیک کنید تا محتویات آن به صورت xml برای شما باز شود. مشاهده می کنید که تگی به نام selector وجود دارد. آن تگ را حذف و بنویسید shape تا تگ shape را ایجاد نمایید.

حال می توانید کد های زیر را در تگ shape بنویسید:

<stroke
        android:width="2dp"
        android:color="#4d2929" />
    <corners
        android:radius="20dp"
        />
    <solid
        android:color="#206af2"
        />

    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"
        />

کد کامل circlebutton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >

    <stroke
        android:width="2dp"
        android:color="#4d2929" />
    <corners
        android:radius="20dp"
        />
    <solid
        android:color="#206af2"
        />

    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"
        />

</shape>

همانند بخش قبلی باید به سراغ فایل activity_main.xml برویم و circlebutton.xml را به عنوان آدرس background را به دکمه بدهیم:

android:background="@drawable/circlebutton"

کد کامل دکمه Button من:

<Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/circlebutton"
        android:id="@+id/button" />

اگر به قسمت لایه اپلیکیشن یا همان activity_main.xml در قسمت Design بروید، مشاهده می کنید که شکل دکمه شما به این صورت تغییر کرده است:

آموزش کار با gradient

کار با Gradient نیز بسیار ساده است و اگر روش های قبلی را به خوبی یاد گرفته اید می توانید با Gradient هم به خوبی کار کنید.

Gradient در واقع باعث می شود که دکمه شما به صورت لایه به لایه، رنگ های متفاوتی داشته باشد.

همانند قبل، به سراغ دایرکتوری drawable در res می رویم و بر روی آن کلیک راست می کنیم. سپس یک فایل xml ایجاد می کنیم.

اسم فایلی که من ایجاد کردم، shapebackground است. لازم به ذکر است که این فایل نوعی shape است و محتویات آن در زیر به شما نشان داده شده است:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="14dp"
        />
    <gradient
        android:angle="90"
        android:centerX="35%"
        android:centerColor="#2c96de"
        android:startColor="#E8E8E8"
        android:endColor="#c64444"
        android:type="linear"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="3dp"
        android:color="#254458"
        />

</shape>

در مورد خاصیت های padding , stroke, corner در آموزش های قبل توضیح داده شد.در حال حاضر می خواهیم خاصیت gradient را بررسی کنیم.

همانطور که می بینید در gradient خاصیت startColor برای شروع رنگ و خاصیت EndColor برای پایان دادن به رنگ ایجاد شده است. همچنین از خاصیت angle برای زاویه ای که به رنگ شیب داده می شود استفاده شده است. که شما می توانید با تغییر دادن آن زاویه ی دلخواه را به رنگ لیوت بدهید.خاصیت type را برابر با linear قرار دادیم که به این مفهوم است که شروع شیب از کناره ها باشد.

به سراغ فایل activity_main.xml رفته و در قسمت text برای background دکمه Button کد زیر را می نویسیم: (آدرس shapebackground را به آن می دهیم)

android:background="@drawable/shapebackground"

کد کامل دکمه من:

 

<Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/shapebackground"
        android:id="@+id/button" />

خروجی نهایی به صورت زیر است:

آموزش برنامه نویسی اندروید با اندروید استودیو (بخش سی و هفتم: کار با SeekBar در اندروید)

استاندارد

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

Seekbar کاربرد های مختلفی از جمله تغییر اندازه بلندی صدا، تغییر تغییر سایز فونت، تغییر اندازه تصویر، تغییر قیمت و … را به ما می دهد که به واسطه گرافیکی بودن آن، برنامه ما می تواند کاربری دلچسب تری را داشته باشد.

من یک پروژه به نام Seekbar-Gsm ایجاد می کنم.

سپس در قسمت activity_main.xml به سراغ Paletteها یا همان جعبه ابزار می روم.

یک Seekbar و یک TextView از قسمت Widgetها به لایه اپلیکیشن می کشم.

کد تکست ویو و سیک بار

<TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="188dp"
        android:id="@+id/textView" />

<SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="111dp"
        android:id="@+id/seekBar"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true" />

دلیل این که یک TextView نیز به لایه اپلیکیشن در اندروید استودیو اضافه کردم اینست که می خواهم با استفاده از سیک بار، اندازه فونتی که در TextView مشاهده می کنید، تغییر کند.

اما چگونه؟ برای پاسخ باید به قسمت جاوای اپلیکیشن اندرویدیمان برویم تا بقیه کار را انجام دهیم.

در مرحله اول در داخل تابع ()onCreate ، سیک بار و تکست ویو را با استفاده از دستور final تعریف می کنیم.

final TextView TheText=(TextView) findViewById(R.id.textView);

final SeekBar TheSeekbar=(SeekBar) findViewById(R.id.seekBar);

نکته اضافی :

کتابخانه لازم برای Seekbar، با استفاده از دستور زیر Import می شود.

import android.widget.SeekBar;

به یاد دارید که برای دکمه (Button) ها یک رویداد Listener معرفی می کردیم تا در هنگامی که بر روی دکمه میزنیم، رفتاری که می خواهیم را از خود نشان دهد. در اینجا نیز باید یک رویداد Listener برای سیک بار معرفی کنیم تا در هنگامی که مقدار آن را تغییر می دهیم فونت تکست ویو ما تغییر کند.

بدین منظور از رویداد SeekBarChangeListener، استفاده می کنیم.

TheSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

//کد ما
    }

اگر کد بالا را تعریف کنیم، مشاهده می کنید که توسط اندروید استودیو، خطایی گرفته شده است.

 

بر روی چراغ قرمز رنگی که علامت تعجب بر روی آنست کلیک می کنیم تا علت خطا را جویا شویم.

 

مشاهده می کنید که برای رفع خطا، سه تابع برای ما پیشنهاد داده است. این متدها در داخل تابع Listener سیک بار ما ایجاد می شوند.

onStartTrackingTouch یک رویداد شروع برای لمس سیک بار است.

onStopTrackingTouch یک رویداد توقف برای لمس سیک بار است.

onProgressChanged نیز یک رویداد برای زمانی که نوار سیک بار را تغییر می دهیم است.

هر کدام از متدهای بالا، برای خودشان کدهایی می توانند داشته باشند که در ادامه با تعریف کدهای مربوطه، با عملکرد توابع بالا آشنا خواهید شد.

بر روی Ok کلیک می کنیم تا متدهای بالا برای ما ایجاد شود.

 

 

سه متد تابع setOnSeekBarChangeListener

TheSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        }

        );

ابتدا در داخل تابع setOnSeekBarChangeListener یک متغیر عددی برای سایز فونت معرفی می کنیم.

int fontSize=0;

در داخل متد onProgressChanged ، مقدار fontsize از Progress نوار سیک بار خوانده می شود. Progress نوار سیک بار ما، مقداری را به صورت int از نوار سیک بار میگیرد. در خط اول به برنامه می گوییم که مقدار نوار سیک بار را به داخل متغیر fontsize بریزد.

دستور دوم کاملا اختیاری بوده و یک توست است که برای نمایش سایز فونت در هنگامی که سیک بار را تغییر می دهیم می باشد.

با استفاده از دستور سوم کد زیر، به تکست ویو ما ست می شود.

fontSize=progress;

Toast.makeText(MainActivity.this, "سایز فونت: " +fontSize , Toast.LENGTH_LONG).show();

TheText.setTextSize(fontSize);

در ادامه باید در داخل متد onStopTrackingTouch که متد توقف ما بود،  یک شرط به سیک بار اضافه کنیم. این شرط به برنامه می گوید اگر مقدار int کوچکتر از 30 بود عملکرد ها و یا همان کد هایی که ما ازش میخواهیم را برای ما انجام بدهد.

این کدها، می تواند هر دستوری باشند. مثلا یک توست (Toast).

در این جا ما داخل شرط گفتیم که فونت سایز رو 30 قرار بده و هنگامی که سیک بار درحال حرکت هست مقدار اون رو با فونت سایز هماهنگ کن.

if(fontSize<30)
                {
                    fontSize=30;

                    TheSeekbar.setProgress(fontSize);
                }

کد کامل جاوا MainActivity

package com.gsm_developers.seekbar_gsm;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView TheText=(TextView) findViewById(R.id.textView);

        final SeekBar TheSeekbar=(SeekBar) findViewById(R.id.seekBar);

        TheSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            int fontSize=0;

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

                fontSize=progress;

                Toast.makeText(MainActivity.this, "سایز فونت: " +fontSize , Toast.LENGTH_LONG).show();

                TheText.setTextSize(fontSize);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

                if(fontSize<30)
                {
                    fontSize=30;

                    TheSeekbar.setProgress(fontSize);
                }
            }
        }

        );
    }
}

حال برنامه را اجرا می کنیم و مقدار نوار سیک بار را تغییر می دهیم. مشاهده می کنید که با پیغام Toast ، سایز فونت انتخابی ما نمایش داده می شود و سپس با استفاده از نوار سیک بار سایز فونت تکست ویو ما تغییر می کند.

البته اگر در سیک بار شما مشکل و ناهمگونی مقداری وجود داشت، به دلیل ناهمگونی ، پیشنهاد می شود دستور داخل متد onStopTrackingTouch که در اینجا بیشتر جنبه آموزشی داشت پاک شود. همچنین دستور Toast داخل متد onProgressChanged نیز ، به دلیل تاخیر چند ثانیه ای برای نمایش عدد فونت سایز، بهتر است که پاک شود.

آموزش برنامه نویسی اندروید با اندروید استودیو (بخش سی و ششم: کار با VideoView در اندروید)

استاندارد

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

توجه داشته باشید که ما در این آموزش می خواهیم پخش ویدیو در اپلیکیشن اندرویدی به صورت آفلاین را آموزش دهیم. زیرا نحوه پخش ویدیو به صورت آنلاین تفاوتهایی با پخش ویدیو به صورت آفلاین دارد. و پخش آفلاین ویدیویی را نیز بعدا آموزش خواهیم داد.

من یک پروژه جدید ایجاد می کنم و اسم آن را VideoView-Gsm میذارم.

سپس به activity_main.xml رفته و از Paletteها و در قسمت Images & Media یک ابزار VideoView را بر روی لایه اپلیکیشن خودم می کشم.

در قسمت Properties از ابزار VideoView که به لایه اپلیکیشن کشیدیم، مقدار layout_width را fill_parent می گذاریم تا عرض صفحه را بپوشاند. مقدار layout_height را نیز، wrap_content میگذاریم تا VideoView ارتفاع خودش را با فایل ویدیویی ما هماهنگ کند.

کد VideoView

<VideoView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/videoView"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp" />

به سراغ کدنویسی جاوای برنامه می رویم. فایل MainActivity.xml را باز کرده و طبق مراحل زیر پیش می رویم.

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

قبلا گفته شد که پوشه Res پوشه منابع ما است و عکس ها و فایل های ما برای استفاده در برنامه در این پوشه قرار می گیرد. پس باید یک پوشه جدید به نام Raw در پوشه Res ایجاد کنیم.

برای این کار طبق عکس، بر روی پوشه Res کلیک راست کرده و سپس از قسمت New، بر روی Android Resource Directory کلیک می کنیم.

android-studio-beginners-gsm-developers_86

با باز شدن پنجره ی جدید طبق عکس، Raw را انتخاب کرده و سپس بر روی Ok کلیک می کنیم.

android-studio-beginners-gsm-developers_87

می بینید که پوشه raw در دایرکتوری Res ایجاد شده است.

android-studio-beginners-gsm-developers_88

برای کپی کردن فایل ویدیویی ، طبق عکس میتوانید بر روی پوشه Raw کلیک راست کنید و سپس Show in explorer را بزنید تا پوشه Raw را در explorer برای شما باز کند. سپس فایل ویدیویی خود را در این پوشه کپی کنید.

ویدیویی که من کپی کردم، نامش Myvideo.mp4 است که مشاهده می کنید در پوشه Raw اضافه شده است.

اولین باری که من به همین صورت ادامه دادم. برای همین خواستم در اینجا نیز با همین اشتباه پیش برم تا شما یاد بگیرد.

اگر از اینجا به بعد با نام بالا پیش بروید، با خطا مواجه می شوید. ولی چرا؟

چون که من اولین بار فایل خودم را با حروف بزرگ مثل My که در بالا نوشته بودم، نوشتم. پس در برنامه نویسی اندروید فایل ها در منابع نباید با حروف بزرگ باشند.

در بخش منابع آموزش های اندروید نیز به این نکته اشاره شد.

اسم فایل را به myvideo.mp4 تغییر میدهم.

ابزار VideoView را که در بخش لایه اپلیکیشن، اضافه کرده بودیم در این قسمت معرفی می کنیم. و نام متغیر آن را Video می گذاریم.

VideoView Video = (VideoView) findViewById(R.id.videoView);

برای ابزار VideoView باید کلاس VideoView به برنامه، Import شود:

import android.widget.VideoView;

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

در این جا زیاد لازم نیست وارد این جزئیات شویم، این توضیحات فقط برای این بود که بگوییم ما در این پروژه، به یک رشته احتیاج داریم تا کار بافر را برای ما انجام دهد و ویدیوی ما در آن رشته ذخیره شود. و سپس از همان رشته، VideoView ویدیوی ما را پخش کند.

 متغیر Buffer را از نوع String معرفی می کنیم. برای این کار، کد زیر را می نویسیم:

String Buffer = "android.resource://com.gsm_developers.videoview_gsm/"+R.raw.myvideo;

توجه داشته باشید در کد بالا مقدار android.resource، در واقع محل فایل ویدیویی ما است. که اول این آدرس، نام پکیج و سپس محل قرار گیری فایل ویدیویی ما در پروژه می باشد.

“android.resource:// نام پکیج /”R.محل فایل ما در پروژه

در اینجا نام پکیج، com.gsm_developers.videoview_gsm می باشد. (نام پکیج را می توانید در اولین خط از فایل جاوا MainActivity.java مشاهده نمایید.)

محل فایل ما نیز در پوشه Raw و اسم آن myvideo است. که می شود: R.raw.myvideo

در مرحله بعد، یک متغیر از نوع Uri را معرفی می کنم تا اطلاعات را از رشته بگیرد. این اطلاعات جهت پخش، به VideoView فرستاده می شود.

Uri uri = Uri.parse(Buffer);

حال باید Uri ما که در مرحله قبل آن را معرفی کردیم، توسط VideoURI ست شود.

Video.setVideoURI(uri);

کد زیر نیز، ویدیو شما را پخش می کند.

Video.start();

کد کامل MainActivity

package com.gsm_developers.videoview_gsm;

import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        VideoView Video = (VideoView) findViewById(R.id.videoView);

        String Buffer = "android.resource://com.gsm_developers.videoview_gsm/"+R.raw.myvideo;

        Uri uri = Uri.parse(Buffer);
        Video.setVideoURI(uri);
        Video.start();
    }
}

اگر اپلیکیشینی را که نوشته ایم اجرا نمایید، خروجی زیر را مشاهده می کنید.