آموزش اندروید متریال دیزاین (Material Design)

آموزش اندروید متریال دیزاین (Material Design)

در این  آموزش اندروید به مبحث متریال دیزان می پردازیم ، احتمالا تا به حال عنوان متریال دیزاین را که در ورژن Lollipop اندروید معرفی شده شنیده اید . در متریال دیزاین ابزارهای زیادی همچون متریال تم (Material Theme) ویجکت های (widgets) جدید ، وکتور ها و انیمیشن های سفارشی معرفی شده اند. در صورتیکه علاقه مند به یادگیری این مبحث هستید این مقاله می تواند شروع خوبی برای شما باشد.

دانلود پروژه

این آموزش اندروید مراحل ایجاد تم های سفارشی در متریال دیزاین و همچنین نحوه اعمال  navigation drawer با استفاده از RecyclerView می پردازد.

    1. دانلود و نصب اندروید استدیو
      قبل از شروع آموزش نیاز به دانلود و نصب اندروید استدیو می باشد در صورتیکه اندروید استدیو نصب نیست می توانید برای آموزش و نصب آن از این لینک استفاده کنید . آموزش نصب Android Studio و آشنایی با آن

 

    1. رنگ های سفارشی شده در متریال دیزاین متریال دیزاین ویژگی های مختلفی را جهت سفارشی کردن رنگ ها در اختیار برنامه نویس قرار می دهد اما ما از  5 ویژگی اصلی برای سفارشی کردن تم استفاده خواهیم کرد .
      colorPrimaryDark : از این ویژگی برای اعمال رنگ تیره به notification bar استفاده می شود.
      colorPrimary : رنگ اصلی app را مشخص می کند.این رنگ به پس زمینه toolbar  اعمال می شود.
      textColorPrimary : رنگ اصلی برای متن ها می باشد. از آن برای اعمال رنگ برای عنوان تولبار استفاده خواهد شد.
      windowBackground : رنگ پیش فرض پس زمینه app را مشخص می کند.
      navigationBarColor : برای تعریف رنگ پس زمینه فوتر در navigation bar استفاده می شود.
      آموزش متریال دیزاین(اندروید)

 

  1. ایجاد theme با متریال دیزاین
    ۱- در اندروید استدیو به مسیر File => New Project رفته و تمام مراحل ایجاد پروژه را طی کرده و در هنگام ایجاد اکتیویتی نوع آن را Blank Activity  در نظر بگیرید.
    ۲ – فایل res ⇒ values ⇒ strings.xml را باز کرده و کد های زیر را در آن وارد کنید. این کدها مربوط به تعریف رشته ها در اپلیکیشن می باشند:
strings.xml
<resources>
    <string name="app_name">Material Design</string>
    <string name="action_settings">Settings</string>
    <string name="action_search">Search</string>
    <string name="drawer_open">Open</string>
    <string name="drawer_close">Close</string>
 
    <string name="nav_item_home">Home</string>
    <string name="nav_item_friends">Friends</string>
    <string name="nav_item_notifications">Messages</string>
 
    <!-- navigation drawer item labels  -->
    <string-array name="nav_drawer_labels">
        <item>@string/nav_item_home</item>
        <item>@string/nav_item_friends</item>
        <item>@string/nav_item_notifications</item>
    </string-array>
 
    <string name="title_messages">Messages</string>
    <string name="title_friends">Friends</string>
    <string name="title_home">Home</string>
</resources>

۳- فایل res ⇒ values ⇒ colors.xml را باز کرده و کدهای پایین را در آن وارد کنید این کدها مقادیر رنگ ها را در app ما مشخص می کنند در صورتیکه این فایل colors.xml وجود نداشت یک فایل منبع (resource file) با همین نام ایجاد کنید.

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#F50057</color>
    <color name="colorPrimaryDark">#C51162</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#000000</color>
    <color name="colorAccent">#FF80AB</color>
</resources>

۴- فایل res ⇒ values ⇒ dimens.xml را باز کرده و کدهای پایین را به آن اضافه کنید این کدها مربوط به ابعاد آیتم ها (اکتیویتی ها و راهبر ها و ..) می باشد.

dimens.xml
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_drawer_width">260dp</dimen>
</resources>

۵- فایل styles.xml را از مسیر res ⇒ values باز کرده و استایل های پایین را به آن اضافه کنید. style ها یا شیوه های نمایش در فایل styles.xml  تعریف شده و در تمام ورژن های اندروید وجود دارند همچنین نام این تم تعریف شده را MyMaterialTheme قرار می دهیم .

