(Android) SlidingMenu Library 를 이용한 슬라이드 메뉴 만들기

출처 : http://naddola.tistory.com/entry/android-SlidingMenu%EC%99%80-Fragment%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EA%B8%B0%EB%B3%B8-%EB%A9%94%EB%89%B4-%EA%B5%AC%EC%A1%B0-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0jfeinstein10%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4

오늘은 저번에 참고했던 SlidingMenu를 이용해서,

기본적인 앱 구조를 구현 코드입니다.

예제 소스를 돌려도 실제로 제가 돌리기 위한 소스를 만들기까지는

한참 시간이 걸리기때문에 포스팅합니다.

이를 이용하기 위해서는 사전 작업이 필요한데,

안보신분은 

http://naddola.tistory.com/entry/androidSliding-Menu-%EB%A9%94%EB%89%B4-%EB%8F%8C%EB%A0%A4%EB%B3%B4%EA%B8%B0jfeinstein10%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4

를 먼저 해보시고 오는걸 추천드립니다.

새 프로젝트를 SlidingSimpleSample로만들고,

저번에 이용했던, library를 참조합니다.

 

추가했더니 또

 Found 2 versions of android-support-v4.jar in the dependency list,

라는 경고가 뜨네요.

 이미 설명했던 것이니, 가볍게 libs폴더에 있는

android-support-v4.jar

를 삭제해버렷!

 

이제 필요한 자바파일입니다.

BaseActivity.java

적용시켰던 ExampleListActivity에서 수정했습니다.

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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

package com.example.slidingsimplesample;   import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentTransaction; import android.support.v4.app.ListFragment;   import com.actionbarsherlock.view.Menu; import com.actionbarsherlock.view.MenuItem; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;   public class BaseActivity extends SlidingFragmentActivity {       protected ListFragment mFrag;       public BaseActivity() {     }       @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);             // set the Behind View         setBehindContentView(R.layout.menu_frame);         if (savedInstanceState == null) {             FragmentTransaction t = this.getSupportFragmentManager().beginTransaction();             mFrag = new MenuListFragment();             t.replace(R.id.menu_frame, mFrag);             t.commit();         } else {             mFrag = (ListFragment)this.getSupportFragmentManager().findFragmentById(R.id.menu_frame);         }           // customize the SlidingMenu         SlidingMenu sm = getSlidingMenu();         sm.setShadowWidthRes(R.dimen.shadow_width);         sm.setShadowDrawable(R.drawable.shadow);         sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);         sm.setFadeDegree(0.35f);         sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);           getSupportActionBar().setDisplayHomeAsUpEnabled(true);     }       @Override     public boolean onOptionsItemSelected(MenuItem item) {         switch (item.getItemId()) {         case android.R.id.home:             toggle();             return true;                   }         return super.onOptionsItemSelected(item);     }       @Override     public boolean onCreateOptionsMenu(Menu menu) {         getSupportMenuInflater().inflate(R.menu.main, menu);         return true;     }             public void fragmentReplace(int reqNewFragmentIndex) {                    Fragment newFragment = null;            newFragment = getFragment(reqNewFragmentIndex);            final FragmentTransaction transaction = getSupportFragmentManager()                 .beginTransaction();            transaction.replace(R.id.fragment_mainContainer, newFragment);            getSlidingMenu().showContent();         transaction.commit();     }           private Fragment getFragment(int idx) {         Fragment newFragment = null;            switch (idx) {         case 0:             newFragment = new Fragment1();             break;         case 1:             newFragment = new Fragment2();             break;         case 2:             newFragment = new Fragment3();             break;         default:             break;         }            return newFragment;     } }

MainActivity.java

메인 액티비티입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13

package com.example.slidingsimplesample;   import android.os.Bundle; public class MainActivity extends BaseActivity{       @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         fragmentReplace(0);     }   }

MenuListFragment.java

메뉴에 있는 아이템을 실질적으로 채워주는 부분입니다.

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 79 80 81 82 83 84 85 86

