Bu dersimizde navigation drawer konusuna giriş yapıyoruz.
Öncelikle navigation drawer nedir sorusunu cevapladıktan sonra gerçekleştirme işlemlerini adım adım yapıyoruz. Navigation drawer zor veya karmaşık bir konu değil ama bu bölümün videoları sayıca fazla, çünkü draweın içinde recyclerview kullandık. Basit bir örnek için navigation drawerın içinde navigation view kullanılabilirdi, ama recycler konusuna daha da hakim olmak için ben bu örneği detalı yapmaya karar verdim.
Navigation view konusuna ilerleyen videolarda değineceğiz.
Navigation drawer aslında bir fragment , ve kendi layoutu var. Özel olarak yazdığımız kodlarla biz bunu kenarda bekleyecek şekilde tasarlıyoruz(fragmentin özelliklerine layout_gravity=start diyerek) ve kullanıcı toggle butona bastığında veya el ile layoutu çektiğinde ekrana geliyor. Main activity layoutunun root viewgroubunun ise navigation drawer olması gerektiğini de unutmayalım. Bunun içineönce main activityin layoutu bundan sonra ise bizim oluşturduğumuz fragment gelecek.
Uygulamanın kodlarını aşağıda bulabilirsiniz. Projenin bitmiş tüm halini INDIRMEK ICIN TIKLAYIN…..
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" android:theme="@style/ToolbarTheme" > </android.support.v7.widget.Toolbar> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@android:color/white" > <RelativeLayout android:layout_width="match_parent" android:layout_height="160dp" android:id="@+id/nav_header_container" android:background="@color/colorPrimary" > <ImageView android:layout_width="70dp" android:layout_height="70dp" android:layout_centerInParent="true" android:src="@drawable/ic_profile" /> </RelativeLayout> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/drawerList" > </android.support.v7.widget.RecyclerView> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
package com.example.emrealtunbilek.navigationdrawerornek; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; public class MainActivity extends AppCompatActivity { private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setUpToolbar(); setUpDrawer(); } private void setUpToolbar(){ toolbar= (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("NavDrawer Örnek"); toolbar.setSubtitle("Örnek uygulama"); } private void setUpDrawer(){ NavigationDrawerFragment navFragment= (NavigationDrawerFragment) getFragmentManager().findFragmentById(R.id.fragment); DrawerLayout drawerLayout= (DrawerLayout) findViewById(R.id.drawerLayout); navFragment.setUpNavigationDrawer(drawerLayout, toolbar); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?xml version="1.0" encoding="utf-8"?> <!-- Full activity navigation drawer--> <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/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include android:id="@+id/toolbar" layout="@layout/toolbar"> </include> </LinearLayout> <fragment android:name="com.example.emrealtunbilek.navigationdrawerornek.NavigationDrawerFragment" android:layout_width="270dp" android:layout_height="match_parent" android:layout_gravity="start" android:id="@+id/fragment" tools:layout="@layout/fragment_navigation_drawer_layout" app:layout="@layout/fragment_navigation_drawer_layout" /> </android.support.v4.widget.DrawerLayout> <!-- Clipped navigation drawer <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include android:id="@+id/toolbar" layout="@layout/toolbar"> </include> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:name="com.example.emrealtunbilek.navigationdrawerornek.NavigationDrawerFragment" android:layout_width="270dp" android:layout_height="match_parent" android:layout_gravity="start" android:id="@+id/fragment" tools:layout="@layout/fragment_navigation_drawer_layout" app:layout="@layout/fragment_navigation_drawer_layout" /> </android.support.v4.widget.DrawerLayout> </LinearLayout> --> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
public class NavigationDrawerFragment extends Fragment { private ActionBarDrawerToggle mDrawerToggle; private DrawerLayout mDrawerLayout; @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v=inflater.inflate(R.layout.fragment_navigation_drawer_layout, container, false); setUpRecyclerView(v); return v; } private void setUpRecyclerView(View v) { RecyclerView recyclerView= (RecyclerView) v.findViewById(R.id.drawerList); EmreAdapter adapter=new EmreAdapter(getActivity(), NavigationDrawerItem.getData()); recyclerView.setAdapter(adapter); recyclerView.setLayoutManager(new LinearLayoutManager(getActivity())); } public void setUpNavigationDrawer(DrawerLayout drawerLayout, Toolbar toolbar){ mDrawerLayout=drawerLayout; mDrawerToggle=new ActionBarDrawerToggle(getActivity(),mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close); mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { mDrawerToggle.onDrawerSlide(drawerView, slideOffset); } @Override public void onDrawerOpened(View drawerView) { } @Override public void onDrawerClosed(View drawerView) { } @Override public void onDrawerStateChanged(int newState) { } }); mDrawerLayout.post(new Runnable() { @Override public void run() { mDrawerToggle.syncState(); } }); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
package com.example.emrealtunbilek.navigationdrawerornek; import java.util.ArrayList; public class NavigationDrawerItem { String baslik; int resimID; public String getBaslik() { return baslik; } public int getResimID() { return resimID; } public void setBaslik(String baslik) { this.baslik = baslik; } public void setResimID(int resimID) { this.resimID = resimID; } public static ArrayList<NavigationDrawerItem> getData(){ ArrayList<NavigationDrawerItem> dataList=new ArrayList<NavigationDrawerItem>(); int[] resimIDs=getImages(); String[] basliklar=getBasliklar(); for(int i=0; i<basliklar.length; i++) { NavigationDrawerItem navItem=new NavigationDrawerItem(); navItem.setBaslik(basliklar[i]); navItem.setResimID(resimIDs[i]); dataList.add(navItem); } return dataList; } private static int[] getImages() { return new int[]{ R.drawable.ic_birds, R.drawable.ic_animal, R.drawable.ic_forest, R.drawable.ic_ocean, R.drawable.ic_planet, R.drawable.ic_landscape}; } private static String[] getBasliklar() { return new String[] { "Kuşlar", "Hayvanlar", "Orman", "Okyanus", "Gezegenler", "Manzaralar" }; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="48dp" android:background="?attr/selectableItemBackground" android:clickable="true" android:gravity="center" android:orientation="horizontal"> <ImageView android:id="@+id/imgIcon" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:tint="@color/colorAccent" android:src="@drawable/ic_discard" /> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:textColor="@android:color/black" android:textSize="14sp"/> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
package com.example.emrealtunbilek.navigationdrawerornek; 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.ImageView; import android.widget.TextView; import android.widget.Toast; import java.util.ArrayList; public class EmreAdapter extends RecyclerView.Adapter<EmreAdapter.MyViewHolder> { Context context; LayoutInflater inflater; ArrayList<NavigationDrawerItem> mDataList; EmreAdapter(Context c, ArrayList<NavigationDrawerItem> data){ this.context=c; this.inflater=LayoutInflater.from(context); mDataList=data; } @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View v=inflater.inflate(R.layout.tek_satir, parent, false); MyViewHolder holder=new MyViewHolder(v); return holder; } @Override public void onBindViewHolder(MyViewHolder holder, int position) { NavigationDrawerItem tiklanilan=mDataList.get(position); holder.setData(tiklanilan, position); } @Override public int getItemCount() { return mDataList.size(); } class MyViewHolder extends RecyclerView.ViewHolder{ TextView baslik; ImageView resim; public MyViewHolder(View itemView) { super(itemView); baslik= (TextView) itemView.findViewById(R.id.title); resim= (ImageView) itemView.findViewById(R.id.imgIcon); } public void setData(NavigationDrawerItem tiklanilan, int position) { this.baslik.setText(tiklanilan.getBaslik()); this.resim.setImageResource(tiklanilan.getResimID()); } } } |