3

AndroidのEvernoteアプリには右下に+ボタンがありますが、これは何かライブラリを利用したものなのでしょうか。それとも標準でできるのでしょうか。
ライセンスを読んでライブラリを調べてみたのですが結局分からず、教えていただければと思います。

主にしたいことは、右下にボタンを出して押したら上にメニューが表示され選択されれば実行。のようなことです。(ほぼ、Evernoteと同じことがしたいです。)

1 件の回答 1

2

標準でも似たような動きは可能です。FrameLayoutでレイアウトを重ねて表示し、そこからタップでアニメーションしているのではないかと思われます。
APIレベル12以上でないと動きませんが、私が作るとしたら以下のようなコードになります。
なお、get_scale()の値の最適化や、レイアウトXMLのマージン等は端末の画面サイズ等を取得して動的に変更すべきです。適時調整して下さい。また、各メニューのタップリスナーも省略しています。

//MainActivity.java
//必要API Level:12以上

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
// フィールドの定義
LinearLayout[] ll = null;
ImageView iv_plus = null;
float scale = 0;
float scaled_px1 = 0;
float scaled_px2 = 0;
boolean menu_opened = false;// メニュータップフラグ
private static final long ANIMATION_TIMES = 700;//ミリ秒

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public void onResume() {
super.onResume();
findItemView();
get_scale();
}

private void findItemView() {
ll = new LinearLayout[6];
ll[0] = (LinearLayout) findViewById(R.id.item1_top);
ll[1] = (LinearLayout) findViewById(R.id.item2);
ll[2] = (LinearLayout) findViewById(R.id.item3);
ll[3] = (LinearLayout) findViewById(R.id.item4);
ll[4] = (LinearLayout) findViewById(R.id.item5);
ll[5] = (LinearLayout) findViewById(R.id.item6_bottom);
iv_plus = (ImageView) findViewById(R.id.plus_ic);
}

private void get_scale() {
scale = getResources().getDisplayMetrics().density;
scaled_px1 = -384 * scale;
scaled_px2 = 64 * scale;
}

public void plus_ic(View v) {
// フラグ管理
if (menu_opened == false) {
menu_opened = true;
menu_open();
} else {
menu_opened = false;
menu_close();
}
}

private void menu_open() {
iv_plus.animate().setInterpolator(new OvershootInterpolator());
iv_plus.animate().setDuration(ANIMATION_TIMES);
iv_plus.animate().rotation(135).alpha(0.9f);
for (int i = 0, j = ll.length; i < j; i++) {
ll[i].animate().setInterpolator(new AccelerateDecelerateInterpolator());
ll[i].animate().setDuration(ANIMATION_TIMES);
ll[i].animate().x(0).y(scaled_px1 + (scaled_px2 * i)).alpha(0.9f);
}
}

private void menu_close() {
iv_plus.animate().setInterpolator(new OvershootInterpolator());
iv_plus.animate().setDuration(ANIMATION_TIMES);
iv_plus.animate().rotation(0).alpha(0.9f);
for (int i = 0, j = ll.length; i < j; i++) {
ll[i].animate().setInterpolator(new LinearInterpolator());
ll[i].animate().setDuration(ANIMATION_TIMES);
ll[i].animate().x(0).y(0).alpha(0f);
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

//activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.test.MainActivity" >

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:text="1行目" />

<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:text="2行目" />

<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:text="3行目" />

<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:text="4行目" />

<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:text="5行目" />

<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:text="6行目" />
</LinearLayout>
</ScrollView>

<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="@layout/include" />

</FrameLayout>

//include.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:id="@+id/item1_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:orientation="horizontal" >

<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="250dp"
android:layout_marginTop="440dp"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/item2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:orientation="horizontal" >

<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="250dp"
android:layout_marginTop="440dp"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/item3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:orientation="horizontal" >

<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="250dp"
android:layout_marginTop="440dp"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/item4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:orientation="horizontal" >

<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="250dp"
android:layout_marginTop="440dp"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/item5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:orientation="horizontal" >

<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="250dp"
android:layout_marginTop="440dp"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/item6_bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:orientation="horizontal" >

<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="250dp"
android:layout_marginTop="440dp"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<ImageView
android:id="@+id/plus_ic"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="250dp"
android:layout_marginTop="440dp"
android:alpha="0.9"
android:onClick="plus_ic"
android:src="@drawable/ic_launcher" />

</FrameLayout>
2
  • とても参考になりました。なるほど、アニメーションを使うんですね。 ありがとうございました。 Commented 2015年4月5日 14:21
  • お役にたてたようで幸いです。アニメーションは色々なやり方がありますが、APIレベルが問題なければ.animate()でやるのが一番簡単だと思います。全体のレイアウトの複雑さによっては重めですが、.y()等で位置を動かす際には、今回のようにXML側で画面いっぱいのLinearLayoutの中に対象を入れ、それごと動かすことによって、再度.y(0)の呼び出しで対象を簡単に初期位置に戻すことが出来ます。
    – M.M.
    Commented 2015年4月5日 15:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。