Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android開發筆記（一百二十）兩種側滑布局

Android開發筆記（一百二十）兩種側滑布局

編輯：關於Android編程

SlidingPaneLayout

SlidingPaneLayout是Android在android-support-v4.jar中推出的一個可滑動面板的布局，我們提到水平布局時的LinearLayout無法自動左右拉伸，必須借助於手勢事件才能拉出左側隱藏的布局，現在SlidingPaneLayout便是為了解決LinearLayout無法自動拉伸的缺陷。只要我們在布局文件的SlidingPaneLayout節點下定義兩個子布局，那麼頁面默認會把第一個子布局作為左側隱藏面板，一旦用戶的手勢從左向右滑動，左側面板就被拉了出來。


SlidingPaneLayout的使用挺簡單的，下面是它的幾個常用方法：
setSliderFadeColor : 設置主頁面的陰影漸變色。即拉出左側面板時，右邊主頁面的漸變陰影色，主頁面變得越小則陰影色救越濃。陰影色默認為灰色。
setCoveredFadeColor : 設置左側面板縮進去時的陰影漸變色。
setPanelSlideListener : 設置左側面板的拉出監聽器。該監聽器實現了下面三個方法：
--onPanelClosed : 左側面板已關閉。
--onPanelOpened : 左側面板已打開。
--onPanelSlide : 左側面板在滑動。
openPane : 打開左側面板。
closePane : 關閉左側面板。
isOpen : 判斷左側面板是否打開。


下面是使用SlidingPaneLayout的效果截圖：
\


下面是使用SlidingPaneLayout的布局文件示例：


下面是使用SlidingPaneLayout的頁面代碼示例：
import java.util.ArrayList;

import com.example.exmdrawer.fragment.ColorFragment;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v4.widget.SlidingPaneLayout.PanelSlideListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class SlidingActivity extends FragmentActivity implements 
		OnClickListener, OnItemClickListener {

    private final static String TAG = "SlidingActivity";
    private SlidingPaneLayout sp_layout;
    private ListView lv_sliding;
    private ViewPager vp_sliding;
    private TextView tv_sliding;
	private String[] colorDescArray = {"紅色", "綠色", "藍色", "白色", "黑色"};
	private int[] colorArray = {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE, Color.BLACK};
	private ColorPagerAdapter vp_adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sliding);
        sp_layout = (SlidingPaneLayout) findViewById(R.id.sp_layout);
        lv_sliding = (ListView) findViewById(R.id.lv_sliding);
        vp_sliding = (ViewPager) findViewById(R.id.vp_sliding);
        tv_sliding = (TextView) findViewById(R.id.tv_sliding);
        tv_sliding.setOnClickListener(this);
        
        //sp_layout.setSliderFadeColor(Color.YELLOW);
        sp_layout.setCoveredFadeColor(Color.RED);
        sp_layout.setPanelSlideListener(new SlidingPanelListener());
        ArrayAdapter lv_adapter = new ArrayAdapter(this,
				R.layout.list_item, colorDescArray);
        lv_sliding.setAdapter(lv_adapter);
        lv_sliding.setOnItemClickListener(this);
        vp_adapter = new ColorPagerAdapter(getSupportFragmentManager());
        vp_sliding.setAdapter(vp_adapter);
        vp_sliding.addOnPageChangeListener(new ColorPagerListener());
    }

	@Override
	public void onClick(View v) {
		if (v.getId() == R.id.tv_sliding) {
			if (sp_layout.isOpen()) {
				sp_layout.closePane();
			} else {
				sp_layout.openPane();
			}
		}
	}
	
	@Override
	public void onItemClick(AdapterView parent, View view, int position, long id) {
		vp_sliding.setCurrentItem(position);
		sp_layout.closePane();
	}

	public class SlidingPanelListener implements PanelSlideListener {
		@Override
		public void onPanelClosed(View arg0) {
			tv_sliding.setText("打開側滑菜單");
		}

		@Override
		public void onPanelOpened(View arg0) {
			tv_sliding.setText("關閉側滑菜單");
		}

		@Override
		public void onPanelSlide(View arg0, float arg1) {
		}
	}

	public class ColorPagerListener implements OnPageChangeListener {
		@Override
		public void onPageScrollStateChanged(int arg0) {
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageSelected(int position) {
			//tv_sliding.setText(colorDescArray[position]);
		}
	}

	private ArrayList mFragments;
	public class ColorPagerAdapter extends FragmentPagerAdapter {
		
		public ColorPagerAdapter(FragmentManager fm) {
			super(fm);
			mFragments = new ArrayList();
			for (int color : colorArray) {
				mFragments.add(new ColorFragment(color));
			}
		}

		@Override
		public int getCount() {
			return mFragments.size();
		}

		@Override
		public Fragment getItem(int position) {
			return mFragments.get(position);
		}
	}

}


