تطبيق Flickr بإستعمال Android الجزء الثاني

imadbelasri Android
AN

فهاد الجزء الثاني من تطبيق Flickr بإستعمال Android غادي نكملو الملفات لي غادي يمكنو من باش تكون عندنا الصفحة ديال البحث والصفحة ديال المعلومات ديال صورة اختارها المستخدم وأيضا غادي نزيدو القوائم لي غادي نحتاجو.


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


1- الملف activity_search.xml

دائما فلمجلد res/layout كنزيد ملف جديد سميه activity_search.xml هادا الملف لي غادي تكون فيه ل Activity ديال البحث ولي غادي تكون فيها لicone لي مني كتضغط عليها كيبان الحقل ديال البحث الكود فيه غير toolbar وغادي نزيدو القائمة من بعد هي لي غادي يكون فيها ل icone والحقل ديال البحث الكود ديال الملف هو:

                                                    
                                                        <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.example.belasri.flickerbrowser.SearchActivity">
    <android.support.design.widget.AppBarLayout
        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="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <include
            layout="@layout/toolbar"
            ></include>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
                                                    
                                                

2- الملف activity_photo_details.xml

دائما فلمجلد res/layout كنزيد ملف جديد سميه activity_photo_details.xml هادا الملف لي غادي تكون فيه ل Activity لي غادي تمكن من عرض التفاصيل ديال صورة اختارها المستخدم فعندنا ScrollView لي كتمكن باش تكون عندك bar فالجنب باش تحرك يلا كانت المعلومات كثيرة وكتخدم لTablette من بعد كاين CardView لي هي لي غادي تحتوي المعلومات الصورة والعناوين متبقى غير ImageView و TextView معروف لاش صالحين الكود ديال الملف هو :

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:statusBarBackground="@color/colorPrimaryDark"
    android:fitsSystemWindows="true"
    tools:context="com.example.belasri.flickerbrowser.PhotoDetails"
    >
    <ScrollView
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="match_parent"
        android:background="@color/WhiteSmoke"
        >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">
            <android.support.design.widget.AppBarLayout
                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="wrap_content"
                android:theme="@style/AppTheme.AppBarOverlay">
                <include
                    layout="@layout/toolbar"
                    ></include>
            </android.support.design.widget.AppBarLayout>
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:background="#FFFFFE"
                app:cardCornerRadius="8dp"
                app:cardPreventCornerOverlap="false"
                android:paddingTop="16dp"
                android:elevation="5dp"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:paddingBottom="16dp"
                    android:orientation="vertical"
                    >
                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
                        <ImageView
                            android:id="@+id/photo"
                            android:layout_gravity="center"
                            android:scaleType="fitXY"
                            android:src="@drawable/placeholder"
                            android:layout_margin="8dp"
                            android:layout_width="match_parent"
                            android:layout_height="300dp" />
                        <TextView
                            android:id="@+id/photo_author"
                            android:layout_gravity="top|center"
                            android:paddingTop="8dp"
                            android:textSize="14sp"
                            android:textColor="@color/Gold"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" />
                    </FrameLayout>
                    <TextView
                        android:id="@+id/photo_title"
                        android:layout_gravity="top|center"
                        android:paddingTop="8dp"
                        android:textSize="18sp"
                        android:layout_marginLeft="8dp"
                        android:layout_marginRight="8dp"
                        android:layout_marginTop="8dp"
                        android:textColor="@color/navy"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />
                    <TextView
                        android:id="@+id/photo_tags"
                        android:layout_gravity="top|center"
                        android:paddingTop="8dp"
                        android:layout_marginLeft="8dp"
                        android:layout_marginRight="8dp"
                        android:layout_marginTop="8dp"
                        android:textSize="14sp"
                        android:textColor="@color/silver"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </ScrollView>
</android.support.design.widget.CoordinatorLayout>

                                                        
                                                    

3- الملف menu_main.xml