styles.xml
<resources>
 
    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
 
    </style>
 
    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
     
</resources>

۶-  حال در داخل پوشه res ، پوشه ای با نام values-v21 ایجاد کنید . و سپس در داخل پوشه  values-v21 فایلی با نام styles.xml ایجاد کرده و کدهای استایل زیر را در آن وارد کنید . این استایل ها تنها در ورژن Android Lollipop تعریف شده اند.

styles.xml
<resources>
 
    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>
 
</resources>

۷- تا اینجا بخش های مقدماتی متریال دیزاین را آماده کرده ایم برای اعمال تم ایجاد شده به app فایل AndroidManifest.xml را باز کرده و ویژگی android:theme را در تگ <application> به مقدار زیر تغییر دهید  

android:theme="@style/MyMaterialTheme"

بعد از اعمال تم بالا فایل AndroidManifest.xml باید به شکل زیر باشد .

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialdesign" >
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

حال اگر app را اجرا کنید باید رنگ notification bar  به رنگی که در  تم اعلام کردیم تغییر کرده باشد.
آموزش android متریال دیزاین

 

افزودن اکشن بار (Action Bar) نوار ابزار 
افزودن نوار ابزار toolbar  بسیار ساده است .  تنها کاری که باید انجام شود،  ایجاد یک فایل لایوت برای نوار ابزار toolbar  و افزودن آن به لایوت هایی که قصد نمایش نوار ابزار را در آنها داریم .
۸- یک فایل xml  با نام toolbar.xml در مسیر res ⇒ layout ایجاد کرده  و سپس المان

android.support.v7.widget.Toolbar

را به آن اضافه کنید

toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

فایل لایوت  اکتیویتی اصلی (activity_main.xml) را باز کرده و نوار ابزار toolbar  را با استفاده از تگ<include/> به آن اضافه کنید

activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="vertical">
 
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />
    </LinearLayout>
 
 
</RelativeLayout>

app را اجرا کنید و چک کنید که آیا نوار ابزار نمایش داده می شود یا خیر .

متریال دیزاین اندروید
حال عنوان نوار ابزار را مشخص کرده و یک آیتم به نوار ابزار اضافه خواهیم کرد .
۱۰- آیکن جستجو  را دانلود کرده و آنرا به اندروید استدیو ایمپورت کنید .
۱۱- برای ایمپورت کردن تصویر در اندروید استدیو برروی res راست کلیک کرده , و به  res ⇒ New ⇒ Image Asset   بروید سپس پنجره برای ایمپورت کردن منابع نمایش داده خواهد شد. در قسمت Image File مسیر فایل آیکون که در بخش قبل دانلود کردید را اعلام کنید و در قسمت Asset Type گزینه Action Bar and Tab Icons را انتخاب کرده و همچنین نام آنرا ic_search_action قرار دهید .

آموزش متریال دیزاین
بعد از ایمپورت کردن آیکون فایل menu_main.xml را از مسیر res ⇒ menu باز کرده و گزینه جستجو در منو را طبق کدهای زیر ایجاد کنید.

menu_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
 
    <item
        android:id="@+id/action_search"
        android:title="@string/action_search"
        android:orderInCategory="100"
        android:icon="@drawable/ic_action_search"
        app:showAsAction="ifRoom" />
 
    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />
</menu>

۱۳- حال فایل MainActivity.java را باز کرده و تغییرات زیر را در آن اعمال کنید:
اکتیویتی از AppCompatActivity ارث بری داشته باشد.
– با فراخوانی setSupportActionBar() و پاس دادن شئی toolbar  به ان نوار ابزار را فعال کنید.
با دوباره نویسی متدهای onCreateOptionsMenu() و onOptionsItemSelected() آیتم های نوار ابزار را فعال کنید.

MainActivity.java
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
 
public class MainActivity extends AppCompatActivity {
 
    private Toolbar mToolbar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
 
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }
 
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
 
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
}

بعد از اعمال تغییرات بالا و اجرای app  شما باید آیکون جستجو را در نوار ابزار ببینید.


