Material DesignシリーズのBehaviorは、パスワード付きのポップアップと商品属性の選択効果を実現します。
今日の効果はアリペイ、タオバオ、京東などの電気商アプリでよく見られます。たとえば宝を支払ってパスワードの弾戸を入力して、ショッピングセンターが注文する時商品の属性を選ぶ時、下から1つのPopupWindowを漂ってきて、それでは今日みんなを連れてBehaviorを使ってこの2つの効果を実現しにきて、結果はあなたはまったく1行のコードだけが必要なことを発見することができます。
今使っているAPPをまとめます。
1.アリペイのポップアップを模倣した入力支払いパスワードウィンドウ。
2.淘宝をまねる/天猫は商品の属性の選択枠を弾きます。
3.トップページの上下スライドはToolBarとNavigationBarを隠すと知っています。
4.…
ブログシリーズ:
1.Material Designシリーズ、BehaviorのBottom Sheet BehaviorとBottom Sheet Dialog
2.Material Designシリーズ、BehaviorのSwipeDisplamissBehavior
3.Material Designシリーズは、Behaviorをカスタマイズして上にスライドしてトップボタンに戻ることを表示します。
4.Material Designシリーズは、BehaviorをカスタマイズしてAndroidのトップページを実現します。
5.Material Designシリーズ、BehaviorをカスタマイズしてすべてのViewをサポートします。
効果のプレビュー
引用文
私の技術グループでBehaviorについて話し合う仲間がいます。私も遊びに行きました。Behaviorに対して一連のブログを書きました。Behaviorを選択して、ctrol+tを選択したら、Behaviorの実現類を発見しました。Bottom Sheet BehaviorはAndroid公式サイトで資料を翻訳しました。
Google/Baiduの検索をお願いします。名前は厳振傑です。ランキング1位は私です。
Bottom Sheet Behaviorはどうやって遊びますか?
これをプレイするには、まずBehaviorがCoordination Layoutの子ViewのLayoutParaamsとして働いていますので、CoordinatoLayoutは絶対に欠かせません。まず全体のレイアウトを明らかにします。
ページを描きましたが、自動的にスイッチが入りますか?どうやってスイッチを入れたり閉じたりするのですか?この商品の本当の姿を見に来ました。Androidの公式アプリを見て、Bottom Sheet Behaviorという商品には静的な方法があります。
これを受け取ったらどう使いますか?
私が見つけたのは、この時点でViewに依存している状態を取得する方法があります。mbottom Sheet Behaviore.getState()は、ソースを見て、その戻り値は以下の通りです。
Bottom Sheet Dialogはどうやって遊びますか?
このような発見もAndroidの公式サイトでBottom Sheet Behaviorを検索して発見したのです。Bottom Sheet Dialogを見て、心が狂喜しました。その後、私が検証しました。その効果は私の予想と同じです。Dialogである以上、普通のDialogと同じです。
その後、私は成り行きnewでBottom Sheet Dialogを作りました。
Bottom Sheet Dialogの神坑
気持ちのあるプログラマーとして、ここで私が踏んだ穴と解決策を皆さんに分かち合いましょう。
このDilaogを開けてから閉じると、Dialog.show()で再度開けられないことが分かりました。なぜですか?
Bottom Sheet Dialogソースコードを読みに行きましたが、下記のコードを発見しました。
ここで疑問があります。
Googleはなぜ、自分たちでBottom Sheet Callbackを設定するインターフェースを提供してくれませんでしたか?
大丈夫です。ソースを見たら簡単です。自分で実現します。そして、ユーザーがスライドしてBottom Sheet Dialogを閉じた後、Bottom Sheet Behaviorの状態をBottom Sheet Behavio.STATE_に設定します。COLLAPSED、つまり半オープン状態です。EXPANDEDは全開です。ソースによって設定方法を提供します。
ソースのダウンロード:http://xiazai.jb51.net/201609/yuanma/AndroidBehavior(jb 51.net)rar
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
今使っているAPPをまとめます。
1.アリペイのポップアップを模倣した入力支払いパスワードウィンドウ。
2.淘宝をまねる/天猫は商品の属性の選択枠を弾きます。
3.トップページの上下スライドはToolBarとNavigationBarを隠すと知っています。
4.…
ブログシリーズ:
1.Material Designシリーズ、BehaviorのBottom Sheet BehaviorとBottom Sheet Dialog
2.Material Designシリーズ、BehaviorのSwipeDisplamissBehavior
3.Material Designシリーズは、Behaviorをカスタマイズして上にスライドしてトップボタンに戻ることを表示します。
4.Material Designシリーズは、BehaviorをカスタマイズしてAndroidのトップページを実現します。
5.Material Designシリーズ、BehaviorをカスタマイズしてすべてのViewをサポートします。
効果のプレビュー
引用文
私の技術グループでBehaviorについて話し合う仲間がいます。私も遊びに行きました。Behaviorに対して一連のブログを書きました。Behaviorを選択して、ctrol+tを選択したら、Behaviorの実現類を発見しました。Bottom Sheet BehaviorはAndroid公式サイトで資料を翻訳しました。
Google/Baiduの検索をお願いします。名前は厳振傑です。ランキング1位は私です。
Bottom Sheet Behaviorはどうやって遊びますか?
これをプレイするには、まずBehaviorがCoordination Layoutの子ViewのLayoutParaamsとして働いていますので、CoordinatoLayoutは絶対に欠かせません。まず全体のレイアウトを明らかにします。
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/tab_layout"
android:gravity="center"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<Button
android:id="@+id/btn_bottom_sheet_control"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="sheet / " />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true"
android:background="@android:color/holo_purple"
app:layout_behavior="@string/bottom_sheet_behavior">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=" " />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
大体紹介します。ページではToolbarとButton:sheetの表示/非表示が見られます。そして、android:id=「@+id/tab_」です。layout「このレイアウトは横になっています。Behavior:ap:layout_を設置しています。behavior=「@string/bottom_」sheet_behavior「テストしたら、tab_をあげないと発見しました。ラyoutはBottom Sheet Behaviorを設定して、それは全ページのトップに浮動して、Toolbarの下にあります。Bottom Sheet Behaviorを設置していますが、それはBottom Sheet Behaviorによって自動的にページの底の外に移動されますので、ページ上ではandroid:id=「@+id/tab_」が見えません。layout「このレイアウトの。ページを描きましたが、自動的にスイッチが入りますか?どうやってスイッチを入れたり閉じたりするのですか?この商品の本当の姿を見に来ました。Androidの公式アプリを見て、Bottom Sheet Behaviorという商品には静的な方法があります。
public static <V extends View> BottomSheetBehavior<V> from(V view) {
ViewGroup.LayoutParams params = view.getLayoutParams();
if (!(params instanceof CoordinatorLayout.LayoutParams)) {
throw new Exception("The view is not a child of CoordinatorLayout");
}
CoordinatorLayout.Behavior behavior = params.getBehavior();
if (!(behavior instanceof BottomSheetBehavior)) {
throw new IllegalArgumentException("...");
}
return (BottomSheetBehavior<V>) behavior;
}
この方法は、このViewがCoordination Layoutの子Viewかどうかをチェックします。このViewのBehaviorを手に入れるために、なぜ最初にBehaviorがCoordinal Layout子ViewのLayoutParaamsとして言ったのか、みなさんも分かります。これを受け取ったらどう使いますか?
private BottomSheetBehavior mBottomSheetBehavior;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.bsbehavior_activity);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
findViewById(R.id.btn_bottom_sheet_control).setOnClickListener(onClickListener);
// tab_layout BottomSheetBehavior
mBottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.tab_layout));
}
findView ById(R.id.btn_bottomsheet_control.set OnClikListener;先ほどお話ししたページのButtonにモニターを設置しました。このボタンでtab_を制御します。layoutの表示と非表示。私が見つけたのは、この時点でViewに依存している状態を取得する方法があります。mbottom Sheet Behaviore.getState()は、ソースを見て、その戻り値は以下の通りです。
/**
* The bottom sheet is dragging.
*/
public static final int STATE_DRAGGING = 1;
/**
* The bottom sheet is settling.
*/
public static final int STATE_SETTLING = 2;
/**
* The bottom sheet is expanded.
*/
public static final int STATE_EXPANDED = 3;
/**
* The bottom sheet is collapsed.
*/
public static final int STATE_COLLAPSED = 4;
/**
* The bottom sheet is hidden.
*/
public static final int STATE_HIDDEN = 5;
STATE_を見たらEXPANDEDとSTATE_COLLAPSEDはその使い方が分かりました。展開と隠蔽ではないですか?この状態を判断します。隠しているなら表示します。表示されているなら隠します。
@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_bottom_sheet_control) {
if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
}
}
ここに来て、知っているようにトップページのBottomの隠蔽と表示はすぐ遊んだことを話して、続いて私達は宝を支払って宝の下のパチンコがどのように実現することを見にきます。Bottom Sheet Dialogはどうやって遊びますか?
このような発見もAndroidの公式サイトでBottom Sheet Behaviorを検索して発見したのです。Bottom Sheet Dialogを見て、心が狂喜しました。その後、私が検証しました。その効果は私の予想と同じです。Dialogである以上、普通のDialogと同じです。
その後、私は成り行きnewでBottom Sheet Dialogを作りました。
private BottomSheetDialog mBottomSheetDialog;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
createBottomSheetDialog();
}
private void createBottomSheetDialog() {
mBottomSheetDialog = new BottomSheetDialog(this);
View view = LayoutInflater.from(this).inflate(R.layout.dialog_bottom_sheet, null, false);
mBottomSheetDialog.setContentView(view);
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
...
recyclerView.setAdapter(adapter);
}
Viewの中にはRecyclerViewがあります。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
そして下のコードで表示と非表示を制御します。
if (mBottomSheetDialog.isShowing()) {
mBottomSheetDialog.dismiss();
} else {
mBottomSheetDialog.show();
}
このDialog Showが出てきた時に、半分ぐらい表示されました。この効果は確かにいいです。このようにして、私達が最初に言ったAlipayパスワードの弾戸と淘宝/天猫商品の属性の選択に達しました。私達がスライドする時に下に内容があればEXPANDEDは普通のView(RecyclerView、NestedScrrollView)では上に進みません。下の内容は引き続き出ますが、下にスライドして隠してもいいです。disysとcloseをオフにしてもいいです。Bottom Sheet Dialogの神坑
気持ちのあるプログラマーとして、ここで私が踏んだ穴と解決策を皆さんに分かち合いましょう。
このDilaogを開けてから閉じると、Dialog.show()で再度開けられないことが分かりました。なぜですか?
Bottom Sheet Dialogソースコードを読みに行きましたが、下記のコードを発見しました。
@Override
public void setContentView(View view, ViewGroup.LayoutParams params) {
super.setContentView(wrapInBottomSheet(0, view, params));
}
private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
final CoordinatorLayout coordinator = View.inflate(getContext(),R.layout...., null);
FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);
BottomSheetBehavior.from(bottomSheet).setBottomSheetCallback(mBottomSheetCallback);
...
return coordinator;
}
private BottomSheetCallback mBottomSheetCallback = new BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
dismiss();
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
};
つまり、システムのBottom Sheet DialogはBottom Sheet Behaviorパッケージに基づいています。ここでは、私達がスライドしてBottom Sheet BehaviorのViewを隠すと、内部にBottom Sheet Behaviorを設置した状態がSTATE_であると判断しました。HIDDENは、次に私たちのためにDialogをオフにしました。だから、私たちは再びdialog.show()を呼び出した時、Dialogはこの状態でHIDEのdialogを開くことができませんでした。ここで疑問があります。
Googleはなぜ、自分たちでBottom Sheet Callbackを設定するインターフェースを提供してくれませんでしたか?
大丈夫です。ソースを見たら簡単です。自分で実現します。そして、ユーザーがスライドしてBottom Sheet Dialogを閉じた後、Bottom Sheet Behaviorの状態をBottom Sheet Behavio.STATE_に設定します。COLLAPSED、つまり半オープン状態です。EXPANDEDは全開です。ソースによって設定方法を提供します。
private void setBehaviorCallback() {
View view = mBottomSheetDialog.getDelegate().findViewById(android.support.design.R.id.design_bottom_sheet);
final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(view);
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
mBottomSheetDialog.dismiss();
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
});
}
このようにして、Bottom Sheet Dialogが閉じた後に再び開くことができない問題を解決しました。ソースのダウンロード:http://xiazai.jb51.net/201609/yuanma/AndroidBehavior(jb 51.net)rar
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。