http://blog.csdn.net/hellogv/article/details/6789698
http://blog.csdn.net/hellogv/article/details/6789698
http://blog.csdn.net/hellogv/article/details/6789698http://blog.csdn.net/hellogv/article/details/6789698
http://blog.csdn.net/hellogv/article/details/6789698
http://blog.csdn.net/hellogv/article/details/6789698
本文来自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的源码:
- <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的源码:
- <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是本文核心,抽屉组件的源码,这个抽屉只实现了从右往左的弹出/从左往右的收缩,读者可以根据自己的需要修改源码来改变抽屉动作的方向:
- <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的使用:
- <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加入拖拉效果的处理!
http://blog.csdn.net/hellogv/article/details/6264706
http://blog.csdn.net/hellogv/article/details/6264706
http://blog.csdn.net/hellogv/article/details/6264706
本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处!
在android上要实现类似Launch的抽屉效果,大家一定首先会想起SlidingDrawer。SlidingDrawer是android官方控件之一,本文的主角不是它,而是民间的控件工具集合~~~android-misc-widgets。android-misc-widgets里面包含几个widget:Panel、SmoothButton、Switcher、VirtualKeyboard,还有一些动画特效,本文主要介绍抽屉容器Panel的用法。android-misc-widgets的google工程地址:-widgets/http://code.google.com/p/android-misc,工程代码中Panel的演示效果如下:
这个Panel控件可以轻易实现不同方向的抽屉效果,比SlidingDrawer有更强的扩展性!
在多次使用Panel的过程中,发现Panel有个bug,会间断性出现“闪烁”,也就是在onTouchListener里面的触发ACTION_DOWN后,抽屉瞬间弹出然后瞬间回收(版本日期为Feb 3, 2009)。把原Panel的OnTouchListener,即以下代码:
- OnTouchListener touchListener = new OnTouchListener() {
- int initX;
- int initY;
- boolean setInitialPosition;
- public boolean onTouch(View v, MotionEvent event) {
- if (mState == State.ANIMATING) {
- // we are animating
- return false;
- }
- / Log.d(TAG, "state: " + mState + " x: " + event.getX() + " y: " + event.getY());
- int action = event.getAction();
- if (action == MotionEvent.ACTION_DOWN) {
- if (mBringToFront) {
- bringToFront();
- }
- initX = 0;
- initY = 0;
- if (mContent.getVisibility() == GONE) {
- // since we may not know content dimensions we use factors here
- if (mOrientation == VERTICAL) {
- initY = mPosition == TOP? -1 : 1;
- } else {
- initX = mPosition == LEFT? -1 : 1;
- }
- }
- setInitialPosition = true;
- } else {
- if (setInitialPosition) {
- // now we know content dimensions, so we multiply factors...
- initX *= mContentWidth;
- initY *= mContentHeight;
- // ... and set initial panel's position
- mGestureListener.setScroll(initX, initY);
- setInitialPosition = false;
- // for offsetLocation we have to invert values
- initX = -initX;
- initY = -initY;
- }
- // offset every ACTION_MOVE & ACTION_UP event
- event.offsetLocation(initX, initY);
- }
- if (!mGestureDetector.onTouchEvent(event)) {
- if (action == MotionEvent.ACTION_UP) {
- // tup up after scrolling
- post(startAnimation);
- }
- }
- return false;
- }
- };
替换为:
- OnTouchListener touchListener = new OnTouchListener() {
- float touchX, touchY;
- public boolean onTouch(View v, MotionEvent event) {
- if (mState == State.ANIMATING) {
- // we are animating
- return false;
- }
- int action = event.getAction();
- if (action == MotionEvent.ACTION_DOWN) {
- if (mBringToFront) {
- bringToFront();
- }
- touchX = event.getX();
- touchY = event.getY();
- }
- if (!mGestureDetector.onTouchEvent(event)) {
- if (action == MotionEvent.ACTION_UP) {
- // tup up after scrolling
- int size = (int) (Math.abs(touchX - event.getX()) + Math
- .abs(touchY - event.getY()));
- if (size == mContentWidth || size == mContentHeight) {
- mState = State.ABOUT_TO_ANIMATE;
- //Log.e("size", String.valueOf(size));
- //Log.e(String.valueOf(mContentWidth),String.valueOf(mContentHeight));
- }
- post(startAnimation);
- }
- }
- return false;
- }
- };
即可修复这个bug,并且也同样实现了OnClickListener的功能,可以把原Panel的OnClickListener给删掉了!
http://blog.csdn.net/hellogv/article/details/6264706
http://blog.csdn.net/hellogv/article/details/6264706
http://blog.csdn.net/hellogv/article/details/6264706
本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处!
在android上要实现类似Launch的抽屉效果,大家一定首先会想起SlidingDrawer。SlidingDrawer是android官方控件之一,本文的主角不是它,而是民间的控件工具集合~~~android-misc-widgets。android-misc-widgets里面包含几个widget:Panel、SmoothButton、Switcher、VirtualKeyboard,还有一些动画特效,本文主要介绍抽屉容器Panel的用法。android-misc-widgets的google工程地址:-widgets/http://code.google.com/p/android-misc,工程代码中Panel的演示效果如下:
这个Panel控件可以轻易实现不同方向的抽屉效果,比SlidingDrawer有更强的扩展性!
在多次使用Panel的过程中,发现Panel有个bug,会间断性出现“闪烁”,也就是在onTouchListener里面的触发ACTION_DOWN后,抽屉瞬间弹出然后瞬间回收(版本日期为Feb 3, 2009)。把原Panel的OnTouchListener,即以下代码:
- OnTouchListener touchListener = new OnTouchListener() {
- int initX;
- int initY;
- boolean setInitialPosition;
- public boolean onTouch(View v, MotionEvent event) {
- if (mState == State.ANIMATING) {
- // we are animating
- return false;
- }
- / Log.d(TAG, "state: " + mState + " x: " + event.getX() + " y: " + event.getY());
- int action = event.getAction();
- if (action == MotionEvent.ACTION_DOWN) {
- if (mBringToFront) {
- bringToFront();
- }
- initX = 0;
- initY = 0;
- if (mContent.getVisibility() == GONE) {
- // since we may not know content dimensions we use factors here
- if (mOrientation == VERTICAL) {
- initY = mPosition == TOP? -1 : 1;
- } else {
- initX = mPosition == LEFT? -1 : 1;
- }
- }
- setInitialPosition = true;
- } else {
- if (setInitialPosition) {
- // now we know content dimensions, so we multiply factors...
- initX *= mContentWidth;
- initY *= mContentHeight;
- // ... and set initial panel's position
- mGestureListener.setScroll(initX, initY);
- setInitialPosition = false;
- // for offsetLocation we have to invert values
- initX = -initX;
- initY = -initY;
- }
- // offset every ACTION_MOVE & ACTION_UP event
- event.offsetLocation(initX, initY);
- }
- if (!mGestureDetector.onTouchEvent(event)) {
- if (action == MotionEvent.ACTION_UP) {
- // tup up after scrolling
- post(startAnimation);
- }
- }
- return false;
- }
- };
替换为:
- OnTouchListener touchListener = new OnTouchListener() {
- float touchX, touchY;
- public boolean onTouch(View v, MotionEvent event) {
- if (mState == State.ANIMATING) {
- // we are animating
- return false;
- }
- int action = event.getAction();
- if (action == MotionEvent.ACTION_DOWN) {
- if (mBringToFront) {
- bringToFront();
- }
- touchX = event.getX();
- touchY = event.getY();
- }
- if (!mGestureDetector.onTouchEvent(event)) {
- if (action == MotionEvent.ACTION_UP) {
- // tup up after scrolling
- int size = (int) (Math.abs(touchX - event.getX()) + Math
- .abs(touchY - event.getY()));
- if (size == mContentWidth || size == mContentHeight) {
- mState = State.ABOUT_TO_ANIMATE;
- //Log.e("size", String.valueOf(size));
- //Log.e(String.valueOf(mContentWidth),String.valueOf(mContentHeight));
- }
- post(startAnimation);
- }
- }
- return false;
- }
- };
即可修复这个bug,并且也同样实现了OnClickListener的功能,可以把原Panel的OnClickListener给删掉了!