افزودن Navigation Drawer
افزودن navigation drawer مانند روال های قبل از lollipop می باشد با این تفاوت که به جای استفاده از ListView  برای منو ما از   RecyclerView  متریال دیزاین استفاده خواهیم کرد . در ادامه نشان خواهیم داد که چگونه navigation drawer با استفاده از RecyclerView ایجاد کنیم .
۱۴-در پوشه جاوا سه پکیج activity, adapter, model ایجاد کرده و فایل MainActivity.java را به پکیج اکتیویتی انتقال دهید. این کار برای سازماندهی بهتر پروژه  است .
۱۵- فایل build.gradle که در مسیر ماژول app  قرار دارد باز کرده و وابستگی زیر را به آن اضافه کنید. بعد افزودن این وابستگی به مسیر Build ⇒ Rebuild Project رفته تا کتابخانه های مورد نیاز دانلود شوند.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.+'
}

۱۶٫ در پکیج model  کلاسی با نام NavDrawerItem.java با کدهای زیر ایجاد کنید. در این کلاس سطر های منوی navigation drawer تعریف شده است.

 

package info.androidhive.materialdesign.model;

/**
 * Created by Ravi on 29/07/15.
 */
public class NavDrawerItem {
    private boolean showNotify;
    private String title;


    public NavDrawerItem() {

    }

    public NavDrawerItem(boolean showNotify, String title) {
        this.showNotify = showNotify;
        this.title = title;
    }

    public boolean isShowNotify() {
        return showNotify;
    }

    public void setShowNotify(boolean showNotify) {
        this.showNotify = showNotify;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

۱۷- در مسیر res ⇒ layout یک فایل لایوت xml  با نام nav_drawer_row.xml ایجاد کرده و کد های پایین را به آن اضافه کنید. لایوت ایجاد شده وظیفه رندر کردن هر سطر از منوی navigation drawer را بر عهده دارد. در صورتیکه می خواهید navigation drawer را با توجه به نیازتان تغییر دهید باید این فایل را تغییر دهید در حال حاضر این فایل تنها یک TextView دارد.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true">

    <TextView
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="30dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:textSize="15dp"
        android:textStyle="bold" />

</RelativeLayout>

۱۸- آیکون پروفایل  را دانلود کرده آن را در پوشه drawable کوپی کنید . البته این مرحله اختیاری است و ما از این آیکون برای استفاده در هدر navigation drawer استفاده می کنیم .
۱۹- یک فایل لایوت xml دیگر با نام fragment_navigation_drawer.xml ایجاد کرده و کدهای پایین را به آن اضافه کنید .  از این لایوت برای رندر کردن کامل navigation drawer استفاده خواهیم کرد . این فایل لایوت شامل بخش هدر برای نمایش اطلاعات کاربر و RecyclerView برای نمایش لیست ویو می باشد .

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">


    <RelativeLayout
        android:id="@+id/nav_header_container"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary">

        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/ic_profile"
            android:scaleType="fitCenter"
            android:layout_centerInParent="true" />

    </RelativeLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawerList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/nav_header_container"
        android:layout_marginTop="15dp" />


</RelativeLayout>

۲۰- تا به اینجا ی کار RecyclerView را با توجه به نیاز تغییر دادیم در مرحله بعد نیاز به یک کلاس adapter برای رندر کردن لایوت xml داریم . در پکیج adapter  یک کلاس با نام NavigationDrawerAdapter.java ایجاد کرده و کدهای پایین را به آن اضافه کنید. این  کلاس adapter  برای مرتبط کردن nav_drawer_row.xml و همچنین رندر کردن RecycleView با drawer می باشد .

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.Collections;
import java.util.List;

/**
 * Created by Ravi Tamada on 12-03-2015.
 */
public class NavigationDrawerAdapter extends RecyclerView.Adapter<NavigationDrawerAdapter.MyViewHolder> {
    List<NavDrawerItem> data = Collections.emptyList();
    private LayoutInflater inflater;
    private Context context;

    public NavigationDrawerAdapter(Context context, List<NavDrawerItem> data) {
        this.context = context;
        inflater = LayoutInflater.from(context);
        this.data = data;
    }

    public void delete(int position) {
        data.remove(position);
        notifyItemRemoved(position);
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.nav_drawer_row, parent, false);
        MyViewHolder holder = new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        NavDrawerItem current = data.get(position);
        holder.title.setText(current.getTitle());
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        TextView title;

        public MyViewHolder(View itemView) {
            super(itemView);
            title = (TextView) itemView.findViewById(R.id.title);
        }
    }
}

۲۱- در پکیج activity ، یک فرگمنت با نام FragmentDrawer.java ایجاد کنید. برای ایجاد فرگنت در اندروید استدیو برروی activity راست کلیک کرده و به مسیر activity ⇒ New ⇒ Fragment ⇒ Fragment (Blank بروید و یک نام برای فرگمنت انتخاب کنید.

 

/**
 * Created by Ravi on 29/07/15.
 */

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

import info.androidhive.materialdesign.R;
import info.androidhive.materialdesign.adapter.NavigationDrawerAdapter;
import info.androidhive.materialdesign.model.NavDrawerItem;

public class FragmentDrawer extends Fragment {

    private static String TAG = FragmentDrawer.class.getSimpleName();

    private RecyclerView recyclerView;
    private ActionBarDrawerToggle mDrawerToggle;
    private DrawerLayout mDrawerLayout;
    private NavigationDrawerAdapter adapter;
    private View containerView;
    private static String[] titles = null;
    private FragmentDrawerListener drawerListener;

    public FragmentDrawer() {

    }

    public void setDrawerListener(FragmentDrawerListener listener) {
        this.drawerListener = listener;
    }

    public static List<NavDrawerItem> getData() {
        List<NavDrawerItem> data = new ArrayList<>();


        // preparing navigation drawer items
        for (int i = 0; i < titles.length; i++) {
            NavDrawerItem navItem = new NavDrawerItem();
            navItem.setTitle(titles[i]);
            data.add(navItem);
        }
        return data;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // drawer labels
        titles = getActivity().getResources().getStringArray(R.array.nav_drawer_labels);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflating view layout
        View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
        recyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);

        adapter = new NavigationDrawerAdapter(getActivity(), getData());
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        recyclerView.addOnItemTouchListener(new RecyclerTouchListener(getActivity(), recyclerView, new ClickListener() {
            @Override
            public void onClick(View view, int position) {
                drawerListener.onDrawerItemSelected(view, position);
                mDrawerLayout.closeDrawer(containerView);
            }

            @Override
            public void onLongClick(View view, int position) {

            }
        }));

        return layout;
    }


    public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) {
        containerView = getActivity().findViewById(fragmentId);
        mDrawerLayout = drawerLayout;
        mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActivity().invalidateOptionsMenu();
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                getActivity().invalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                toolbar.setAlpha(1 - slideOffset / 2);
            }
        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mDrawerLayout.post(new Runnable() {
            @Override
            public void run() {
                mDrawerToggle.syncState();
            }
        });

    }

    public static interface ClickListener {
        public void onClick(View view, int position);

        public void onLongClick(View view, int position);
    }

    static class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {

        private GestureDetector gestureDetector;
        private ClickListener clickListener;

        public RecyclerTouchListener(Context context, final RecyclerView recyclerView, final ClickListener clickListener) {
            this.clickListener = clickListener;
            gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
                @Override
                public boolean onSingleTapUp(MotionEvent e) {
                    return true;
                }

                @Override
                public void onLongPress(MotionEvent e) {
                    View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
                    if (child != null && clickListener != null) {
                        clickListener.onLongClick(child, recyclerView.getChildPosition(child));
                    }
                }
            });
        }

        @Override
        public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {

            View child = rv.findChildViewUnder(e.getX(), e.getY());
            if (child != null && clickListener != null && gestureDetector.onTouchEvent(e)) {
                clickListener.onClick(child, rv.getChildPosition(child));
            }
            return false;
        }

        @Override
        public void onTouchEvent(RecyclerView rv, MotionEvent e) {
        }

        @Override
        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

        }


    }

    public interface FragmentDrawerListener {
        public void onDrawerItemSelected(View view, int position);
    }
}

