Android抽屉(SlidingDrawer --类似android通知栏下拉效果)

Android抽屉(SlidingDrawer)的实现发 - 红黑联盟
http://www.2cto.com/kf/201301/182507.html

可动态布局的Android抽屉之基础
http://blog.csdn.net/hellogv/article/details/6789698

android抽屉实现
http://blog.csdn.net/wangkuifeng0118/article/details/7229200

Android 使用动画效果后的控件位置处理类似系统通知栏下拉动画
http://www.pocketdigi.com/20111028/556.html

下拉通知效果-Android源码下载
http://www.eoeandroid.com/thread-239825-1-1.html

Demo源码下载

http://pan.baidu.com/s/1c08Esj2

Android抽屉(SlidingDrawer --类似android通知栏下拉效果)_第1张图片

Android抽屉(SlidingDrawer --类似android通知栏下拉效果)_第2张图片

本文来自http://blog.csdn.net/hellogv/，欢迎转摘，引用必须注明出处！

以前曾经介绍过《Android提高第十九篇之"多方向"抽屉》，当这个抽屉组件不与周围组件发生压挤的情况下(周围组件布局不变)，是比较好使的，但是如果需要对周围组件挤压，则用起来欠缺美观了。

如下图。在对周围压挤的情况下，抽屉是先把周围的组件一次性压挤，再通过动画效果展开/收缩的，这种做法的好处是快速简单，坏处是如果挤压范围过大，则效果生硬。

Android抽屉(SlidingDrawer --类似android通知栏下拉效果)_第3张图片

本文实现的自定义抽屉组件，主要针对这种压挤效果做出改良，渐进式压挤周围组件，使得过渡效果更加美观。如下图。

Android抽屉(SlidingDrawer --类似android通知栏下拉效果)_第4张图片

本文实现的抽屉原理是酱紫：

1.抽屉组件主要在屏幕不可视区域，手柄在屏幕边缘的可视区域。即抽屉.rightMargin=-XXX + 手柄.width

2.指定一个周围组件为可压挤，即LayoutParams.weight=1;当然用户也可以指定多个View.

3.使用AsyncTask来实现弹出/收缩的动画，弹出：抽屉.rightMargin+=XX，收缩：抽屉.rightMargin-=XX

总结，本文的自定义抽屉虽然对压挤周围组件有过渡效果，但是比较耗资源，读者可以针对不同的情况考虑使用。

本文的源码可以到http://download.csdn.net/detail/hellogv/3615686下载。

接下来贴出本文全部源代码：

main.xml的源码:

[html] view plain copy print ?

<spanstyle="font-family:ComicSansMS;font-size:18px;"><?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"android:layout_height="fill_parent"
android:id="@+id/container">
<GridViewandroid:id="@+id/gridview"android:layout_width="fill_parent"
android:layout_height="fill_parent"android:numColumns="auto_fit"
android:verticalSpacing="10dp"android:gravity="center"
android:columnWidth="50dip"android:horizontalSpacing="10dip"/>
</LinearLayout></span>

GridView的Item.xml的源码：

[html] view plain copy print ?

<spanstyle="font-family:ComicSansMS;font-size:18px;"><?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"android:paddingBottom="4dip"
android:layout_width="fill_parent">
<ImageViewandroid:layout_height="wrap_content"android:id="@+id/ItemImage"
android:layout_width="wrap_content"android:layout_centerHorizontal="true">
</ImageView>
<TextViewandroid:layout_width="wrap_content"
android:layout_below="@+id/ItemImage"android:layout_height="wrap_content"
android:text="TextView01"android:layout_centerHorizontal="true"
android:id="@+id/ItemText">
</TextView>
</RelativeLayout></span>

Panel.java是本文核心，抽屉组件的源码，这个抽屉只实现了从右往左的弹出/从左往右的收缩，读者可以根据自己的需要修改源码来改变抽屉动作的方向：

[java] view plain copy print ?

