[转]抽屉 Panel 研究

最新推荐文章于 2024-10-31 14:49:25 发布

weixin_30410999

最新推荐文章于 2024-10-31 14:49:25 发布

阅读量73

点赞数

文章标签：移动开发 java

原文链接：http://www.cnblogs.com/GnagWang/archive/2011/06/28/2092411.html

版权

大家对抽屉控件的第一反应就是系统提供的如下：

其实该控件的原理说白了很简单即：

* ViewGroup 如：LinearLayout 用于放置各种View

* Button 用于展开/收起 ViewGroup

所以该控件的大致布局应如下：

Java代码

<Panel>
<Button />
<LinearLayout >
<TextView />
<ImageView />
</LinearLayout>
</Panel>

为了降低开发难度我打算定义 Panel extends LinearLayout

[代码步骤]

1. 定义一些XML用到的属性

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为：

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 并设置之

Java代码

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 背景图

Java代码

//设置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

Java代码

//回调函数界面初始化快结束时调用用于得到 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

Java代码

@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

Java代码

// 定义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)

Java代码

//回调函数用于监听 Panel 的开合效果见：setOnClickLstener(OnClickListener listener)
public static interface OnPanelListener {
//- open
public void onPanelOpened(Panel panel);
//- close
public void onPanelClosed(Panel panel);
}

10. 开即：打开ViewGroup

Java代码

public void open(){
if(isAnimation){
doAnimationOpen();
}
else {
doOpen();
}
}
public void doOpen(){
mContent.setVisibility(VISIBLE);
}
public void doAnimationOpen(){
mContent.setVisibility(VISIBLE);
post(aOpen);
}

11. 定义开的Animation

Java代码

//- 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

Java代码

public void close(){
if(isAnimation){
doAnimationClose();
}
else {
doClose();
}
}
public void doClose(){
mContent.setVisibility(GONE);
}
public void doAnimationClose(){
post(aClose);
}

13. 定义合的Animation

Java代码

//- 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);
}
};