下面是頁面用到的Fragment代碼示例：
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class ColorFragment extends Fragment {

	private static final String TAG = "ColorFragment";
	protected Context mContext;

	private int mColor = -1;
	public ColorFragment(int colorRes) {
		mColor = colorRes;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		mContext = getActivity();
		if (savedInstanceState != null) {
			mColor = savedInstanceState.getInt("mColor");
		}
		LinearLayout layout = new LinearLayout(mContext);
		layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
		layout.setBackgroundColor(mColor);
		return layout;
	}

	@Override
	public void onSaveInstanceState(Bundle outState) {
		super.onSaveInstanceState(outState);
		if (mColor != -1) {
			outState.putInt("mColor", mColor);
		}
	}
	
}


DrawerLayout

DrawerLayout也是android-support-v4.jar中新加的抽屜式布局，它的用法更加類似於滑出式菜單的開源框架SlidingMenu，有關SlidingMenu的說明參見《Android開發筆記（一百零一）滑出式菜單》。DrawerLayout應該也是Android與時俱進的產物，它比SlidingPaneLayout更強大，不但可以拉出左側抽屜面板，還可以拉出右側抽屜面板。左側面板與右側面板的區別在於，左側面板在布局文件中的layout_gravity屬性為left，而右側面板在布局文件中的layout_gravity屬性為right。


下面是DrawerLayout的幾個常用方法說明：
setDrawerShadow : 設置主頁面的漸變陰影圖形。
addDrawerListener : 添加抽屜面板的拉出監聽器。該監聽器實現了下面三個方法：
--onDrawerSlide : 抽屜面板在滑動。
--onDrawerOpened : 抽屜面板已打開。
--onDrawerClosed : 抽屜面板已關閉。
--onDrawerStateChanged : 抽屜面板的狀態發生變化。
removeDrawerListener : 移除抽屜面板的拉出監聽器。
closeDrawers : 關閉所有抽屜面板。
openDrawer : 打開指定抽屜面板。
closeDrawer : 關閉指定抽屜面板。
isDrawerOpen : 判斷指定抽屜面板是否打開。


下面是使用DrawerLayout的效果截圖：
\


下面是使用DrawerLayout的布局文件示例：


下面是使用DrawerLayout的頁面代碼示例：
import java.lang.reflect.Field;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.support.v4.widget.ViewDragHelper;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;

public class DrawerActivity extends Activity implements OnClickListener {

