كيفاش تصاوب Scanner Mood بالاندرويد

كيفاش تصاوب Scanner Mood بالاندرويد


فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من التعرف على الحالة ديالو واش سعيد غاضب وغيرها من الحالات التطبيق بسيط الهدف منو هو تعرف كيفاش تدير Animation فالأندرويد.

نظرة سريعة بالفيديو

- ملفات ل animation

أول حاجة غادي تديرها غادي تفتح ل Android Studio وغادي تزيد مشروع جديد تسميه ScannerMood من بعد غادي نمشيو للمجلد drawable غادي نزيدو فيه 3 ديال الملفات animation.xml و finger_bg.xml و image_bg.xml لي غادي تكون فيهم ل animation ديالنا الكود النهائي ديال animation.xml هو:

                                <?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item
        android:drawable="@drawable/thumb_finger_prints"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_one"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_two"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_three"
        android:duration="100"
        />

</animation-list>
                            

- الملف finger_bg.xml

الكود النهائي ديال finger_bg.xml هو:

                                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
        android:type="linear"
        android:startColor="#FF110380"
        android:endColor="#FF000000"
        android:centerX="50%"
        android:centerY="50%"
        android:angle="90"/>
</shape>
                            

- الملف image_bg.xml

الكود النهائي ديال image_bg.xml هو:

                                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
        android:type="linear"
        android:startColor="#FF800080"
        android:endColor="#FF000000"
        android:centerX="50%"
        android:centerY="50%"
        android:angle="90"/>
</shape>
                            

- الملف activity_main.xml

الملف activity_main.xml غادي يكون هو الواجهة ديال المشروع ديالنا فيه غادي تكون الأدوات لي غادي تمكن المستخدم من الضغط بالأصبع ديالو و عرض النتيجة لي هي الحالة ديالو الكود النهائي ديال الملف هو :

                                    <?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: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"
    android:background="@drawable/image_bg"
    tools:context="com.example.belasriimad.scannermood.MainActivity">
    <TextView
        android:id="@+id/textExplain"
        android:textSize="20dp"
        android:layout_marginTop="20dp"
        android:textColor="#FFFFFE"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="إضغط جيدا لمعرفة حالتك الآن"/>
    <ImageView
        android:id="@+id/bg_scanner"
        android:src="@drawable/finger_bg"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/textExplain"
        android:layout_width="200dp"
        android:layout_height="304dp" />
    <ImageView
        android:id="@+id/thumbFinger"
        android:src="@drawable/thumb_finger_prints"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/textExplain"
        android:layout_width="200dp"
        android:layout_height="304dp" />
    <TextView
        android:id="@+id/resultTitle"
        android:textSize="18dp"
        android:textStyle="normal"
        android:textColor="#beff"
        android:layout_marginTop="6dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/thumbFinger"
        android:text="حالتك الآن :"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/resultText"
        android:textStyle="normal"
        android:textColor="#FFFFFE"
        android:layout_below="@+id/resultTitle"
        android:layout_centerHorizontal="true"
        android:text=""
        android:layout_marginBottom="10dp"
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

                                

- الملف MainActivity.java

الملف MainActivity.java لي هو الملف الرئيسي غادي يكون فيه الكود لي غادي يمكن التطبيق من الإشتغال أول حاجة كنديرو كنربطو ما بين الصورة و TextView لي فالملف activity_main.xml ول ImageView و TextView لي عندنا ف MainActivity.java وغادي تمكنا من عرض النتيجة من بعد غادي ندير لanimation.xml ك background ديال الصورة لي عندي من بعد غادي ندير جدول فيه حالات غادي يتم العرض ديالها عشوائيا كل مرة ضغط المستخدم بالأصبع ديالو على الصورة منبعد غادي ندير الكود لي غادي يتطبق بعد الضغط مطولا على الصورة ويعرض النتيجة لي هي عبارة عن خلية من الجدول ديالنا الكود النهائي ديال الملف :

                                    package com.example.belasriimad.scannermood;

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.logging.Handler;
import java.util.logging.LogRecord;

public class MainActivity extends ActionBarActivity {
    private TextView result;
    private ImageView thumbImage;
    private AnimationDrawable animation;
    private String[] moodResult;
    private Runnable mRunnable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        result = (TextView) findViewById(R.id.resultText);
        thumbImage = (ImageView) findViewById(R.id.thumbFinger);
        thumbImage.setBackgroundResource(R.drawable.animation);
        animation = (AnimationDrawable) thumbImage.getBackground();
        moodResult = new String[]{
          "أنت سعيد",
                "أنت غاضب ",
                "لا توجد نتيجة",
                "أنت تعيس",
                "أنت حزين",
                "أنت  جميل",
                "مجنون اليوم",
                "حالة يرثى لها"
        };
        thumbImage.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                animation.start();
                showResult();
                return true;
            }
        });
    }
    public void showResult(){
        mRunnable = new Runnable() {
            @Override
            public void run() {
                int rand = (int) (Math.random() * moodResult.length);
                result.setText(moodResult[rand]);
                animation.stop();
            }
        };
        android.os.Handler mHndler = new android.os.Handler();
        mHndler.postDelayed(mRunnable,3000);

    }
}

                                


بحث في الموقع


إشترك للتوصل بالجديد