ViewをTranslateして表示する

Button01の背後からButton02をスライドアニメーションさせて表示する。
なんでこんなの実装しなきゃいけないんだろう、とか思いつつ。
個人的には趣味じゃないですが、やらなきゃいけない状況だったのでやってみました。
結構ハマりつつ。

◇完成イメージ
こんな感じでButton02がアニメーションする。






◇やり方
「layout.xml」はこんな感じ。
ポイントはButton02を乗せたSlidingPanelクラスをButton01の下に配置します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"


<!-- 前面に表示されているボタン -->
<Button
android:id="@+id/Button01"
android:text="Button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

<!-- 下にスライドするLayout(初期状態はGONE) -->
<com.awwa.animsample2.SlidingPanel
android:id="@+id/panel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="@id/Button01"
android:visibility="gone"

<Button
android:id="@+id/Button02"
android:text="Button02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</com.awwa.animsample2.SlidingPanel>
</RelativeLayout>



「SlidingPanel」の実装はこんな感じ。
slide()メソッドを定義して外部から呼んでもらいます。

public class SlidingPanel extends LinearLayout {
private Context context;

public SlidingPanel(final Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}

public void slide() {
Animation anim;
setVisibility(View.VISIBLE);
anim = AnimationUtils.loadAnimation(context, R.anim.translate);
startAnimation(anim);
}



んで、「AnimSample2Activity.java」。
Button01クリック時slide()を呼び出します。

public class AnimSample2Activity extends Activity implements OnClickListener {

private Button button01;
private SlidingPanel panel;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

panel=(SlidingPanel)findViewById(R.id.panel);

button01 = (Button)findViewById(R.id.Button01);
button01.setOnClickListener(this);

// Control Z order
button01.bringToFront();
}

@Override
public void onClick(View v) {
if ( v == button01 )
panel.slide();
}
}

コメント

このブログの人気の投稿

Joinノードを使う(その1)

Execノードを使う

Joinノードを使う(その4)