電子發燒友App
二、可動態布局的Android抽屜之完整篇
以前曾經介紹過《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的源碼：
［html］ view plaincopyprint？
《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》
《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的源碼：
［html］ view plaincopyprint？
《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》
《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是本文核心，抽屜組件的源碼，這個抽屜只實現了從右往左的彈出/從左往右的收縮，讀者可以根據自己的需要修改源碼來改變抽屜動作的方向：
［java］ view plaincopyprint？
《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）;
}
工商網監
評論