Android UIステップアップのポップアップの使用(2)--通信録のポップアップ効果を実現
77777 ワード
転載を歓迎して、転載して出典を明記してください!さもないと法律の責任を追及します!http://www.cnblogs.com/noTice520
android通信録の弾窓効果を体験したことがあると思います.図に示すように、
AndroidではQuickContactBadgeを提供してこの効果を実現する.ここで簡単に説明します.
まず、レイアウトファイルを作成します.
簡単です.レイアウトにQuickContactBadgeコンポーネントを追加すればいいです.
Activityでの設定:
注意通信録を読む権限を加える
効果は図のように実現されます.
しかし、このコンポーネントの限界は大きく、ポップアップウィンドウにはいくつかのcontact操作しかありません.しかしよく考えてみると、このような操作は難しくなく、アニメーション付きの弾窓ではないでしょうか.次は私たち自身が実現します.
動画付きのポップウィンドを実現するのは難しくありませんが、私の前のブログでポップウィンドの使用について話したことがありますが、ポップウィンドを知らない友达は見てもいいです.ここで実現する難点は主にこれらがあります.
1.基準viewの画面内の位置を判断し、ポップアップの位置とアニメーションを決定します.これは非常に重要な点で、基準が画面の上にあるかもしれないので、下にポップアップします.
2.弾窓のボタンを動的に追加し、クリックを実現
3.矢印位置の制御.矢印は基準の下に保つべきです.
4.アニメーションの一致.中には2種類のアニメがあります.1つはPopupWindowポップアップアニメーションで、私たちは弾窓のstyleを設定することで実現します(styleの使い方は私の前のブログを参考にすることができます).もう1つは弾窓の真ん中のレイアウトのアニメーションです.
難点を知ってから書くと便利になります.
まず、弾窓のレイアウトを実現します.
フォームの内部にHorizontalScrollViewを使用すると、スライド効果が得られます.Actionitemと呼ばれるこのレイアウトにボタンを動的に追加できます.
ActionItemクラスを書くことで、ArrayListをコンテナとして動的にactionitemを追加することができます.これらは2つ目の難点にサービスしています.
次はこの弾窓の実現で、PopupWindowクラスを継承します.このクラスでは、位置によるアニメーションおよびポップアップ位置の設定を実装し、クラス呼び出しを実装してitemを動的に追加し、アニメーション効果を設定する方法を提供する必要があります.
コードは次のとおりです.
ちょっと長いですが、注釈ははっきり書いてあります.show()メソッドでウィンドウのポップアップを完了します.他のメソッドを呼び出してウィンドウのポップアップ位置を設定し、対応するアニメーションのポップアップスタイルと矢印の向きと位置を設定し、action itemを作成します.皆さんはこの方法から見て、それぞれの実現を見ることができます.
最後にテストクラスを書きます.Buttonを画面の上部に、画面の下部に置きます.ポップアップウィンドウをクリックします.
PopupWindowのスタイルの実現についてお話しします.スタイルコードの1つは次のとおりです.
2つのitemを書き、それぞれポップアップと消去アニメーションを実現します.紙幅が限られているので(もう長いようです...)、全部貼らない.アニメーションはすべて1つのscaleが1つのalphaをプラスするので、アニメーションの熟知していない友达に対して自分で研究することができて、底から弾き出すアニメーションのファイルgrow_from_bottom.xml:
最後に、実装効果を見てみましょう.
よし、皆さんが好きで問題があったら伝言を残して交流してください.
転載を歓迎して、転載して出典を明記してください!さもないと法律の責任を追及します!http://www.cnblogs.com/noTice520
android通信録の弾窓効果を体験したことがあると思います.図に示すように、
AndroidではQuickContactBadgeを提供してこの効果を実現する.ここで簡単に説明します.
まず、レイアウトファイルを作成します.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<QuickContactBadge
android:id="@+id/badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon">
</QuickContactBadge>
</LinearLayout> 簡単です.レイアウトにQuickContactBadgeコンポーネントを追加すればいいです.
Activityでの設定:
public class QuickcontactActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
QuickContactBadge smallBadge = (QuickContactBadge) findViewById(R.id.badge);
// email contact
smallBadge.assignContactFromEmail("[email protected]", true);
//
smallBadge.setMode(ContactsContract.QuickContact.MODE_SMALL);
}
}注意通信録を読む権限を加える
効果は図のように実現されます.
しかし、このコンポーネントの限界は大きく、ポップアップウィンドウにはいくつかのcontact操作しかありません.しかしよく考えてみると、このような操作は難しくなく、アニメーション付きの弾窓ではないでしょうか.次は私たち自身が実現します.
動画付きのポップウィンドを実現するのは難しくありませんが、私の前のブログでポップウィンドの使用について話したことがありますが、ポップウィンドを知らない友达は見てもいいです.ここで実現する難点は主にこれらがあります.
1.基準viewの画面内の位置を判断し、ポップアップの位置とアニメーションを決定します.これは非常に重要な点で、基準が画面の上にあるかもしれないので、下にポップアップします.
2.弾窓のボタンを動的に追加し、クリックを実現
3.矢印位置の制御.矢印は基準の下に保つべきです.
4.アニメーションの一致.中には2種類のアニメがあります.1つはPopupWindowポップアップアニメーションで、私たちは弾窓のstyleを設定することで実現します(styleの使い方は私の前のブログを参考にすることができます).もう1つは弾窓の真ん中のレイアウトのアニメーションです.
難点を知ってから書くと便利になります.
まず、弾窓のレイアウトを実現します.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<FrameLayout
android:layout_marginTop="10dip"
android:id="@+id/header2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/quickcontact_top_frame"/>
<ImageView
android:id="@+id/arrow_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/quickcontact_arrow_up" />
<HorizontalScrollView
android:id="@+id/scroll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadingEdgeLength="0dip"
android:layout_below="@id/header2"
android:background="@drawable/quickcontact_slider_background"
android:scrollbars="none">
<LinearLayout
android:id="@+id/tracks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="4dip"
android:paddingBottom="4dip"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/quickcontact_slider_grip_left" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/quickcontact_slider_grip_right" />
</LinearLayout>
</HorizontalScrollView>
<FrameLayout
android:id="@+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/scroll"
android:background="@drawable/quickcontact_bottom_frame" />
<ImageView
android:id="@+id/arrow_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-1dip"
android:layout_below="@id/footer"
android:src="@drawable/quickcontact_arrow_down" />
</RelativeLayout>フォームの内部にHorizontalScrollViewを使用すると、スライド効果が得られます.Actionitemと呼ばれるこのレイアウトにボタンを動的に追加できます.
ActionItemクラスを書くことで、ArrayListをコンテナとして動的にactionitemを追加することができます.これらは2つ目の難点にサービスしています.
package com.notice.quickaction;
import android.graphics.drawable.Drawable;
import android.view.View.OnClickListener;
/**
* Action item, item ImageView TextView
*/
public class ActionItem {
private Drawable icon;
private String title;
private OnClickListener listener;
/**
*
*/
public ActionItem() {
}
/**
* Drawable
*/
public ActionItem(Drawable icon) {
this.icon = icon;
}
/**
*
*/
public void setTitle(String title) {
this.title = title;
}
/**
*
*
* @return action title
*/
public String getTitle() {
return this.title;
}
/**
*
*/
public void setIcon(Drawable icon) {
this.icon = icon;
}
/**
*
*/
public Drawable getIcon() {
return this.icon;
}
/**
*
*/
public void setOnClickListener(OnClickListener listener) {
this.listener = listener;
}
/**
*
*/
public OnClickListener getListener() {
return this.listener;
}
}次はこの弾窓の実現で、PopupWindowクラスを継承します.このクラスでは、位置によるアニメーションおよびポップアップ位置の設定を実装し、クラス呼び出しを実装してitemを動的に追加し、アニメーション効果を設定する方法を提供する必要があります.
コードは次のとおりです.
package com.notice.quickaction;
import java.util.ArrayList;
import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Interpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.TextView;
/**
* ，
*/
public class QuickActions extends PopupWindow {
private final View root;
private final ImageView mArrowUp;
private final ImageView mArrowDown;
private final Animation mTrackAnim;
private final LayoutInflater inflater;
private final Context context;
protected final View anchor;
protected final PopupWindow window;
private Drawable background = null;
protected final WindowManager windowManager;
protected static final int ANIM_GROW_FROM_LEFT = 1;
protected static final int ANIM_GROW_FROM_RIGHT = 2;
protected static final int ANIM_GROW_FROM_CENTER = 3;
protected static final int ANIM_AUTO = 4;
private int animStyle;
private boolean animateTrack;
private ViewGroup mTrack;
private ArrayList<ActionItem> actionList;
/**
* ，
*
* @param anchor
*/
public QuickActions(View anchor) {
super(anchor);
this.anchor = anchor;
this.window = new PopupWindow(anchor.getContext());
// popwindow window
window.setTouchInterceptor(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {
QuickActions.this.window.dismiss();
return true;
}
return false;
}
});
// windowManager ，
windowManager = (WindowManager) anchor.getContext().getSystemService(Context.WINDOW_SERVICE);
actionList = new ArrayList<ActionItem>();
context = anchor.getContext();
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// ，root
root = (ViewGroup) inflater.inflate(R.layout.quickaction, null);
//
mArrowDown = (ImageView) root.findViewById(R.id.arrow_down);
mArrowUp = (ImageView) root.findViewById(R.id.arrow_up);
setContentView(root);
mTrackAnim = AnimationUtils.loadAnimation(anchor.getContext(), R.anim.rail);
//
mTrackAnim.setInterpolator(new Interpolator() {
public float getInterpolation(float t) {
final float inner = (t * 1.55f) - 1.1f;
return 1.2f - inner * inner;
}
});
//
mTrack = (ViewGroup) root.findViewById(R.id.tracks);
animStyle = ANIM_AUTO;//
animateTrack = true;
}
/**
* flag
*/
public void animateTrack(boolean animateTrack) {
this.animateTrack = animateTrack;
}
/**
*
*/
public void setAnimStyle(int animStyle) {
this.animStyle = animStyle;
}
/**
* action
*/
public void addActionItem(ActionItem action) {
actionList.add(action);
}
/**
*
*/
public void show() {
// ， window
preShow();
int[] location = new int[2];
// anchor
anchor.getLocationOnScreen(location);
// anchor
Rect anchorRect = new Rect(location[0], location[1], location[0] + anchor.getWidth(), location[1]
+ anchor.getHeight());
root.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
root.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
int rootWidth = root.getMeasuredWidth();
int rootHeight = root.getMeasuredHeight();
//
int screenWidth = windowManager.getDefaultDisplay().getWidth();
// x/y
int xPos = (screenWidth - rootWidth) / 2;
int yPos = anchorRect.top - rootHeight;
boolean onTop = true;
//
if (rootHeight > anchorRect.top) {
yPos = anchorRect.bottom;
onTop = false;
}
// ，
showArrow(((onTop) ? R.id.arrow_down : R.id.arrow_up), anchorRect.centerX());
//
setAnimationStyle(screenWidth, anchorRect.centerX(), onTop);
// action list
createActionList();
//
window.showAtLocation(this.anchor, Gravity.NO_GRAVITY, xPos, yPos);
//
if (animateTrack) mTrack.startAnimation(mTrackAnim);
}
/**
*
*/
protected void preShow() {
if (root == null) {
throw new IllegalStateException(" ");
}
// popupwindow ， root ， popupwindow BitmapDrawable
if (background == null) {
window.setBackgroundDrawable(new BitmapDrawable());
} else {
window.setBackgroundDrawable(background);
}
window.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
window.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
window.setTouchable(true);
window.setFocusable(true);
window.setOutsideTouchable(true);
//
window.setContentView(root);
}
/**
*
*
* @param screenWidth
* @param requestedX
* @param onTop flag ， true anchor
*/
private void setAnimationStyle(int screenWidth, int requestedX, boolean onTop) {
//
int arrowPos = requestedX - mArrowUp.getMeasuredWidth() / 2;
// animStyle
switch (animStyle) {
case ANIM_GROW_FROM_LEFT:
window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Left : R.style.Animations_PopDownMenu_Left);
break;
case ANIM_GROW_FROM_RIGHT:
window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Right : R.style.Animations_PopDownMenu_Right);
break;
case ANIM_GROW_FROM_CENTER:
window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Center : R.style.Animations_PopDownMenu_Center);
break;
case ANIM_AUTO:
if (arrowPos <= screenWidth / 4) {
window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Left : R.style.Animations_PopDownMenu_Left);
} else if (arrowPos > screenWidth / 4 && arrowPos < 3 * (screenWidth / 4)) {
window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Center : R.style.Animations_PopDownMenu_Center);
} else {
window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Right : R.style.Animations_PopDownMenu_Right);
}
break;
}
}
/**
* action list
*/
private void createActionList() {
View view;
String title;
Drawable icon;
OnClickListener listener;
int index = 1;
for (int i = 0; i < actionList.size(); i++) {
title = actionList.get(i).getTitle();
icon = actionList.get(i).getIcon();
listener = actionList.get(i).getListener();
// action item
view = getActionItem(title, icon, listener);
view.setFocusable(true);
view.setClickable(true);
//
mTrack.addView(view, index);
index++;
}
}
/**
* action item
*
* @param title action
* @param icon action
* @param listener action
* @return action item
*/
private View getActionItem(String title, Drawable icon, OnClickListener listener) {
// action
LinearLayout container = (LinearLayout) inflater.inflate(R.layout.action_item, null);
ImageView img = (ImageView) container.findViewById(R.id.icon);
TextView text = (TextView) container.findViewById(R.id.title);
if (icon != null) {
img.setImageDrawable(icon);
} else {
img.setVisibility(View.GONE);
}
if (title != null) {
text.setText(title);
} else {
text.setVisibility(View.GONE);
}
if (listener != null) {
container.setOnClickListener(listener);
}
return container;
}
/**
*
*
* @param id
* @param
*/
private void showArrow(int whichArrow, int requestedX) {
final View showArrow = (whichArrow == R.id.arrow_up) ? mArrowUp : mArrowDown;
final View hideArrow = (whichArrow == R.id.arrow_up) ? mArrowDown : mArrowUp;
final int arrowWidth = mArrowUp.getMeasuredWidth();
showArrow.setVisibility(View.VISIBLE);
ViewGroup.MarginLayoutParams param = (ViewGroup.MarginLayoutParams) showArrow.getLayoutParams();
//
param.leftMargin = requestedX - arrowWidth / 2;
hideArrow.setVisibility(View.INVISIBLE);
}
}ちょっと長いですが、注釈ははっきり書いてあります.show()メソッドでウィンドウのポップアップを完了します.他のメソッドを呼び出してウィンドウのポップアップ位置を設定し、対応するアニメーションのポップアップスタイルと矢印の向きと位置を設定し、action itemを作成します.皆さんはこの方法から見て、それぞれの実現を見ることができます.
最後にテストクラスを書きます.Buttonを画面の上部に、画面の下部に置きます.ポップアップウィンドウをクリックします.
package com.notice.quickaction;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
/**
* activity
*/
public class MyQuick extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// actionItem
final ActionItem chart = new ActionItem();
// ， ，
chart.setTitle("Chart");
chart.setIcon(getResources().getDrawable(R.drawable.chart));
chart.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MyQuick.this, "Chart selected", Toast.LENGTH_SHORT).show();
}
});
final ActionItem production = new ActionItem();
production.setTitle("Products");
production.setIcon(getResources().getDrawable(R.drawable.production));
production.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MyQuick.this, "Products selected", Toast.LENGTH_SHORT).show();
}
});
Button btn1 = (Button) this.findViewById(R.id.btn1);
//
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// QuickActions
QuickActions qa = new QuickActions(v);
// actionitem
qa.addActionItem(chart);
qa.addActionItem(production);
qa.addActionItem(production);
qa.addActionItem(production);
//
qa.setAnimStyle(QuickActions.ANIM_AUTO);
qa.show();
}
});
final ActionItem dashboard = new ActionItem();
dashboard.setIcon(getResources().getDrawable(R.drawable.dashboard));
dashboard.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MyQuick.this, "dashboard selected", Toast.LENGTH_SHORT).show();
}
});
final ActionItem users = new ActionItem();
users.setIcon(getResources().getDrawable(R.drawable.users));
users.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MyQuick.this, "Products selected", Toast.LENGTH_SHORT).show();
}
});
Button btn2 = (Button) this.findViewById(R.id.btn2);
btn2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
QuickActions qa = new QuickActions(v);
qa.addActionItem(dashboard);
qa.addActionItem(users);
qa.setAnimStyle(QuickActions.ANIM_GROW_FROM_CENTER);
qa.show();
}
});
}
}PopupWindowのスタイルの実現についてお話しします.スタイルコードの1つは次のとおりです.
<style name="Animations.PopDownMenu.Left">
<item name="@android:windowEnterAnimation">@anim/grow_from_topleft_to_bottomright</item>
<item name="@android:windowExitAnimation">@anim/shrink_from_bottomright_to_topleft</item>
</style>2つのitemを書き、それぞれポップアップと消去アニメーションを実現します.紙幅が限られているので(もう長いようです...)、全部貼らない.アニメーションはすべて1つのscaleが1つのalphaをプラスするので、アニメーションの熟知していない友达に対して自分で研究することができて、底から弾き出すアニメーションのファイルgrow_from_bottom.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.3" android:toXScale="1.0"
android:fromYScale="0.3" android:toYScale="1.0"
android:pivotX="50%" android:pivotY="100%"
android:duration="@android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="@android:anim/decelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="@android:integer/config_shortAnimTime"
/>
</set>最後に、実装効果を見てみましょう.
よし、皆さんが好きで問題があったら伝言を残して交流してください.
転載を歓迎して、転載して出典を明記してください!さもないと法律の責任を追及します!http://www.cnblogs.com/noTice520