English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

شرح استخدام DrawerLayout في Android

يوجد في android support.v4 عنصر تحكم للدرج DrawerLayout. باستخدام هذا العنصر التحكم، يمكنك فتح أو إغلاق القائمة عبر سحب أفقي على الشاشة، مما يوفر تجربة متميزة للمستخدم.

يقسم DrawerLayout إلى جزأين: قائمة الجانب والمنطقة الرئيسية، يمكن للقائمة الجانبية التوسع والاختفاء بناءً على手势، يمكن تغيير المنطقة الرئيسية بناءً على النقر على القائمة. DrawerLayout هو عنصر تحكم، يشبه LinearLayout، يمكن استخدامه مباشرة.

خصائص DrawerLayout

1،drawerPosition: يحدد الجانب الذي سيسحب منه drawer.

2،drawerWidth : يحدد عرض drawer، أي عرض دقيق أكثر للنافذة عند سحبها من الحافة.

3- keyboardDismissMode: تحديد ما إذا كانت لوحة المفاتيح تستجيب لرفض السحب.

  • 'none' (القيمة الافتراضية), لا يؤثر السحب على لوحة المفاتيح.
  • 'on-drag', بداية السحب، يتم رفض لوحة المفاتيح.

4- onDrawerClose: يتم استدعاء الدالة عند إغلاق خريطة التوجيه.

5- onDrawerOpen: يتم استدعاء الدالة عند فتح خريطة التوجيه.

6- onDrawerSlide: يتم استدعاء الدالة عند التفاعل مع خريطة التوجيه.

7- onDrawerStateChanged: يتم استدعاء الدالة عند تغيير حالة Drawer، ويكون لدى drawer 3 حالات: 

  •  idle -- يعني عدم وجود تفاعل مع خريطة التوجيه
  •  dragging -- يعني أن هناك تفاعلاً مع خريطة التوجيه حالياً
  •  settling -- يعني أن هناك تفاعلاً مع خريطة التوجيه، وأن خريطة التوجيه تقوم بإغلاق أو فتح.

8- renderNavigationView: سيتم رسم خريطة التوجيه على جانب الشاشة، ويمكن سحبها.

مثال

استخدام مكتبات الاعتماد

تجميع 'com.android.support:appcompat-v7:24.2.1' 

ملف التخطيط

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/v4_drawerlayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <FrameLayout
    android:id="@+id/v4_drawerlayout_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/v4_text"
      android:textSize="22sp"
      android:textColor="@color/colorAccent"
      android:gravity="center"
      />
  </FrameLayout>
  <ListView
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:id="@+id/v4_listview"
    android:choiceMode="singleChoice"
    android:background="@android:color/white" />
</android.support.v4.widget.DrawerLayout> 

Activity

public class DrawerActivity extends AppCompatActivity {
  private ListView listView;
  private DrawerLayout drawerLayout;
  private TextView textView;
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.drawer_activity);
    initView();
  drawerLayout.closeDrawer(Gravity.LEFT);
  private void initView()
  {
    listView=(ListView) findViewById(R.id.v4_listview);
    drawerLayout=(DrawerLayout) findViewById(R.id.v4_drawerlayout);
    textView=(TextView) findViewById(R.id.v4_text);
    initDate();
  drawerLayout.closeDrawer(Gravity.LEFT);
  private void initDate(){
    final List<String> list = new ArrayList<String>();
    list.add("网易");
    list.add("腾讯");
    list.add("新浪");
    list.add("搜狐");
    ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list);
    listView.setAdapter(adapter);
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        textView.setText(list.get(position));
        showDrawerLayout();
      drawerLayout.closeDrawer(Gravity.LEFT);
    });
    drawerLayout.openDrawer(Gravity.LEFT);//فتح الجانب الجانبي لا يتم تعيينه بشكل افتراضي
  drawerLayout.closeDrawer(Gravity.LEFT);
  private void showDrawerLayout() {
    if (!drawerLayout.isDrawerOpen(Gravity.LEFT)) {
      drawerLayout.openDrawer(Gravity.LEFT);
    else {
      }
    drawerLayout.closeDrawer(Gravity.LEFT);
  drawerLayout.closeDrawer(Gravity.LEFT);
drawerLayout.closeDrawer(Gravity.LEFT); 

}

النتائج بعد التنفيذ مثل الصورة التالية:عنوان التحميل:

Drawerlayout_jb51.rar

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أن تحصلوا على دعمكم الكبير لتعليم呐喊.

أساسيات التعليمات
توصيات لك