Side Menu.Android

القائمة الجانبية

القائمة الجانبية مع بعض الفئات للاختيار.

تحقق من هذا المشروع على dribbble.
تحقق من هذا المشروع على Behance.

بارك الله في أوكرانيا!

عينة

نموذج وملف .aar ملاحظة

يعتمد على استخدام الرسوم المتحركة لـ Ozodrukh للرسوم المتحركة CircularReveal للإصدار 2.3+

استخدام

أولاً، عليك تحميل الوحدة الفرعية للرسوم المتحركة باستخدام أمر git submodule update --init

أو يمكنك إضافة تبعية gradle باستخدام الأمر:

	dependencies {
	    implementation ' com.github.yalantis:Side-Menu.Android:1.0.2 '
	}

.
والأمر:

	repositories {
	    maven {
	        url " https://jitpack.io "
	    }
	}
	dependencies {
	    implementation ' com.github.ozodrukh:CircularReveal:(latest-release)@aar '
	}

لإضافة تبعية gradle، تحتاج إلى فتح build.gradle (في مجلد التطبيق الخاص بك، وليس في مجلد المشروع) ثم نسخ التبعيات وإضافتها هناك في كتلة التبعيات؛

لوحدة CircularReveal

بعد أن يتعين عليك إنشاء تخطيط تراكب خاص ليظهر خلف العرض المتحرك Circular Reveal الحالي. ولإضافة جميع العناصر إلى القائمة، يجب عليك إضافتها جميعًا إلى LinearLayout

< android .support.v4.widget.DrawerLayout
    xmlns : android = " http://schemas.android.com/apk/res/android "
    android : id = " @+id/drawer_layout "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent " >

    < io .codetail.widget.RevealFrameLayout
        android : id = " @+id/conteiner_frame "
        xmlns : android = " http://schemas.android.com/apk/res/android "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent " >
        < LinearLayout
            android : id = " @+id/content_overlay "
            android : layout_width = " match_parent "
            android : layout_height = " match_parent "
            android : orientation = " vertical " />
        < LinearLayout
            android : id = " @+id/content_frame "
            android : layout_width = " match_parent "
            android : layout_height = " match_parent "
            android : orientation = " vertical " />

        < android .support.v7.widget.Toolbar
            android : id = " @+id/toolbar "
            android : layout_height = " wrap_content "
            android : layout_width = " match_parent "
            android : minHeight = " ?attr/actionBarSize "
            android : background = " ?attr/colorPrimary " />

    </ io .codetail.widget.RevealFrameLayout>

    < ScrollView
        android : id = " @+id/scrollView "
        android : scrollbarThumbVertical = " @android:color/transparent "
        android : layout_width = " 80dp "
        android : layout_height = " match_parent "
        android : layout_gravity = " start|bottom " >

        < LinearLayout
            android : id = " @+id/left_drawer "
            android : orientation = " vertical "
            android : layout_width = " 80dp "
            android : layout_height = " wrap_content "
            android : divider = " @android:color/transparent "
            android : dividerHeight = " 0dp "
            android : background = " @android:color/transparent " >
            <!-- Layout of Drawer -->
        </ LinearLayout >
    </ ScrollView >
</ android .support.v4.widget.DrawerLayout>

	ViewAnimator viewAnimator = new ViewAnimator <>( ActionBarActivity . this ,
									new ArrayList < Resourceble >(),
									( LinearLayout ) findViewById ( R . id . left_drawer ), 
									contentFragment , drawerLayout );
	//to open menu you have to override ActionBarDrawerToggle method 
            @ Override
            public void onDrawerSlide ( View drawerView , float slideOffset ) {
                super . onDrawerSlide ( drawerView , slideOffset );
                if ( slideOffset > 0.6 && viewAnimator . getLinearLayout (). getChildCount () == 0 )
                    viewAnimator . showMenuContent ();
            }
			public void onDrawerClosed ( View view ) {
                super . onDrawerClosed ( view );
                viewAnimator . getLinearLayout (). removeAllViews ();
                viewAnimator . getLinearLayout (). invalidate ();
            }

يجب على جميع عناصر القائمة تطبيق واجهة Resourceble للحصول على اسم عنصر القائمة والدقة القابلة للرسم، ويجب على جميع الأجزاء تطبيق ScreenShotable للحصول على لقطة شاشة للجزء

يمكنك تخصيص الرموز التي تضعها في القائمة، أو إضافة المزيد من العناصر. ببساطة عن طريق تغيير القائمة التي تقوم بتحليلها لعرض الرسوم المتحركة. على سبيل المثال:

	 private List < SlideMenuItem > list = new ArrayList <>(); \ the list of menu items
	 
	SlideMenuItem menuItem0 = new SlideMenuItem ( ContentFragment . CLOSE , R . drawable . icn_close );
        list . add ( menuItem0 );
        SlideMenuItem menuItem = new SlideMenuItem ( ContentFragment . BUILDING , R . drawable . icn_1 );   f irst parameter is the id of menu item , the second is the icon resouce
        list . add ( menuItem );
        SlideMenuItem menuItem2 = new SlideMenuItem ( ContentFragment . BOOK , R . drawable . icn_2 );
        list . add ( menuItem2 );
        
        viewAnimator = new ViewAnimator <>( this , list , contentFragment , drawerLayout , this );

اسمحوا لنا أن نعرف!

سنكون سعداء حقًا إذا أرسلت إلينا روابط لمشاريعك التي تستخدم فيها المكون الخاص بنا. فقط أرسل بريدًا إلكترونيًا إلى [email protected] وأخبرنا إذا كان لديك أي أسئلة أو اقتراحات بخصوص الرسوم المتحركة.

ملاحظة: سنقوم بنشر المزيد من الروعة المغلفة في التعليمات البرمجية وبرنامج تعليمي حول كيفية جعل واجهة المستخدم لنظام Android (iOS) أفضل من الأفضل. ابقوا متابعين!

رخصة

 Copyright 2019, Yalantis

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.