إنشاء تصميم DrawerLayout بشكل مخصص في الاندرويد ستوديو
نحتاج الى DrawerLayout في اغلب المشاريع التي نعمل عليها وذلك بسبب بساطتها وجمالها فهي عباره عن نافذة جانبيه تكون في حافة الهاتف عندما يتم النقر عليها او سحب الهاتف من النهايه تظهر هذه الواجهه ولكن في الandroid الامر يكون معقد لدى البعض احيانا وانا واحد منهم فلكي تقوم بإناء drawer عليك بالانتقال الى التصميم ومن ثم تقوم بعمل تصميم خاص بها وهذا الامر لا افضله ولكن سوف نقدم لكم اليوم كيف تقوم بعملها بشكل احترافي وايضا تستطيع تخصيصها كما ترغب بالشكل الذي تريده وهذا الشيئ اعتقد انه افضل معك بدلا من التصميم التقليدي الذي يقيدك به البرنامج .
مع إطارات اختبار JUNIT 4 و Winkal UI ، يوفر Android Studio أدوات قوية لمساعدتك في اختبار تطبيقات Android. يمكنك تطوير رمز اختبار واجهة المستخدم باستخدام مسجل اختبار Espresso عن طريق تسجيل ردود أفعالك على البرنامج على الجهاز أو المحاكي. يمكنك استخدام جهاز أو جهاز محاكاة ، أو بيئة تكامل متكاملة ، أو معمل اختبار FireBase لتنفيذ اختباراتك.
تصميم صفحة main لوضع بداخلها الdrawer
ببساطة سوف تقوم بكتابة تصميم الصفحة التي تريدها كما تريد ولكن في الاعلى حاول ان يبدء تصميمك بي DrawerLayout لكي نحيط التصميم بهذه النافذة .
main_activity.xml
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawer_layout"
tools:context=".quran.quran_test.QuranActivity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="الاعدادات"
app:titleTextColor="@color/white"
app:titleCentered="true"
app:navigationIcon="@drawable/ic_setting"
/>
</com.google.android.material.appbar.AppBarLayout>
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/loti"
app:lottie_loop="true"
app:lottie_autoPlay="true"
android:visibility="invisible"
android:layout_gravity="center"
app:lottie_rawRes="@raw/loading_sound"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="@dimen/_80sdp"
android:layout_height="@dimen/_85sdp" />
<ImageView
app:layout_constraintTop_toBottomOf="@id/appBar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@id/bottomBar"
android:id="@+id/img"
android:src="@drawable/logo_app"
android:padding="@dimen/_10sdp"
android:layout_width="match_parent"
android:layout_height="0dp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bottomBar"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/next"
android:text="التالي"
android:padding="@dimen/_10sdp"
android:textStyle="bold"
android:textColor="@color/green_80"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/prev"
android:text="السابق"
android:padding="@dimen/_10sdp"
android:textStyle="bold"
android:textColor="@color/green_80"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="end"
android:textAlignment="textEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer"
app:menu="@menu/menu_drawer"
android:visibility="visible"/>
</androidx.drawerlayout.widget.DrawerLayout>
تصميم واجهة تظهر باعلى ال drawer
الخطوة التاليه وهيا تصميم لمظهر الdrawer يكون بالاعلى يمكنك وضع نص او صورة او تصميم اي شيئ تريد عرضه كما هو موضح .
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textAlignment="center"
android:textSize="@dimen/_22ssp"
android:text="GeeCoders"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
تصميم عناصر الdrawer بداخل الmenu
الان ياتي دور العناصر التي سوف نضعها بداخل الdrawer وبكل بساطة سوف نقوم بتصميم menu وبداخله سوف نضع العناصر التي نريدها ونريد عملها بداخله وهنا قمنا بوضع اكثر من تصميم للمصحف كما هو موضح .
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<item android:title=" مظهر المصحف :">
<menu>
<item
android:id="@+id/nav_maki"
android:title="المصحف المكي" />
<item
android:id="@+id/nav_green"
android:title="المصحف الاخضر" />
<item
android:id="@+id/nav_gold"
android:title="المصحف الذهبي" />
<item
android:id="@+id/nav_blue"
android:title="المصحف الازرق" />
<item
android:id="@+id/nav_moratal"
android:title="المصحف المرتل" />
<item
android:id="@+id/nav_moyaser"
android:title="المصحف الميسر" />
</menu>
</item>
</menu>
التحكم في عناصر الdrawer وتنفيذ الاوامر عند النقر على اي عنصر
الخطوة الاخيره وهيا ان تقوم باستدعاء الكود في صفحة الmain activity وهنا سوف تقوم بعمل استدعاء للtopappbar الذي قمنا بتصميمه وعند النقر على عنصر الmenu سوف يظهر مجموعة العناصر التي قمنا بعملها في الخطوة السابقه واخيرا سوف نقوم بتنفيذ الاوامر المعينه عند النقر على اي عنصر منهم كما هو موضح وتنفيذ العملية التي نريد عملها .
MainActivity.java
private void clickAppBar() {
binding.topAppBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
binding.drawerLayout.openDrawer(GravityCompat.START);
}
});
binding.navigationView.setNavigationItemSelectedListener(new
NavigationView.OnNavigationItemSelectedListener() {
@SuppressLint("NonConstantResourceId")
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
binding.drawerLayout.closeDrawer(GravityCompat.START);
switch (id)
{
case R.id.nav_maki:
quran_style = 0;
preferenceManager.putInteger(Constant.Key_STYLE , 0);
startApp();
break;
case R.id.nav_green:
quran_style = 1;
preferenceManager.putInteger(Constant.Key_STYLE , 1);
startApp();
break;
case R.id.nav_gold:
quran_style = 2;
preferenceManager.putInteger(Constant.Key_STYLE , 2);
startApp();
break;
case R.id.nav_blue:
quran_style = 3;
preferenceManager.putInteger(Constant.Key_STYLE , 3);
startApp();
break;
case R.id.nav_moratal:
quran_style = 4;
preferenceManager.putInteger(Constant.Key_STYLE , 4);
startApp();
break;
case R.id.nav_moyaser:
quran_style = 5;
preferenceManager.putInteger(Constant.Key_STYLE , 5);
startApp();
break;
default:
return true;
}
return true;
}
});
}
لمزيد من المقالات