<spanstyle="font-family:ComicSansMS;font-size:18px;">publicclassPanelextendsLinearLayout{
publicinterfacePanelClosedEvent{
voidonPanelClosed(Viewpanel);
}
publicinterfacePanelOpenedEvent{
voidonPanelOpened(Viewpanel);
}
/**Handle的宽度，与Panel等高*/
privatefinalstaticintHANDLE_WIDTH=30;
/**每次自动展开/收缩的范围*/
privatefinalstaticintMOVE_WIDTH=20;
privateButtonbtnHandle;
privateLinearLayoutpanelContainer;
privateintmRightMargin=0;
privateContextmContext;
privatePanelClosedEventpanelClosedEvent=null;
privatePanelOpenedEventpanelOpenedEvent=null;
/**
*otherView自动布局以适应Panel展开/收缩的空间变化
*@authorGV
*
*/
publicPanel(Contextcontext,ViewotherView,intwidth,intheight){
super(context);
this.mContext=context;
//改变Panel附近组件的属性
LayoutParamsotherLP=(LayoutParams)otherView.getLayoutParams();
otherLP.weight=1;//支持压挤
otherView.setLayoutParams(otherLP);
//设置Panel本身的属性
LayoutParamslp=newLayoutParams(width,height);
lp.rightMargin=-lp.width+HANDLE_WIDTH;//Panel的Container在屏幕不可视区域，Handle在可视区域
mRightMargin=Math.abs(lp.rightMargin);
this.setLayoutParams(lp);
this.setOrientation(LinearLayout.HORIZONTAL);
//设置Handle的属性
btnHandle=newButton(context);
btnHandle.setLayoutParams(newLayoutParams(HANDLE_WIDTH,height));
btnHandle.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewarg0){
LayoutParamslp=(LayoutParams)Panel.this.getLayoutParams();
if(lp.rightMargin<0)//CLOSE的状态
newAsynMove().execute(newInteger[]{MOVE_WIDTH});//正数展开
elseif(lp.rightMargin>=0)//OPEN的状态
newAsynMove().execute(newInteger[]{-MOVE_WIDTH});//负数收缩
}
});
//btnHandle.setOnTouchListener(HandleTouchEvent);
this.addView(btnHandle);
//设置Container的属性
panelContainer=newLinearLayout(context);
panelContainer.setLayoutParams(newLayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));
this.addView(panelContainer);
}
/**
*定义收缩时的回调函数
*@paramevent
*/
publicvoidsetPanelClosedEvent(PanelClosedEventevent)
{
this.panelClosedEvent=event;
}
/**
*定义展开时的回调函数
*@paramevent
*/
publicvoidsetPanelOpenedEvent(PanelOpenedEventevent)
{
this.panelOpenedEvent=event;
}
/**
*把View放在Panel的Container
*@paramv
*/
publicvoidfillPanelContainer(Viewv)
{
panelContainer.addView(v);
}
/**
*异步移动Panel
*@authorhellogv
*/
classAsynMoveextendsAsyncTask<Integer,Integer,Void>{
@Override
protectedVoiddoInBackground(Integer...params){
inttimes;
if(mRightMargin%Math.abs(params[0])==0)//整除
times=mRightMargin/Math.abs(params[0]);
else
//有余数
times=mRightMargin/Math.abs(params[0])+1;
for(inti=0;i<times;i++){
publishProgress(params);
try{
Thread.sleep(Math.abs(params[0]));
}catch(InterruptedExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
}
returnnull;
}
@Override
protectedvoidonProgressUpdate(Integer...params){
LayoutParamslp=(LayoutParams)Panel.this.getLayoutParams();
if(params[0]<0)
lp.rightMargin=Math.max(lp.rightMargin+params[0],
(-mRightMargin));
else
lp.rightMargin=Math.min(lp.rightMargin+params[0],0);
if(lp.rightMargin==0&&panelOpenedEvent!=null){//展开之后
panelOpenedEvent.onPanelOpened(Panel.this);//调用OPEN回调函数
}
elseif(lp.rightMargin==-(mRightMargin)&&panelClosedEvent!=null){//收缩之后
panelClosedEvent.onPanelClosed(Panel.this);//调用CLOSE回调函数
}
Panel.this.setLayoutParams(lp);
}
}
}
</span>

main.java是主控部分，演示了Panel的使用：

[java] view plain copy print ?

<spanstyle="font-family:ComicSansMS;font-size:18px;">publicclassmainextendsActivity{
publicPanelpanel;
publicLinearLayoutcontainer;
publicGridViewgridview;
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
this.setTitle("“可动态布局”的抽屉组件之构建基础-----hellogv");
gridview=(GridView)findViewById(R.id.gridview);
container=(LinearLayout)findViewById(R.id.container);
panel=newPanel(this,gridview,200,LayoutParams.FILL_PARENT);
container.addView(panel);//加入Panel控件
//新建测试组件
TextViewtvTest=newTextView(this);
tvTest.setLayoutParams(newLayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
tvTest.setText("测试组件，红字白底");
tvTest.setTextColor(Color.RED);
tvTest.setBackgroundColor(Color.WHITE);
//加入到Panel里面
panel.fillPanelContainer(tvTest);
panel.setPanelClosedEvent(panelClosedEvent);
panel.setPanelOpenedEvent(panelOpenedEvent);
//往GridView填充测试数据
ArrayList<HashMap<String,Object>>lstImageItem=newArrayList<HashMap<String,Object>>();
for(inti=0;i<100;i++){
HashMap<String,Object>map=newHashMap<String,Object>();
map.put("ItemImage",R.drawable.icon);
map.put("ItemText","NO."+String.valueOf(i));
lstImageItem.add(map);
}
SimpleAdaptersaImageItems=newSimpleAdapter(this,
lstImageItem,
R.layout.item,
newString[]{"ItemImage","ItemText"},
newint[]{R.id.ItemImage,R.id.ItemText});
gridview.setAdapter(saImageItems);
gridview.setOnItemClickListener(newItemClickListener());
}
PanelClosedEventpanelClosedEvent=newPanelClosedEvent(){
@Override
publicvoidonPanelClosed(Viewpanel){
Log.e("panelClosedEvent","panelClosedEvent");
}
};
PanelOpenedEventpanelOpenedEvent=newPanelOpenedEvent(){
@Override
publicvoidonPanelOpened(Viewpanel){
Log.e("panelOpenedEvent","panelOpenedEvent");
}
};
classItemClickListenerimplementsOnItemClickListener{
@Override
publicvoidonItemClick(AdapterView<?>arg0,Viewarg1,intarg2,longarg3){
@SuppressWarnings("unchecked")
HashMap<String,Object>item=(HashMap<String,Object>)arg0
.getItemAtPosition(arg2);
setTitle((String)item.get("ItemText"));
}
}</span>

后面还会继续介绍如何在Panel加入拖拉效果的处理！

更多相关文章

随机推荐