كيفاش نصاوب Navigation Drawer ب أندرويد الجزء الثاني


فهاد الجزء الثاني من كيفاش نصاوب Navigation Drawer ب أندرويد غادي نكملو الملفات لي بقاونا ولي غادي يمكنونا من إضافة القائمة لي قادينا للصفحة الرئيسية كما غادي نزيدو des bibliothèques  ولي غادي يمكنونا من استخدام android material design وغيرها من الإضافات. 

نظرة سريعة بالفيديو

1- الملف MainActivity.java

فالمجلد java وفل package com.example كاين الملف MainActivity.java هادا الملف الرئيسي ديالنا فيه الكود لي كيمكن من إضافة ال toolbar لي قادينا للصفحة الرئيسية من بعد كنسترجع DrawerLayout وكنعطيه لل ActionBarDrawerToggle لي كتزيدنا الbouton لي ملي كنكليكي عليها كتبان القائمة منبعد عندي الكود لي كيسترجع العنصر لي تكليكا عليه فالقائمة بل id ديالو لي عطيناه وكل عنصر ضغطنا عليه كيتعرض ميساج الكود ديال الملف هو:

                                package com.example.belasri.navigationdrawer;

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import static android.R.attr.gravity;
import static android.R.attr.id;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    private Toolbar toolbar;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.navigation_drawer);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        navigationView = (NavigationView) findViewById(R.id.navView);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        navigationView.setNavigationItemSelectedListener(this);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open_drawer,R.string.close_drawer);
        drawerLayout.setDrawerListener(toggle);
        toggle.syncState();
    }

    @Override
    public void onBackPressed() {
        if(drawerLayout.isDrawerOpen(GravityCompat.START)){
            drawerLayout.closeDrawer(GravityCompat.START);
        }else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        switch (id){
            case R.id.inbox:
                Toast.makeText(this, "Boite de récéption", Toast.LENGTH_SHORT).show();
                break;
            case R.id.draft:
                Toast.makeText(this, "Brouillions", Toast.LENGTH_SHORT).show();
                break;
            case R.id.sent:
                Toast.makeText(this, "Envoyés", Toast.LENGTH_SHORT).show();
                break;
            case R.id.spam:
                Toast.makeText(this, "Spams", Toast.LENGTH_SHORT).show();
                break;
            case R.id.all:
                Toast.makeText(this, "Tous les emails", Toast.LENGTH_SHORT).show();
                break;
            case R.id.bin:
                Toast.makeText(this, "Corbeille", Toast.LENGTH_SHORT).show();
                break;
            case R.id.star:
                Toast.makeText(this, "Favoris", Toast.LENGTH_SHORT).show();
                break;
        }
        drawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }
}
                            

2- الملف styles.xml

منبعد كنمشي للمجلد values وكنضيف بعض التغييرات على الملف styles.xml كنعطي لل AppTheme فل parent Theme.AppCompat.Light.NoActionBar فهادشي كيعني بلي ل app ديالنا مغاديش تكون عندها ل AppBar Par défaut وغادي تعطاها toolbar لي قادينا حنا الكود ديال الملف هو :

                                <resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
                            

3- الملف color.xml

فالمجلد res/values كاين ملف colors.xml هادا فيه les couleurs لي غادي نحتاجو الكود ديال الملف هو :


                                <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#009688</color>
    <color name="colorPrimaryDark">#00796b</color>
    <color name="colorAccent">#FF4081</color>
</resources>
                            

4- الملف build.gradle

منبعد غادي تمشي للملف build.gradle ديال ل app وكتزيد les dependecies لي غادي نحتاجو ولي غادي يمكنونا من استعمال Android Material Design وأيضا لي غادي تمكنا باش نزيدو دائرة للصور ديالنا الكود ديال الملف هو:

                                    apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "com.example.belasri.navigationdrawer"
        minSdkVersion 17
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:26.0.0-alpha1'
    compile 'de.hdodenhof:circleimageview:2.1.0'
}
                                


بحث في الموقع


إشترك للتوصل بالجديد