فلمجلد res/menu كاين ملف سميتو menu_main.xml هادا الملف لي كيمكن باش تكون عندنا لقائمة فMainActivity لي هي الصفحة لي كتبان فأول مكتفتح التطبيق فيه غادي نزيد القائمة ديالي لي فيها عنصر واحد لي كيخد لicone ديال البحث ولي هي par défaut ديال Android ثم كتعطيه واش يبان ولا لا هنا كنعطيوه always يعني ديما يبان الكود ديال ملف هو :

                                                        
                                                            <menu 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"
    tools:context="com.example.belasri.flickerbrowser.MainActivity">
    <item
        android:id="@+id/search"
        android:orderInCategory="1"
        android:icon="@android:drawable/ic_menu_search"
        android:title="@string/recherche"
        app:showAsAction="always" />
</menu>
                                                        
                                                    

4- الملف menu_search.xml

فلمجلد res/menu زيد ملف جديد سميه menu_search.xml هادا الملف لي كيمكن باش تكون عندنا لقائمة ف SearchActivity لي هي الصفحة لي كتمكن من البحث على صور فيه غادي نزيد القائمة ديالي لي فيها عنصر واحد لي كيخد لicone ديال البحث ولي هي par défaut ديال Android ثم كتعطيه واش يبان ولا لا هنا كنعطيوه always يعني ديما يبان ثم كاين واحد لwidget لي هي par défaut ديال android سميتها SearchView ولي ملي كتضغط على لicone ديال البحث كتعطينا الحقل فين نكتبو الكود ديال ملف هو :

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/search_view"
        android:orderInCategory="1"
        android:icon="@android:drawable/ic_menu_search"
        android:title="@string/recherche"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />
</menu>
                                                        
                                                    

5- الملف searchable.xml

فلمجلد res زيد مجلد جديد سميه xml فيه غادي تزيد ملف جديد searchable.xml لي فيه غادي تكون ل configuration ديال الحقل ديال البحث فيه label ول hint لي هي ل placeholder ديال الحقل يعني الميساج لي كيكون وسط الحقل الكود ديال الملف هو :

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:label="@string/search_label"
    android:hint="@string/hint" >
</searchable>
                                                        
                                                    

دروس ذات صلة

AN

كيفاش نصاوب آلة حاسبة ب Android

فهاد الدرس من سلسلة Android غادي نشوفو كيفاش نقادو واحد الآلة حاسبة بسيطة غادي تمكنا من القيام بع...


AN

كيفاش نصاوب Notes App

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من إمتلاك مذكرة يسج...


AN

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

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


AN

كيفاش تصوب لعبة Brain Train بالاندرويد

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نصاوبو واحد اللعبة بسيطة سميتها Brain Train لعبة بسي...


AN

كيفاش نصاوب Contacts App بالأندرويد الجزء الاول

فهاد الدرس من سلسلة الاندرويد غادي نقادو واحد التطبيق كيمكن من تسجيل Contacts فقاعدة البيانات كما ك...


AN

كيفاش نصاوب Contacts App بالأندرويد الجزء الثاني

فهاد الجزء الثاني من هاد الدرس غادي نكملو الملفات الأخرى ولي غادي تمكن التطبيق ديالنا من الإشتغال ول...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الأول

فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نستعملو ل volley library باش نديرو إتصال مع قاعدة بي...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نقادو الملفات لي غادي يمكننا من الإتصال بقاعدة البيانات والكود...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثالت

فهاد الجزء الثالث من هاد المشروع غادي نزيدو واحد الدومين لي غادي يكون مجاني وغادي يعطينا واحد العنو...


AN

كيفاش تصاوب تطبيق Top 10 Downloads ب Android

فهاد الدرس غادي نصابو مشروع بسيط بandroid عبارة عن تطبيق كيعرض قائمة أفضل عشر تطبيقات مجانية فمتجر آ...