۲۲- در پایان فایل لایوت اکتیویتی اصلی (main activity) را باز کرده و آن را با توجه به کدهای پایین تغییر دهید. در این لایوت با  افزودن  android.support.v4.widget.DrawerLayout به لایوت ،  navigation drawer به نمایش در خواهد امد.
همچنین دقت کنید که مسیر صحیح FragmentDrawer در المان <fragment> اعلام کنید.

 

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


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/container_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar" />
        </LinearLayout>

        <FrameLayout
            android:id="@+id/container_body"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />


    </LinearLayout>


    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:name="info.androidhive.materialdesign.activity.FragmentDrawer"
        android:layout_width="@dimen/nav_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

تا به اینجای کار تمام فایل های لایوت و کلاس های جاوا ایجاد شده و آماده استفاده می باشند. حال باید تغییرات لازم را در MainActivity برای شروع به کار navigation drawer اعمال کنیم.
۲۳- MainActivity.java را باز کرده و تغییرات زیر را در آن اعمال کنید.
> اکتیویتی باید اینتر فیس FragmentDrawer.FragmentDrawerListener را Implement کرده و متد onDrawerItemSelected() را دوباره نویسی کنیم .
> یک نمونه از FragmentDrawer را ایجاد کرده و drawer selected listeners ایجاد شده را برای ان ست کنید.

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener {

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {

    }
}