package com.example.slidingsimplesample;    import android.content.Context; import android.os.Bundle; import android.support.v4.app.ListFragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView;   public class MenuListFragment extends ListFragment {               public MenuListFragment(){     }        public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState) {         return inflater.inflate(R.layout.list, null);     }        public void onActivityCreated(Bundle savedInstanceState) {         super.onActivityCreated(savedInstanceState);         SampleAdapter adapter = new SampleAdapter(getActivity());         adapter.add(new SampleItem("Fragment1", android.R.drawable.ic_menu_search));         adapter.add(new SampleItem("Fragment2",                 android.R.drawable.ic_menu_search));         adapter.add(new SampleItem("Fragment3", android.R.drawable.ic_menu_search));            setListAdapter(adapter);     }        private class SampleItem {         public String tag;         public int iconRes;           public SampleItem(String tag, int iconRes) {             this.tag = tag;             this.iconRes = iconRes;         }     }       public class SampleAdapter extends ArrayAdapter<SampleItem> {           public SampleAdapter(Context context) {             super(context, 0);         }           public View getView(int position, View convertView, ViewGroup parent) {             if (convertView == null) {                 convertView = LayoutInflater.from(getContext()).inflate(                         R.layout.row, null);             }             ImageView icon = (ImageView) convertView                     .findViewById(R.id.row_icon);             icon.setImageResource(getItem(position).iconRes);             TextView title = (TextView) convertView                     .findViewById(R.id.row_title);             title.setText(getItem(position).tag);               return convertView;         }     }          @Override     public void onListItemClick(ListView l, View v, int position, long id) {                    switch (position) {         case 0:             ((BaseActivity)getActivity()).fragmentReplace(0);             break;         case 1:             ((BaseActivity)getActivity()).fragmentReplace(1);             break;            case 2:             ((BaseActivity)getActivity()).fragmentReplace(2);             break;         }         super.onListItemClick(l, v, position, id);     } }

Fragment1.java

메뉴 1입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

package com.example.slidingsimplesample;   import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;   public class Fragment1 extends Fragment {     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState) {         View v = inflater.inflate(R.layout.fragment1, container, false);         return v;     } }

Fragment2.java

메뉴 2입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

package com.example.slidingsimplesample;   import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;   public class Fragment2 extends Fragment {     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState) {         View v = inflater.inflate(R.layout.fragment2, container, false);         return v;     } }

Fragment3.java

메뉴 3입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

package com.example.slidingsimplesample;   import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;   public class Fragment3 extends Fragment {     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState) {         View v = inflater.inflate(R.layout.fragment3, container, false);         return v;     } }

xml파일입니다.

activity_main.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context=".MainActivity" >       <LinearLayout         android:id="@+id/fragment_mainContainer"         android:layout_gravity="center_horizontal"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:orientation="vertical"         android:gravity="center_horizontal"          />   </RelativeLayout>

fragment1.xml

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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" >           <TextView         android:id="@+id/tv1"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:text="fragment1"/>   </LinearLayout>

fragment2.xml

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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" >           <TextView         android:id="@+id/tv2"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:text="fragment2"/>   </LinearLayout>

fragment3.xml

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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" >           <TextView         android:id="@+id/tv3"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:text="fragment3"/>   </LinearLayout>

list.xml

1 2 3 4 5 6

<?xml version="1.0" encoding="utf-8"?> <ListView xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@android:id/list"     android:layout_width="match_parent"     android:layout_height="match_parent"      />

menu_frame.xml

1 2 3 4 5 6

<?xml version="1.0" encoding="utf-8"?>   <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/menu_frame"     android:layout_width="match_parent"     android:layout_height="match_parent" />

row.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?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="50dp"     android:orientation="horizontal" >       <ImageView         android:id="@+id/row_icon"         android:layout_width="50dp"         android:layout_height="50dp"         android:padding="10dp"         android:src="@drawable/ic_launcher" />       <TextView         android:id="@+id/row_title"         android:layout_width="0dp"         android:layout_height="match_parent"         android:layout_weight="1"         android:gravity="center_vertical"         android:padding="10dp"         android:text="Medium Text"         android:textAppearance="@android:style/TextAppearance.Medium" />   </LinearLayout>

다음으로 value폴더에 있는 dimens.xml 도 변경합니다.

dimens.xml

1 2 3 4 5 6 7 8 9 10

<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="slidingmenu_offset">60dp</dimen>     <dimen name="list_padding">10dp</dimen>     <dimen name="shadow_width">15dp</dimen>       <integer name="num_cols">1</integer> </resources>

마지막으로 그림자 효과에 대한 xml을 넣어야하는데 이친구는

drawable폴더에 넣어야됩니다.

shodow.xml

1 2 3 4 5 6 7 8 9

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" >       <gradient         android:endColor="#33000000"         android:centerColor="#11000000"         android:startColor="#00000000" />   </shape>

여기까지 하시고 돌려보면

다음과 같은 결과를 얻을 것입니닷!

그럼 열코딩 하시길~

밑에는 아예 세개 프로젝트를 압축해놨습니다.

 SlidingSimpleSample.zip

import하시면 됩니다.