حساوي قيمز نشر 6 أغسطس 2019 أرسل تقرير مشاركة نشر 6 أغسطس 2019 اتمنى تعطيني الفكرة ومثال xml معها وتتكلم عنها اريد افكار عامة واذا عندك شي حلو قوله اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Wael Aljamal نشر 12 سبتمبر 2020 أرسل تقرير مشاركة نشر 12 سبتمبر 2020 لقد بحثت لك عن تصميم جميل في أحد المواقع الرابط . يحوي على تصميم واجهة لتسجيل الدخول تحوي عدة حقول مع صورة خلفية وألوان جميلة (الصورة ضمن المرفقات*). (يحوي الرابط على الكود المصدري الذي يجب عليك تضمينه في مشروعك و إضافة جميع الملفات و الأوامر البرمجية .. dependencies, activity, colors , styles). لدينا اول قسم من التطبيق و هو ال main activity و الممثلة بملف ال xml التالي activity_main.xml: سأضع الشروحات في تعليقات بجبانب الكود المرفق .. <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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" // جعل الطول يطابق الأب اي طول الشاشة android:fitsSystemWindows="true" tools:context="com.appsnipp.formdesigns.MainActivity">MainActivity الربط مع ال <android.support.design.widget.AppBarLayout // تصميم شريط العنوان أعلى شاشة التطبيق android:id="@+id/app_bar" // المعرف الخاص بشريط العنوان android:layout_width="match_parent" // جعل العرض يطابق الأب android:layout_height="@dimen/form_app_bar_height" // الارتفاع هو قيمة من ملف اخر android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay" // الثيمة التي يتبعها التصميم android:background="@drawable/centre_background"> // drawable صورة الخلفية من ملف <android.support.design.widget.CollapsingToolbarLayout // شريط عنوان قابل لتغيير الحجم android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary"// colors.xml جلب قيمة اللون من ملف app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/centre_background"> <ImageView // المكان الذي سنعرض فيه الخلفية _صورةالشاب و الفتاة android:layout_width="wrap_content" // كل القيم التالية لضبط الحجم و المحاذاة android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:layout_marginTop="10dp" // الهوامش من الاعلى اي فراغ عن الحافة العليا android:adjustViewBounds="true" // مراعاة حروف الشاشة المدورة android:cropToPadding="true" // قص الحواف الزائدة android:src="@drawable/enquiry_bk" /> // مصدر ملف الصورة </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" // actionBarSize جلب القيمة من المتحول app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" /> // تضمين تصميم </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> // تضمين التصميم الخاص بفورم التسجيل </android.support.design.widget.CoordinatorLayout> ذلك التصميم هو حاوية تحوي على الفورم الخاص بالتسجيل و الذي يمثل ب content_main عن طريق التعليمة في اخر الملف السابق <include layout="@layout/content_main" /> <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView 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" android:id="@+id/scrollFeed" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.appsnipp.formdesigns.MainActivity" tools:showIn="@layout/activity_main" android:background="@drawable/centre_background" android:focusableInTouchMode="true"> <android.support.v7.widget.CardView // كارت يحوي على العناصر الأخرى android:id="@+id/personalDetailsCard" // المعرف الخاص بالكارت style="@style/centreLocatorCardDesign" // التصميم android:layout_marginTop="10dp" // هوامش من الأعلى app:cardCornerRadius="16dp" app:cardElevation="10dp"> <LinearLayout // تصميم يحوي على عدة عناصر بتنسيق خطي متتالي android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" // محاذاة للوسط android:focusableInTouchMode="false" android:orientation="vertical" // شعاع التوجيه عمودي ليعرض الأبناء فوق بعضهم البعض android:padding="20dp"> // هوامش داخيلية لتباعد الأبناء عن الحافة الخارجية للكارت <android.support.design.widget.TextInputLayout // العنصر الذي نكتب به الاسم اي حقل الادخال android:id="@+id/txtInputName" // المعرف الخاص بحقل ادخال الاسم android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/txtName" // المعرف الخاص بحقل ادخال الاسم style="@style/modifiedEditText" // تصميم مسبق android:hint="@string/name" // نص افتراضي مساعد android:singleLine="true" /> </android.support.design.widget.TextInputLayout> // الحقل التالي مثل السابق لكن خاص بادخال حقل الايميل (البريد الالكتروني) <android.support.design.widget.TextInputLayout android:id="@+id/txtInputEmail" // المعرف الخاص بحقل ادخال البريد android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/txtEmail" // المعرف الخاص بحقل ادخال الاسم style="@style/modifiedEditText" android:ems="10" android:hint="@string/email" // نص افتراضي مساعد android:inputType="textEmailAddress" /> </android.support.design.widget.TextInputLayout> // حقل الادخال المخصص لرقم الجوال <android.support.design.widget.TextInputLayout android:id="@+id/txtInputMob" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/txtMob" style="@style/modifiedEditText" android:hint="@string/mobno" android:inputType="phone" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/txtInputReg" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/txtReg" style="@style/modifiedEditText" android:hint="@string/reg_no" /> </android.support.design.widget.TextInputLayout> // ادخال نص كتوصيف للدعم الفني <android.support.design.widget.TextInputLayout android:id="@+id/txtInputFeedback" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/txtFeed" style="@style/modifiedEditText" android:hint="@string/message" android:inputType="textMultiLine" android:minLines="2" /> </android.support.design.widget.TextInputLayout> // الزر المسئول عن ارسال الفورمة <Button android:id="@+id/btnSend" // المعرف الخاص بحقل ادخال الاسم android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="right" android:background="@drawable/centre_button" android:text="@string/send" // النص الذي يظهر على الزر android:textColor="@color/whiteTextColor" /> </LinearLayout> </android.support.v7.widget.CardView> </android.support.v4.widget.NestedScrollView> XML تقويم بتوصيف البنية للتصميم على شكل بنية شجرية اي كل عنصر يمكن أن يحتوي على عناصر أخرى و يمكن أن يرث (يكسب صفات) الأب مثل خاصية الطول و العرض و التصميم و الألوان .. الملف المسؤول عن قيم الألوان التي نستخدمها بالتطبيق <!--colors for modern ui--> <color name="whiteTextColor">#fff</color> <color name="primaryTextColor">#00a5ff</color> مثال لجلب قيمة لونية محددة : color/whiteTextColor@ أرفقت بنية لمشروع أندرويد يحوي على الهرمية و مواضع وضع الملفات .. قم بتجربة هذا التصميم و أخبرنا بالنتائج و سوف نجيب على أي أسئلة إضافية. تحياتي يوجد مواقع توفر تصاميم جميلة و مميزة يمكنك الاستغفادة منها: تصاميم أندرويد عمل مؤثرات بصرية جميلة و أنصحك بالاطلاع على مكتبة التصميمات الشهيرة Material design الخاصة ب غوغل لتصميم الأندرويد Material Design اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
حساوي قيمز
اتمنى تعطيني الفكرة ومثال xml معها وتتكلم عنها
اريد افكار عامة واذا عندك شي حلو قوله
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.