برنامج PercentFrameLayout التعليمي مع مثال في Android Studio
في Android ، تُعد PercentFrameLayout فئة فرعية من FrameLayout تدعم الهامش المستند إلى النسبة المئوية وأبعاد طرق العرض (الزر أو عرض النص أو أي طريقة عرض أخرى).
تمتد فئة PercentFrameLayout من فئة FrameLayout لذا فهي تدعم جميع ميزات وسمات FrameLayout ولها أبعاد نسبية لذا فهي تدعم أيضًا بعض ميزات التخطيط الخطي. بكلمات بسيطة يمكننا القول أن PercentFrameLayout لديه ميزات لكلا التخطيطين مع تقليل تعقيد العرض.
مكتبة الدعم المئوية: توفر مكتبة الدعم في المئة ميزة لتعيين الأبعاد والهوامش في مصطلح النسبة المئوية. يحتوي على اثنين من التخطيطات المبنية مسبقًا - PercentFrameLayout و PercentRelativeLayout . هذه المكتبة سهلة الاستخدام لأنها تحتوي على نفس التخطيط النسبي وتخطيط الإطار الذي نعرفه ، فقط مع بعض الميزات الجديدة الإضافية. في هذه المقالة نناقش فقط PercentFrameLayout.
ملاحظة مهمة - لاستخدام PercentFrameLayout ، قم أولاً بتضمين ملف تبعية مكتبة Percent Support في build.grade (الوحدة: التطبيق).
نصوص Gradle> build.gradle (الوحدة: التطبيق) -> التبعيات الداخلية
dependencies {
compile 'com.android.support:percent:23.3.0'
}
جدول المحتويات
الحاجة إلى PercentFrameLayout:
يوجد في Android الكثير من التخطيطات التي يمكن استخدامها في وقت التطوير ولكن أخيرًا انتهى بنا الأمر بتخطيطاتنا الرئيسية الثلاثة LinearLayout و RelativeLayout و FrameLayout. في العديد من المواقف عندما نحتاج إلى إنشاء عرض معقد ، فإننا نستخدم خاصية الوزن في LinearLayout لتوزيع العرض عبر الشاشات. ولكن أثناء استخدام خاصية الوزن ، يجب أن نكون قد لاحظنا أنه يتعين علينا إضافة عرض حاوية افتراضي لتغليف عرض الطفل الخاص بنا. يمكننا اتباع هذا النهج ولكنه يضيف عرضًا هرميًا إضافيًا في التخطيط الخاص بنا والذي لا فائدة منه باستثناء الاحتفاظ بقيمة مجموع الوزن والعرض الفرعي. بعد تقديم PercentFrameLayout يمكننا وضع أبعاد وهوامش النسبة المئوية في وجهة نظرنا التي تساعدنا على إزالة مشكلة FrameLayout الحالية.
وصف قصير حول FrameLayout في Android:
يعد تخطيط إطار Android أحد أبسط التخطيطات المستخدمة لتنظيم عناصر التحكم في العرض. إنه مصمم لحجب منطقة على الشاشة. يجب استخدام تخطيط الإطار للاحتفاظ بالعرض الفرعي ، لأنه قد يكون من الصعب عرض طرق عرض فردية في منطقة معينة على الشاشة دون تداخل بعضها مع بعض. يمكنك قراءة البرنامج التعليمي الكامل لـ FrameLayout هنا .
ملاحظة مهمة :
في PercentFrameLayout ، ليس من الضروري تحديد سمات layout_width و layout_height إذا حددنا سمة layout_widthPercent. إذا كنا نريد أن يكون العرض قادرًا على شغل مساحة أكبر مما تسمح به النسبة المئوية ، فيمكننا إضافة سمات layout_width و layout_height مع قيمة wrap_content. في هذه الحالة ، إذا كان حجم المحتوى أكبر من حجم النسبة المئوية ، فسيتم تغيير حجمه تلقائيًا باستخدام قاعدة wrap_content. إذا لم نستخدم سمة layout_height و layout_width ، فسيظهر لنا Android Studio علامة خطأ على عنصر في المحرر ولكن سيتم تجاهله تلقائيًا في وقت التشغيل.
رمز PercentFrameLayout الأساسي XML:
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Add Child View's Here... --> </android.support.percent.PercentFrameLayout>
سمات PercentFrameLayout:
الآن دعنا نناقش بعض السمات الشائعة لـ PercentFrameLayout التي تساعدنا على تكوينها في تخطيطنا (xml). إنه يدعم جميع سمات FrameLayout ولكننا نناقش هنا بعض السمات الإضافية فقط.
ملاحظة مهمة - قبل استخدام الكود أدناه ، يرجى تضمين ملف تبعية مكتبة الدعم في build.grade (الوحدة: التطبيق).
نصوص Gradle> build.gradle (الوحدة: التطبيق) -> التبعيات الداخلية
dependencies {
compile 'com.android.support:percent:23.3.0'
}
1. layout_widthPercent: تستخدم هذه السمة لضبط عرض طريقة العرض بالنسبة المئوية.
أدناه قمنا بتعيين قيمة 50٪ لقيمة widthPercent و wrap_content لارتفاع TextView.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent"> <TextView app:layout_widthPercent="50%" android:layout_height="wrap_content" android:textColor="#000" android:textSize="20sp" android:text="AbhiAndroid" /> </android.support.percent.PercentFrameLayout>
2. layout_heightPercent: تستخدم هذه السمة لضبط ارتفاع العرض بالنسبة المئوية.
أدناه قمنا بتعيين قيمة 20٪ لقيمة heightPercent و wrap_content لعرض TextView.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent"> <TextView android:layout_width="wrap_content" android:text="AbhiAndroid" android:textColor="#000" android:textSize="20sp" app:layout_heightPercent="20%" /> </android.support.percent.PercentFrameLayout>
3. layout_marginPercent: تستخدم هذه السمة لتعيين هامش المشاهدة من حيث النسبة المئوية. تحدد هذه السمة نفس الهامش من جميع الجوانب.
أدناه قمنا بتعيين التفاف_كونتينت vlaue للارتفاع والعرض وهامش 20٪ من جميع جوانب TextView.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="AbhiAndroid" android:textColor="#000" android:textSize="20sp" app:layout_marginPercent="20%" /> </android.support.percent.PercentFrameLayout>
4. layout_marginLeftPercent: تُستخدم هذه السمة لتعيين هامش النسبة المئوية على الجانب الأيسر من العرض.
أدناه قمنا بتعيين قيمة wrap_content للارتفاع والعرض وهامش 15٪ على الجانب الأيسر من TextView.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="AbhiAndroid" android:textColor="#000" android:textSize="20sp" app:layout_marginLeftPercent="15%" /> </android.support.percent.PercentFrameLayout>
5. layout_marginTopPercent: تُستخدم هذه السمة لتعيين هامش النسبة المئوية إلى الجانب العلوي من العرض.
أدناه قمنا بتعيين قيمة wrap_content للارتفاع والعرض وهامش 15٪ إلى الجانب العلوي من TextView.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="AbhiAndroid" android:textColor="#000" android:textSize="20sp" app:layout_marginTopPercent="15%" /> </android.support.percent.PercentFrameLayout>
6. layout_marginRightPercent: تُستخدم هذه السمة لتعيين هامش النسبة المئوية على الجانب الأيمن من العرض.
أدناه قمنا بتعيين قيمة wrap_content للارتفاع والعرض وهامش 15٪ على الجانب الأيمن من TextView. في هذا المثال ، قمنا بتعيين الجاذبية الصحيحة لـ TextView حتى نتمكن من التحقق بسهولة من استخدام هذه السمة.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:text="AbhiAndroid" android:textColor="#000" android:textSize="20sp" app:layout_marginRightPercent="15%" /> </android.support.percent.PercentFrameLayout>
7. layout_marginBottomPercent: تُستخدم هذه السمة لتعيين النسبة المئوية للهامش من الجانب السفلي للعرض.
أدناه قمنا بتعيين قيمة wrap_content للارتفاع والعرض وهامش 15٪ من الجانب السفلي من TextView. في هذا المثال ، قمنا بتعيين الجاذبية السفلية لـ TextView حتى نتمكن من التحقق بسهولة من استخدام هذه السمة.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:text="AbhiAndroid" android:textColor="#000" android:textSize="20sp" app:layout_marginBottomPercent="10%" /> </android.support.percent.PercentFrameLayout>
مثال PercentFrameLayout في Android Studio:
فيما يلي مثال على PercentFrameLayout حيث نقوم بإنشاء نموذج تسجيل بثلاثة حقول اسم المستخدم ورقم الهاتف وكلمة المرور. في هذا المثال نأخذ 3 EditText و 1 زر تسجيل. ولهذه الآراء نحدد الأبعاد والهامش في شكل نسبة مئوية. إذا نقر المستخدم على زر التسجيل ، فسيتم عرض رسالة "شكرًا لك" مع اسم المستخدم على الشاشة بمساعدة Toast.
الخطوة 1: إنشاء مشروع جديد وتسميته PercentFrameLayout
الخطوة 2 : افتح نصوص Gradle> build.gradle وأضف تبعية مكتبة الدعم في المئة.
apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "abhiandroid.percentframelayout"
minSdkVersion 16
targetSdkVersion 24
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.1.1'
compile 'com.android.support:percent:23.3.0' // Percent Support Library
}
الخطوة 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة ، نأخذ 3 EditText's و 1 Register Button ، ومن أجل طرق العرض هذه ، قمنا بتعيين الأبعاد والهامش في شكل نسبة مئوية. لاحظ أنه في جميع طرق العرض لم آخذ سمة layout_width ولا تزال تعمل بشكل جيد. يعرض Android Studio سطر خطأ في العنصر ولكن سيتم تجاهله تلقائيًا في وقت التشغيل.
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout 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="match_parent" android:background="@drawable/background"> <!-- 3 EditText's for user Name, Phone No and Password --> <EditText android:id="@+id/userName" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:hint="User Name" android:imeOptions="actionNext" android:singleLine="true" android:textColor="#fff" android:textColorHint="#fff" android:textSize="20sp" app:layout_marginTopPercent="15%" app:layout_widthPercent="80%" /> <EditText android:id="@+id/phoneNo" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:hint="Phone No" android:imeOptions="actionNext" android:inputType="number" android:singleLine="true" android:textColor="#fff" android:textColorHint="#fff" android:textSize="20sp" app:layout_marginTopPercent="25%" app:layout_widthPercent="80%" /> <EditText android:id="@+id/password" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:hint="Password" android:imeOptions="actionDone" android:singleLine="true" android:textColor="#fff" android:textColorHint="#fff" android:textSize="20sp" app:layout_marginTopPercent="34%" app:layout_widthPercent="80%" /> <Button android:id="@+id/register" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@color/colorPrimary" android:text="Register" android:textColor="#fff" android:textSize="20sp" app:layout_widthPercent="80%" /> </android.support.percent.PercentFrameLayout>
الخطوة 4: افتح src -> package -> MainActivity.java
في هذه الخطوة ، نفتح MainActivity ونضيف الكود لبدء طرق العرض (EditText and Button). بعد ذلك نقوم بتنفيذ حدث setOnClickListener على زر التسجيل بحيث تظهر رسالة شكر إذا قام المستخدم بملء جميع الحقول أو تظهر رسالة خطأ إذا كان المستخدم يملأ جميع الحقول أو تظهر رسالة خطأ إذا كانت الحقول فارغة تخبر المستخدم "الرجاء ملء جميع الحقول" معروضة على زر التسجيل. الشاشة باستخدام نخب.
package abhiandroid.percentframelayout;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
Button register;
EditText userName, phoneNo, password;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// init the View's
userName = (EditText) findViewById(R.id.userName);
phoneNo = (EditText) findViewById(R.id.phoneNo);
password = (EditText) findViewById(R.id.password);
register = (Button) findViewById(R.id.register);
// perform setOnClickListener Event on Register Button
register.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (userName.getText().toString().trim().length() > 0 && phoneNo.getText().toString().trim().length() > 0 && password.getText().toString().trim().length() > 0) {
// display a thanks you message with user name
Toast.makeText(getApplicationContext(), "Thank You " + userName.getText().toString(), Toast.LENGTH_SHORT).show();
} else {
// display an error message that fill user name and password
Toast.makeText(getApplicationContext(), "Please Fill All The Fields.!!", Toast.LENGTH_SHORT).show();
}
}
});
}
}
المخرجات :
الآن قم بتشغيل التطبيق وسترى نموذج تسجيل الدخول المصمم باستخدام PercentFrameLayout.