Android 抽屉效果和滚动标题的实现

         很多人看到一些应用都会看到一个很好看的策划菜单，然后自己想着怎么实现，网上有很多demo, 但是大都很复杂，很多朋友可能没什么耐心，比如我！  那怎么能用最简单的方法来实现而且一看就会呢，其实大多数人都知道 android support v4 这个包，使用最多的可能就是ViewPager了，但是其实这个包里面有很多很好用的控件，很多花哨的视图在这个包下的类都可以实现，今天我就简单的用drawerLayout 这个控件实现了侧滑菜单，PagerTabStrip实现了标题滚动，废话不多说，代码不多，直接上代码！ 有需要的看不懂的朋友可以MM我!!

首先是几个布局，当然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=".DrawerActivity" >

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- 主界面视图 -->

        <RelativeLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:background="@color/gray"
            android:layout_height="match_parent" >
            <include
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                layout="@layout/main" />
        </RelativeLayout>
        <!-- 侧面的视图 -->
        <RelativeLayout
            android:id="@+id/left"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="left" >

            <include
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                layout="@layout/two" />
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>

</RelativeLayout>

main.xml

<?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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/v_2_0_btn_bg_nomal"
        android:gravity="center" >

        <Button
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:layout_weight="1"
            android:background="@drawable/btn_selecor"
            android:gravity="center"
            android:text="open" />

        <TextView
            android:layout_width="3dp"
            android:layout_height="20dp"
            android:background="@android:color/white" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:layout_weight="1"
            android:background="@drawable/btn_selecor"
            android:gravity="center"
            android:text="btn2" />
    </LinearLayout>
	<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <android.support.v4.view.ViewPager
            android:id="@+id/main_body_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" >
            <android.support.v4.view.PagerTabStrip
                android:id="@+id/pagertitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="@drawable/v_2_0_c_select_bg" >
            </android.support.v4.view.PagerTabStrip>
        </android.support.v4.view.ViewPager>
        <ImageView
        android:layout_width="fill_parent"
        android:layout_height="2dp"
        android:layout_alignParentLeft="true"
        android:src="@drawable/v_2_0_shadow_bottom" />
    </RelativeLayout>
</LinearLayout>

侧面视图的xml<two>

<?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:background="@color/gray"
    android:orientation="vertical" >
  <RelativeLayout
        android:id="@+id/menu_title_1"
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:background="@drawable/v_2_0_menu_title_bg_1" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center_vertical" >

            <Button
                android:id="@+id/menu_my_game_btn"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="@drawable/btn_selecor"
                android:text="用户信息" />

            <ImageView
                android:layout_width="1dp"
                android:layout_height="30dp"
                android:src="@color/white" />

            <Button
                android:id="@+id/menu_my_down_manager"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="@drawable/btn_selecor"
                android:text="系统信息" />
        </LinearLayout>
    </RelativeLayout>
	<ListView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:divider="@color/black"
        android:dividerHeight="1dp"
        android:fadingEdge="none"
        android:footerDividersEnabled="false"
        android:headerDividersEnabled="false"
        android:listSelector="#00000000" >
    </ListView>
</LinearLayout>

listView的item视图

<?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:gravity="center"
    android:orientation="horizontal" >
    <ImageView 
        android:id="@+id/item_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <TextView 
        android:id="@+id/item_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        />

</LinearLayout>

接下来当然是Activity了：

package app.drawlayout;

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

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapFactory.Options;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.WindowManager.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainActivity extends Activity {
	private DrawerLayout mDrawerLayout ;
	RelativeLayout left;
	private ViewPager mViewPager;
	private PagerTabStrip mPagerTitleStrip;
	private List<View> viewlist;
	int pic[]={R.drawable.back_g3,R.drawable.d,R.drawable.girl,R.drawable.meinv};
	private Button button;
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		left=(RelativeLayout) findViewById(R.id.left);
		ListView list=(ListView) findViewById(R.id.listview);
		list.setAdapter(new Myadapter(this));
		button = (Button) findViewById(R.id.btn1);
		mViewPager=(ViewPager) findViewById(R.id.main_body_layout);
		mPagerTitleStrip=(PagerTabStrip) findViewById(R.id.pagertitle);
		mPagerTitleStrip.setTextColor(Color.WHITE);
		mPagerTitleStrip.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 20);
		viewlist=new ArrayList<View>();
		for (int i = 0; i <4; i++) {
			viewlist.add(getView(pic[i]));
		}
		mViewPager.setAdapter(new MypagerAdapter());
		button.setOnClickListener(new OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				// 按钮按下，将抽屉打开
				mDrawerLayout.openDrawer(left);

			}
		});
	}
	class Myadapter extends BaseAdapter{
		Context context;
		public Myadapter(Context context) {
			super();
			this.context = context;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return 20;
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return null;
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return 0;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			convertView=View.inflate(context, R.layout.item, null);
			TextView tv=(TextView) convertView.findViewById(R.id.item_tv);
			ImageView iv=(ImageView) convertView.findViewById(R.id.item_iv);
			Options options=new Options();
			options.inSampleSize=3;
			Bitmap bmp=BitmapFactory.decodeResource(context.getResources(), R.drawable.meinv, options);
			iv.setImageBitmap(bmp);
			tv.setText("我是大美女");
			return convertView;
		}
	}
	class MypagerAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return 4;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0==arg1;
		}

		@Override
		public CharSequence getPageTitle(int position) {
			String title="";
			switch (position) {
			case 0:
				title="我是1号";
				break;
			case 1:
				title="我是2号";
				break;
			case 2:
				title="我是3号";
				break;
			case 3:
				title="我是4号";
				break;

			default:
				break;
			}
			return title;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(viewlist.get(position));
			return viewlist.get(position);
		}

		@Override
		public void destroyItem(ViewGroup container, int position,
				Object object) {
			container.removeView(viewlist.get(position));
		}
	}
	public View getView(int position){
		ImageView image=new ImageView(this);
		LayoutParams params=new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
		image.setLayoutParams(params);
		image.setBackgroundDrawable(getResources().getDrawable(position));
		return image;
	}

}

看到没，就100多行的代码量就实现了侧滑和标题滚动，是不是很简单。
，
下面上几个简单的效果图