اکنون اگر app را اجرا کنید  navigation drawer به همراه هدر آن و چند آیتم ایجاد شده در آن را خواهید دید.

android-material-design
 پیاده سازی رویداد انتخاب گزینه های Navigation Drawer
تا به اینجای پروژه Navigation Drawer کار خواهد کرد و به نمایش در خواهد امد اما در صورتیکه یک آیتم از لیست را انتخاب کنید عمل نخواهد کرد به این دلیل که هنوز listener مربوط به آیتم های RecyclerView را پیاده سازی نکردیم.
از آنجایی ما سه آیتم در منوی navigation drawer به نام های Home و Friends و Message داریم نیاز به ایجاد ۳ فرگمنت جدا برای هر یک از آیتم های منو وجود دارد .
۲۴- در قسمت res لایوت ، یک فایل xml با نام fragment_home.xml ایجاد کرده و کدهای زیر را به آن اضافه کنید .

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="info.androidhive.materialdesign.activity.HomeFragment">


    <TextView
        android:id="@+id/label"
        android:layout_alignParentTop="true"
        android:layout_marginTop="100dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="45dp"
        android:text="HOME"
        android:textStyle="bold"/>

    <TextView
        android:layout_below="@id/label"
        android:layout_centerInParent="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12dp"
        android:layout_marginTop="10dp"
        android:gravity="center_horizontal"
        android:text="Edit fragment_home.xml to change the appearance" />

</RelativeLayout>

۲۵- در پکیج activity ، یک فرگمنت با نام HomeFragment.java ایجاد کرده و کدهای پایین را به آن اضافه کنید.

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class HomeFragment extends Fragment {

    public HomeFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_home, container, false);


        // Inflate the layout for this fragment
        return rootView;
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }
}

۲۶- دو فرگمنت دیگر با نام های FriendsFragment.java ، MessagesFragment.java به همراه فایل های لایوت با نام های fragment_friends.xml و fragment_messages.xml ایجاد کرده و کدهای ۲ مرحله قبل را به آن اضافه کنید.
۲۷-
حال فایل MainActivity.java را باز کرده و تغییرات زیر را در ان اعمال کنید:
>
متد displayView() فرگمنت انتخاب شده در navigation menu را نمایش خواهد داد. این متد باید onDrawerItemSelected() را فراخوانی کند تا بر اساس انتخاب کاربر ویو مورد نظر را نمایش دهد.

 

MainActivity.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
 
public class MainActivity extends ActionBarActivity implements FragmentDrawer.FragmentDrawerListener {
 
    private static String TAG = MainActivity.class.getSimpleName();
 
    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
 
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
 
        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);
 
        // display the first navigation drawer view on app launch
        displayView(0);
    }
 
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
 
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
 
        if(id == R.id.action_search){
            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
 
    @Override
    public void onDrawerItemSelected(View view, int position) {
            displayView(position);
    }
 
    private void displayView(int position) {
        Fragment fragment = null;
        String title = getString(R.string.app_name);
        switch (position) {
            case 0:
                fragment = new HomeFragment();
                title = getString(R.string.title_home);
                break;
            case 1:
                fragment = new FriendsFragment();
                title = getString(R.string.title_friends);
                break;
            case 2:
                fragment = new MessagesFragment();
                title = getString(R.string.title_messages);
                break;
            default:
                break;
        }
 
        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.container_body, fragment);
            fragmentTransaction.commit();
 
            // set the toolbar title
            getSupportActionBar().setTitle(title);
        }
    }
}

حال اگر app را اجرا کنید خواهید دید  انتخاب گزینه های   navigation drawer  عمل خواهد کرد.

آموزش متریال دیزاین
متریال دیزاین

 

 

دوره آموزش اندروید

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید

درباره‌ی محمد آذرنیوا

من محمد آذرنیوا، نویسنده و مدرس دوره های برنامه نویسی ، طراحی وب و تحلیل گر پایگاه داده هستم و قصد دارم در این وبسایت مطالب کاربردی در این زمینه را با شما به اشتراک بگذارم ...

همچنین ببینید

گزارش دوره اندروید

گزارش دوره آموزش اندروید – جلسه هشتم

جسله هشتم از دوره آموزش اندروید برگزار گردید . مهندس آذرنیوا مدرس دوره به معرفی …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *