我正在将 iOS 应用程序复制到 Android 中。该应用程序有一个带有信用卡动画的“钱包”屏幕,请参见下面的 iOS 应用程序视频。如何在 Android 中实现类似的功能?
这是 iOS 钱包的视频 -> Wallet iOS demo
我需要复制这些功能:
- 选择卡片时带有动画的 ListView (当您单击卡片时,它会与新卡片切换位置)
- 点击主卡(大的)会产生弹跳动画并转到卡的详细信息。
- 在主卡上向左滑动也可以进入卡的详细信息。
这是 iOS 中用于使其工作的库是 GLStackedViewController .
Best Answer-推荐答案 strong>
我最终从头开始制作,不需要库并使用常规 ListView。
在包含所有卡片的 cardHolder fragment 中,当单击第一项(0)时,卡片会弹跳,然后转到详细 fragment ,当单击不是第一个的其他项时,只需更改 ListView 顺序并更新适配器,这里缺少的一件事是点击之间的卡片动画,仍然是 WIP。
// Click event for single list row
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
final int position, long id) {
Log.d(TAG, "osition: " + position);
final FragmentAccount fragment = new FragmentAccount();
// Fisrt card
if (position == 0) {
// Animated bounce effect
Animation anim = AnimationUtils.loadAnimation(view.getContext(), R.anim.expand_in);
view.startAnimation(anim);
// delay click event (anim duration) and go to new fragment
new Handler().postDelayed(new Runnable() {
public void run() {
if (listBalance.get(position).get(TAG_ACCOUNT_BANKACCOUNTS_ID) != null) {
((GlobalVars) getActivity().getApplication()).setIdBankAccount(Integer.valueOf(listBalance.get(position).get(TAG_ACCOUNT_BANKACCOUNTS_ID)));
((GlobalVars) getActivity().getApplication()).setIdGiftCard(0);
((GlobalVars) getActivity().getApplication()).setCardBalance("");
} else if (listBalance.get(position).get(TAG_ACCOUNT_GIFTCARDS_ID) != null) {
((GlobalVars) getActivity().getApplication()).setIdBankAccount(0);
((GlobalVars) getActivity().getApplication()).setIdGiftCard(Integer.valueOf(listBalance.get(position).get(TAG_ACCOUNT_GIFTCARDS_ID)));
((GlobalVars) getActivity().getApplication()).setCardBalance(listBalance.get(position).get(TAG_ACCOUNT_GIFTCARDS_BALANCE));
} else {
((GlobalVars) getActivity().getApplication()).setIdBankAccount(0);
((GlobalVars) getActivity().getApplication()).setIdGiftCard(0);
((GlobalVars) getActivity().getApplication()).setCardBalance(listBalance.get(position).get(TAG_ACCOUNT_X111_BALANCE));
}
((BaseContainerFragment) getParentFragment()).replaceFragment(fragment, true);
}
}, anim.getDuration());
}
// Item is not the first, so trade places with first one
else {
HashMap<String, String> tmp = listBalance.get(0);
Log.d(TAG, tmp.toString());
listBalance.set(0, listBalance.get(position));
listBalance.set(position, tmp);
adapter.notifyDataSetChanged();
updateAdapter();
}
}
});
弹跳动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="50"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.1"
android:toYScale="1.1" />
<scale
android:duration="50"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="50"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
适配器
public View getView(final int position, View convertView, ViewGroup parent) {
vi = convertView;
if (layout == "account") {
if (convertView == null) {
vi = inflater.inflate(R.layout.activity_account_list_item, null);
}
TextView transaction_name = (TextView) vi.findViewById(R.id.account_name);
TextView transaction_address = (TextView) vi.findViewById(R.id.account_address);
TextView transaction_date = (TextView) vi.findViewById(R.id.account_date);
ImageView transaction_icon = (ImageView) vi.findViewById(R.id.account_image);
HashMap<String, String> transactions = new HashMap<String, String>();
transactions = data.get(position);
// Setting all values in listview
transaction_name.setText(transactions.get(FragmentCardBalance.TAG_ACCOUNT_TRANSACTIONS_NAME));
transaction_address.setText(transactions.get(FragmentCardBalance.TAG_ACCOUNT_TRANSACTIONS_ADDRESS));
transaction_date.setText(transactions.get(FragmentCardBalance.TAG_ACCOUNT_TRANSACTIONS_DATE));
imageLoader.DisplayImage(transactions.get(FragmentCardBalance.TAG_ACCOUNT_TRANSACTIONS_ICON), transaction_icon);
}
else if (layout == "balance") {
String[] color = { "56a77a","568fa7" ,"f8d243", "8fb63c", "114783", "e1ac47", "58ACFA", "819FF7", "5858FA",
"AC58FA", "FE9A2E", "FA5858", "FA5882"};
//Log.d("COLOR", "Color: " + color[position] + " | Position: " +position);
if (convertView == null && position == 0) {
vi = inflater.inflate(R.layout.activity_cardholder_list_item_first, null);
TextView saldo = (TextView) vi.findViewById(R.id.tvSaldo);
TextView balance_idBankAccount = (TextView) vi.findViewById(R.id.idBankAccount);
TextView balance_idGiftCard = (TextView) vi.findViewById(R.id.idGiftCard);
TextView balance_amount = (TextView) vi.findViewById(R.id.tvAmount);
TextView balance_cardNumber = (TextView) vi.findViewById(R.id.tvCardNumber);
TextView balance_expDate = (TextView) vi.findViewById(R.id.tvExpDate);
ImageView balance_foto = (ImageView) vi.findViewById(R.id.ivLogo);
LinearLayout background = (LinearLayout) vi.findViewById(R.id.background);
GradientDrawable bgShape = (GradientDrawable)background.getBackground();
HashMap<String, String> balance = new HashMap<String, String>();
balance = data.get(position);
// Setting all values in listview
balance_idBankAccount.setText(balance.get(FragmentCardHolder.TAG_ACCOUNT_BANKACCOUNTS_ID));
balance_idGiftCard.setText(balance.get(FragmentCardHolder.TAG_ACCOUNT_GIFTCARDS_ID));
if(balance.get(FragmentCardHolder.TAG_ACCOUNT_X111_BALANCE) == null){
if(balance.get(FragmentCardHolder.TAG_ACCOUNT_BANKACCOUNTS_TYPE).equals("1")){
balance_amount.setText("CREDITO");
} else {
balance_amount.setText("DEBITO");
}
String card = balance.get(FragmentCardHolder.TAG_ACCOUNT_BANKACCOUNTS_CARDNUMBER);
card = "**** **** **** " + card.substring(card.length() - 4, card.length());
balance_cardNumber.setText(card);
if (saldo != null) {
saldo.setText("");
}
} else {
balance_amount.setText("$ " + balance.get(FragmentCardHolder.TAG_ACCOUNT_X111_BALANCE));
balance_expDate.setText("");
balance_cardNumber.setText("");
}
imageLoader.DisplayImage(balance.get(FragmentCardHolder.TAG_ACCOUNT_BANKACCOUNTS_FOTO), balance_foto);
bgShape.setColor(Color.GREEN);
if(color != null){
bgShape.setColor(Integer.parseInt(color[position], 16) + 0xFF000000);
}
}
// set layout for the next items
else if (convertView == null && position != 0) {
vi = inflater.inflate(R.layout.activity_cardholder_list_item, null);
TextView saldo = (TextView) vi.findViewById(R.id.tvSaldo);
TextView balance_idBankAccount = (TextView) vi.findViewById(R.id.idBankAccount);
TextView balance_idGiftCard = (TextView) vi.findViewById(R.id.idGiftCard);
TextView balance_amount = (TextView) vi.findViewById(R.id.tvAmount);
ImageView balance_foto = (ImageView) vi.findViewById(R.id.ivLogo);
LinearLayout background = (LinearLayout) vi.findViewById(R.id.background);
GradientDrawable bgShape = (GradientDrawable)background.getBackground();
HashMap<String, String> balance = new HashMap<String, String>();
balance = data.get(position);
// Setting all values in listview
balance_idBankAccount.setText(balance.get(FragmentCardHolder.TAG_ACCOUNT_BANKACCOUNTS_ID));
balance_idGiftCard.setText(balance.get(FragmentCardHolder.TAG_ACCOUNT_GIFTCARDS_ID));
if(balance.get(FragmentCardHolder.TAG_ACCOUNT_X111_BALANCE) == null){
if(balance.get(FragmentCardHolder.TAG_ACCOUNT_BANKACCOUNTS_TYPE).equals("1")){
balance_amount.setText("CREDITO");
} else {
balance_amount.setText("DEBITO");
}
saldo.setText("");
} else {
balance_amount.setText("$ " + balance.get(FragmentCardHolder.TAG_ACCOUNT_X111_BALANCE));
}
imageLoader.DisplayImage(balance.get(FragmentCardHolder.TAG_ACCOUNT_BANKACCOUNTS_FOTO), balance_foto);
if(color[position] != null){
bgShape.setColor(Integer.parseInt(color[position], 16) + 0xFF000000);
}
}
}
}
关于android - 将 iOS Controller 复制到 Android 中,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/33426118/
|