可动态布局的Android抽屉之基础

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

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

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



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



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

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

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

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

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

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

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

main.xml的源码:

view
plainprint?

<span style="font-family:Comic Sans MS;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:id="@+id/container">

<GridView android: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的源码：

view
plainprint?

<span style="font-family:Comic Sans MS;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_height="wrap_content" android:paddingBottom="4dip"

android:layout_width="fill_parent">

<ImageView android:layout_height="wrap_content" android:id="@+id/ItemImage"

android:layout_width="wrap_content" android:layout_centerHorizontal="true">

</ImageView>

<TextView android: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是本文核心，抽屉组件的源码，这个抽屉只实现了从右往左的弹出/从左往右的收缩，读者可以根据自己的需要修改源码来改变抽屉动作的方向：

view
plainprint?

<span style="font-family:Comic Sans MS;font-size:18px;">public class Panel extends LinearLayout{

public interface PanelClosedEvent {

void onPanelClosed(View panel);

}

public interface PanelOpenedEvent {

void onPanelOpened(View panel);

}

/**Handle的宽度，与Panel等高*/

private final static int HANDLE_WIDTH=30;

/**每次自动展开/收缩的范围*/

private final static int MOVE_WIDTH=20;

private Button btnHandle;

private LinearLayout panelContainer;

private int mRightMargin=0;

private Context mContext;

private PanelClosedEvent panelClosedEvent=null;

private PanelOpenedEvent panelOpenedEvent=null;

/**

* otherView自动布局以适应Panel展开/收缩的空间变化

* @author GV

*

*/

public Panel(Context context,View otherView,int width,int height) {

super(context);

this.mContext=context;

//改变Panel附近组件的属性

LayoutParams otherLP=(LayoutParams) otherView.getLayoutParams();

otherLP.weight=1;//支持压挤

otherView.setLayoutParams(otherLP);

//设置Panel本身的属性

LayoutParams lp=new LayoutParams(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=new Button(context);

btnHandle.setLayoutParams(new LayoutParams(HANDLE_WIDTH,height));

btnHandle.setOnClickListener(new OnClickListener(){

@Override

public void onClick(View arg0) {

LayoutParams lp = (LayoutParams) Panel.this.getLayoutParams();

if (lp.rightMargin < 0)// CLOSE的状态

new AsynMove().execute(new Integer[] { MOVE_WIDTH });// 正数展开

else if (lp.rightMargin >= 0)// OPEN的状态

new AsynMove().execute(new Integer[] { -MOVE_WIDTH });// 负数收缩

}

});

//btnHandle.setOnTouchListener(HandleTouchEvent);

this.addView(btnHandle);

//设置Container的属性

panelContainer=new LinearLayout(context);

panelContainer.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,

LayoutParams.FILL_PARENT));

this.addView(panelContainer);

}

/**

* 定义收缩时的回调函数

* @param event

*/

public void setPanelClosedEvent(PanelClosedEvent event)

{

this.panelClosedEvent=event;

}

/**

* 定义展开时的回调函数

* @param event

*/

public void setPanelOpenedEvent(PanelOpenedEvent event)

{

this.panelOpenedEvent=event;

}

/**

* 把View放在Panel的Container

* @param v

*/

public void fillPanelContainer(View v)

{

panelContainer.addView(v);

}

/**

* 异步移动Panel

* @author hellogv

*/

class AsynMove extends AsyncTask<Integer, Integer, Void> {

@Override

protected Void doInBackground(Integer... params) {

int times;

if (mRightMargin % Math.abs(params[0]) == 0)// 整除

times = mRightMargin / Math.abs(params[0]);

else

// 有余数

times = mRightMargin / Math.abs(params[0]) + 1;

for (int i = 0; i < times; i++) {

publishProgress(params);

try {

Thread.sleep(Math.abs(params[0]));

} catch (InterruptedException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

return null;

}

@Override

protected void onProgressUpdate(Integer... params) {

LayoutParams lp = (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回调函数

}

else if(lp.rightMargin==-(mRightMargin) && panelClosedEvent!=null){//收缩之后

panelClosedEvent.onPanelClosed(Panel.this);//调用CLOSE回调函数

}

Panel.this.setLayoutParams(lp);

}

}

}

</span>

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

view
plainprint?

<span style="font-family:Comic Sans MS;font-size:18px;">public class main extends Activity {

public Panel panel;

public LinearLayout container;

public GridView gridview;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

this.setTitle("“可动态布局”的抽屉组件之构建基础-----hellogv");

gridview = (GridView) findViewById(R.id.gridview);

container=(LinearLayout)findViewById(R.id.container);

panel=new Panel(this,gridview,200,LayoutParams.FILL_PARENT);

container.addView(panel);//加入Panel控件

//新建测试组件

TextView tvTest=new TextView(this);

tvTest.setLayoutParams(new LayoutParams(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 = new ArrayList<HashMap<String, Object>>();

for (int i = 0; i < 100; i++) {

HashMap<String, Object> map = new HashMap<String, Object>();

map.put("ItemImage", R.drawable.icon);

map.put("ItemText", "NO." + String.valueOf(i));

lstImageItem.add(map);

}

SimpleAdapter saImageItems = new SimpleAdapter(this,

lstImageItem,

R.layout.item,

new String[] { "ItemImage", "ItemText" },

new int[] { R.id.ItemImage, R.id.ItemText });

gridview.setAdapter(saImageItems);

gridview.setOnItemClickListener(new ItemClickListener());

}

PanelClosedEvent panelClosedEvent =new PanelClosedEvent(){

@Override

public void onPanelClosed(View panel) {

Log.e("panelClosedEvent","panelClosedEvent");

}

};

PanelOpenedEvent panelOpenedEvent =new PanelOpenedEvent(){

@Override

public void onPanelOpened(View panel) {

Log.e("panelOpenedEvent","panelOpenedEvent");

}

};

class ItemClickListener implements OnItemClickListener {

@Override

public void onItemClick(AdapterView<?> arg0,View arg1, int arg2, long arg3) {

@SuppressWarnings("unchecked")

HashMap<String, Object> item = (HashMap<String, Object>) arg0

.getItemAtPosition(arg2);

setTitle((String) item.get("ItemText"));

}

}</span>

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