    private final static String TAG = "DrawerActivity";
    private DrawerLayout dl_layout;
    private TextView tv_drawer_left;
    private TextView tv_drawer_right;
    private TextView tv_drawer_center;
    private ListView lv_drawer_left;
    private ListView lv_drawer_right;
	private String[] titleArray = {"首頁", "新聞", "娛樂", "博客", "論壇"};
	private String[] settingArray = {"我的", "設置", "關於"};
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer);
        dl_layout = (DrawerLayout) findViewById(R.id.dl_layout);
        dl_layout.addDrawerListener(new SlidingListener());
        //setDrawerLeftEdgeSize(this, dl_layout, 0.3f);

        tv_drawer_left = (TextView) findViewById(R.id.tv_drawer_left);
        tv_drawer_right = (TextView) findViewById(R.id.tv_drawer_right);
        tv_drawer_center = (TextView) findViewById(R.id.tv_drawer_center);
        tv_drawer_left.setOnClickListener(this);
        tv_drawer_right.setOnClickListener(this);
        
        lv_drawer_left = (ListView) findViewById(R.id.lv_drawer_left);
        ArrayAdapter left_adapter = new ArrayAdapter(this,
				R.layout.list_item, titleArray);
        lv_drawer_left.setAdapter(left_adapter);
        lv_drawer_left.setOnItemClickListener(new LeftListListener());

        lv_drawer_right = (ListView) findViewById(R.id.lv_drawer_right);
        ArrayAdapter right_adapter = new ArrayAdapter(this,
				R.layout.list_item, settingArray);
        lv_drawer_right.setAdapter(right_adapter);
        lv_drawer_right.setOnItemClickListener(new RightListListener());
    }

	@Override
	public void onClick(View v) {
		if (v.getId() == R.id.tv_drawer_left) {
			if (dl_layout.isDrawerOpen(lv_drawer_left)) {
				dl_layout.closeDrawer(lv_drawer_left);
			} else {
				dl_layout.openDrawer(lv_drawer_left);
			}
		} else if (v.getId() == R.id.tv_drawer_right) {
			if (dl_layout.isDrawerOpen(lv_drawer_right)) {
				dl_layout.closeDrawer(lv_drawer_right);
			} else {
				dl_layout.openDrawer(lv_drawer_right);
			}
		}
	}

    private class LeftListListener implements OnItemClickListener {
		@Override
		public void onItemClick(AdapterView parent, View view, int position, long id) {
			String text = titleArray[position];
			tv_drawer_center.setText(text+text+text+text+text);
			dl_layout.closeDrawers();
		}
    }

    private class RightListListener implements OnItemClickListener {
		@Override
		public void onItemClick(AdapterView parent, View view, int position, long id) {
			String text = settingArray[position];
			tv_drawer_center.setText(text+text+text+text+text);
			dl_layout.closeDrawers();
		}
    }
    
    private class SlidingListener implements DrawerListener {
		@Override
		public void onDrawerSlide(View paramView, float paramFloat) {
		}

		@Override
		public void onDrawerOpened(View paramView) {
			if (paramView.getId() == R.id.lv_drawer_left) {
				tv_drawer_left.setText("關閉左邊側滑");
			} else {
				tv_drawer_right.setText("關閉右邊側滑");
			}
		}

		@Override
		public void onDrawerClosed(View paramView) {
			if (paramView.getId() == R.id.lv_drawer_left) {
				tv_drawer_left.setText("打開左邊側滑");
			} else {
				tv_drawer_right.setText("打開右邊側滑");
			}
		}

		@Override
		public void onDrawerStateChanged(int paramInt) {
		}
    }
    
    //設置左邊側滑的邊緣大小
	private void setDrawerLeftEdgeSize(Activity act, DrawerLayout layout, float percentage) {
		if (act == null || layout == null)
			return;
		try {
			Field leftDraggerField = layout.getClass().getDeclaredField("mLeftDragger");
			leftDraggerField.setAccessible(true);
			ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(layout);
			Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize");
			edgeSizeField.setAccessible(true);
			int edgeSize = edgeSizeField.getInt(leftDragger);
			DisplayMetrics dm = new DisplayMetrics();
			act.getWindowManager().getDefaultDisplay().getMetrics(dm);
			edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (int) (dm.widthPixels * percentage)));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

SlidingPaneLayout和DrawerLayout的區別

這兩個側滑布局都實現了側滑菜單效果，當然它們之間也有些使用上的不同，下面是博主總結的幾點區別：
1、SlidingPaneLayout只能定義一個側滑面板，而且必須位於左側；而DrawerLayout可定義兩個側滑面板，一個位於左側，另一個位於右側，當然如果你只定義一個側滑面板也是可以的。
2、SlidingPaneLayout的側滑面板在滑動時，主頁面也跟著往右滑；而DrawerLayout的側滑面板在滑動時，主頁面是不會滑動的，也就是說，側滑面板會遮蓋住主頁面的部分UI；
3、SlidingPaneLayout在主頁面任何位置水平向右滑動，都會拉出左側面板；而DrawerLayout只有在主頁面左右邊緣水平滑動時，才能拉出側滑面板；
4、拉出側滑面板時，SlidingPaneLayout主頁面的灰色陰影較淺，不容易看到；而DrawerLayout主頁面的灰色陰影較深，一下子就能看出來；
  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
AndroidStudio快捷鍵和使用技巧 Android網絡編程 HttpUrlConnection HttpClient AsyncTask android paint cap join 理解 圖示 Android系統檢測程序內存占用各種方法 Android自定義Style Android AIDL和遠程Service調用示例代碼
從源碼分析Android的Glide庫的圖片加載流程及特點

0.基礎知識Glide中有一部分單詞，我不知道用什麼中文可以確切的表達出
Android橫向滑動導航菜單

1.效果圖： 2.項目地址：https://github.co
android animation——添加購物車動畫（填坑和優化）

我們經常看到不管是某寶還是某東都有加入購物車的動畫。就是在點擊某個商品後
Zxing圖片識別 從相冊選取二維碼圖片進行解析總結

在Zxing掃描識別和圖片識別的解析對象是相同的本文分三個步驟:1 獲取
閱讀排行版
Copyright © Android教程網 All Rights Reserved