android - 如何创建动画扩展菜单

Question

我想创建像附加图像中的动画菜单。

当点击圆形按钮（带有向上箭头）时，它会向上扩展（如第二张图片所示）。注意：图像未按比例绘制，请原谅我。

我粗略的想法会是这样的：

• 在展开的菜单中，第一行和第二行是相同的视图
  类型，所以我将为该视图创建一个布局文件
• 第三行将是另一种布局。
• 使用容器（FrameLayout）来承载圆形 ImageButton（带箭头的那个）
• onCreate活动，膨胀容器，添加所有上述视图，但设置为仅对第一行和圆形按钮可见。
• 切换圆形按钮时，只需设置可见/不可见的其他视图。

我的问题：

• 我的方法有什么问题，任何指向一个好的教程的指针？
• 容器应该是 FrameLayout 还是别的什么？
• 在设置可见/不可见其他视图时，如何创建真正展开和折叠的效果？

抱歉，如果问题含糊不清。谢了。

Answer 1

您可以使用滑动抽屉。

从这里的例子中汲取灵感..

这是完整的代码..

public class SlidingDrawerActivity extends Activity implements OnClickListener {
Button slideButton,b1, b2,b3;
SlidingDrawer slidingDrawer;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sliding_drawer);
slideButton = (Button) findViewById(R.id.slideButton);
slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);
b1 = (Button) findViewById(R.id.Button01);
b2 = (Button) findViewById(R.id.Button02);
b3 = (Button) findViewById(R.id.Button03);
b1.setOnClickListener(this);
b2.setOnClickListener(this);
b3.setOnClickListener(this);
slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
@Override
public void onDrawerOpened() {
slideButton.setText("V");
}
});
slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
@Override
public void onDrawerClosed() {
slideButton.setText("^");
}
});
}
@Override
public void onClick(View v) {
Button b = (Button)v;
Toast.makeText(SlidingDrawerActivity.this, b.getText() + " is Clicked :)", Toast.LENGTH_SHORT).show();
}
} 

activity_sliding_drawer.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Drag the control at the bottom"
android:textSize="20dp"
tools:context=".SlidingDrawerActivity" />

<SlidingDrawer
android:layout_alignParentBottom="true"
android:id="@+id/SlidingDrawer"
android:layout_width="wrap_content"
android:layout_height="250dip"
android:content="@+id/contentLayout"
android:handle="@+id/slideButton"
android:orientation="vertical"
android:padding="10dip" >

<Button
android:id="@+id/slideButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="^"
>
</Button>

<LinearLayout
android:id="@+id/contentLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >

<Button
android:id="@+id/Button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:text="Button 1" >
</Button>

<Button
android:id="@+id/Button02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:text="Button 2" >
</Button>
<Button
android:id="@+id/Button03"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:text="Button 3" >
</Button>
</LinearLayout>
</SlidingDrawer>

</RelativeLayout>

Answer 2

检查这个伟大的图书馆：

https://github.com/umano/AndroidSlidingUpPanel

在谷歌播放音乐中实现了相同的模式。