抽屉 Panel 研究
大家对抽屉控件的第一反应就是系统提供的 如下：
其实 该控件的原理说白了 很简单 即：
* ViewGroup 如：LinearLayout 用于放置各种View
* Button 用于 展开/收起 ViewGroup
所以该控件的大致布局应如下：
为了降低开发难度 我打算 定义 Panel extends LinearLayout
[代码 步骤]
1. 定义一些XML用到的属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Panel">
//动画演变时长
<attr name="animationDuration" format="integer" />
//摆放位置 只能取下面的4个值
<attr name="position">
<enum name="top" value="0" />
<enum name="bottom" value="1" />
<enum name="left" value="2" />
<enum name="right" value="3" />
</attr>
//开合是否有动画效果
<attr name="animationEnable" format="boolean" />
</declare-styleable>
</resources>
2. 一个标准的XML为：
<org.panel.Panel android:id="@+id/leftPanel" android:layout_width="wrap_content" android:layout_height="wrap_content" panel:position="left" panel:animationDuration="10" panel:animationEnable="true" android:layout_gravity="left" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" > <CheckBox android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Top Panel!" android:textSize="16dip" android:textColor="#eee" android:textStyle="bold" /> <EditText android:layout_width="200dip" android:layout_height="wrap_content" /> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:text="OK!" /> </LinearLayout> </org.panel.Panel>
3. 解析该XML 并设置之
public Panel(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Panel);
mDuration = a.getInteger(R.styleable.Panel_animationDuration, 750);
mPosition = a.getInteger(R.styleable.Panel_position, BOTTOM);
isAnimation = a.getBoolean(R.styleable.Panel_animationEnable, true);
a.recycle();
//根据mPosition 决定LinearLayout的android:orientation属性
mOrientation = (mPosition == TOP || mPosition == BOTTOM)? VERTICAL : HORIZONTAL;
setOrientation(mOrientation);
//初始化mHandle 背景图
initialHandlerBg();
}
4. 设定Button 背景图
//设置mHandle所用背景图
private void initialHandlerBg(){
if(mPosition == TOP){
mOpenedHandle = getResources().getDrawable(R.drawable.top_switcher_expanded_background);
mClosedHandle = getResources().getDrawable(R.drawable.top_switcher_collapsed_background);
}
else if(mPosition == BOTTOM) {
mOpenedHandle = getResources().getDrawable(R.drawable.bottom_switcher_expanded_background);
mClosedHandle = getResources().getDrawable(R.drawable.bottom_switcher_collapsed_background);
}
else if(mPosition == LEFT) {
mOpenedHandle = getResources().getDrawable(R.drawable.left_switcher_expanded_background);
mClosedHandle = getResources().getDrawable(R.drawable.left_switcher_collapsed_background);
}
else if(mPosition == RIGHT) {
mOpenedHandle = getResources().getDrawable(R.drawable.right_switcher_expanded_background);
mClosedHandle = getResources().getDrawable(R.drawable.right_switcher_collapsed_background);
}
}
5. 取出其中的 ViewGroup & Button
//回调函数 界面初始化快结束时调用 用于得到 mHandle/mContent
protected void onFinishInflate() {
super.onFinishInflate();
//得到mHandle实例
mHandle = this.getChildAt(0);
if (mHandle == null) {
throw new RuntimeException("Your Panel must have a View - mHandle");
}
mHandle.setOnClickListener(clickListener);
//得到mContent实例
mContent = this.getChildAt(1);
if (mContent == null) {
throw new RuntimeException("Your Panel must have a View - mContent");
}
//先移除mHandle/mContent 然后根据position决定二者的添加次序
removeView(mHandle);
removeView(mContent);
if (mPosition == TOP || mPosition == LEFT) {
addView(mContent);
addView(mHandle);
} else {
addView(mHandle);
addView(mContent);
}
if (mClosedHandle != null) {
mHandle.setBackgroundDrawable(mClosedHandle);
}
//隐藏 mContent
mContent.setVisibility(GONE);
}
6. 得到ViewGroup 宽度/高度 以决定动画演变范围
注意其位置 并非放在开始地方 因为那时候返回值都是0
@Override //回调函数 此时其内所有子View 宽度/高度 都已确定
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
mContentWidth = mContent.getWidth();
mContentHeight = mContent.getHeight();
paddingTop = this.getPaddingTop();
paddingLeft = this.getPaddingLeft();
}
7. 定义Button 响应事情 执行 开合ViewGroup
// 定义mHandle监听器 用于开合mContent
OnClickListener clickListener = new OnClickListener(){
public void onClick(View v) {
// TODO Auto-generated method stub
if(!isContentExpand){
open();
}
else {
close();
}
//置反 即：开-合-开-合-开-...
isContentExpand = !isContentExpand;
}
};
8. 定义开合的回调函数 具体效果 见：setOnClickListener(OnClickListener listener)
//回调函数 用于监听 Panel 的开合 效果见：setOnClickLstener(OnClickListener listener)
public static interface OnPanelListener {
//- open
public void onPanelOpened(Panel panel);
//- close
public void onPanelClosed(Panel panel);
}
10. 开 即： 打开ViewGroup
public void open(){
if(isAnimation){
doAnimationOpen();
}
else {
doOpen();
}
}
public void doOpen(){
mContent.setVisibility(VISIBLE);
}
public void doAnimationOpen(){
mContent.setVisibility(VISIBLE);
post(aOpen);
}
11. 定义开的Animation
//- open
Runnable aOpen = new Runnable() {
public void run() {
TranslateAnimation animation;
int fromXDelta = 0, toXDelta = 0, fromYDelta = 0, toYDelta = 0;
int calculatedDuration = 0;
if(mPosition == TOP){
fromYDelta = -1 * mContentHeight;
toXDelta = 0;
calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight;
}
else if(mPosition == BOTTOM){
fromYDelta = paddingTop;
toYDelta = fromYDelta + 1 * mContentHeight;
calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight;
}
else if(mPosition == LEFT){
fromXDelta = -1 * mContentWidth;
toXDelta = 0;
calculatedDuration = mDuration * Math.abs(toXDelta - fromXDelta) / mContentWidth;
}
else if(mPosition == RIGHT){
fromXDelta = paddingLeft;
toXDelta = fromYDelta + 1 * mContentHeight;
calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight;
}
animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);
animation.setDuration(calculatedDuration);
animation.setAnimationListener(aOListener);
startAnimation(animation);
}
};
12. 合 即：关闭ViewGroup
public void close(){
if(isAnimation){
doAnimationClose();
}
else {
doClose();
}
}
public void doClose(){
mContent.setVisibility(GONE);
}
public void doAnimationClose(){
post(aClose);
}
13. 定义合的Animation
//- close
Runnable aClose = new Runnable() {
public void run() {
TranslateAnimation animation;
int fromXDelta = 0, toXDelta = 0, fromYDelta = 0, toYDelta = 0;
int calculatedDuration = 0;
if(mPosition == TOP){
toYDelta = -1 * mContentHeight;
calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight;
}
else if(mPosition == BOTTOM){
fromYDelta = 1 * mContentHeight;
toYDelta = paddingTop;
calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight;
}
else if(mPosition == LEFT){
toXDelta = -1 * mContentWidth;
calculatedDuration = mDuration * Math.abs(toXDelta - fromXDelta) / mContentWidth;
}
else if(mPosition == RIGHT){
}
animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);
animation.setDuration(calculatedDuration);
animation.setAnimationListener(aCListener);
startAnimation(animation);
}
};
14. 定义二者Animation 的回调函数 即：结束后 更改Button背景图 通知OnPanelListener
//善后工作 比如：改变mHandle背景图 通知开合监听器
private void postProcess() {
// to update mHandle 's background
if (!isContentExpand ) {
mHandle.setBackgroundDrawable(mClosedHandle);
}
else {
mHandle.setBackgroundDrawable(mOpenedHandle);
}
// invoke listener if any
if (panelListener != null) {
if (isContentExpand) {
panelListener.onPanelOpened(Panel.this);
}
else {
panelListener.onPanelClosed(Panel.this);
}
}
}
15. emulator 运行截图：
* 先贴其布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:panel="http://schemas.android.com/apk/res/org.panel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<org.panel.Panel
android:id="@+id/leftPanel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
panel:position="left"
panel:animationDuration="10"
panel:animationEnable="true"
android:layout_gravity="left"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Top Panel!"
android:textSize="16dip"
android:textColor="#eee"
android:textStyle="bold"
/>
<EditText
android:layout_width="200dip"
android:layout_height="wrap_content"
/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="OK!"
/>
</LinearLayout>
</org.panel.Panel>
<org.panel.Panel
android:id="@+id/rightPanel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
panel:position="right"
panel:animationDuration="10"
panel:animationEnable="true"
android:layout_gravity="right"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/beijing4_b"
/>
</LinearLayout>
</org.panel.Panel>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16dip"
android:textColor="#ddd"
android:text="other area!!!!!!!!"
/>
<Button
android:id="@+id/button"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Yes!"
/>
</LinearLayout>
</LinearLayout>
* 运行截图：
- 开
- 合
完工！