Android仿淘宝加入购物车布局效果

实现效果：



思路：点击购物车弹出一个PopupWindow，主要弄清楚的是PopupWindow的高度以及透明度，图片的位置，图片下层布局的高度（它的高度比popup的低一些）。PopupWindow的透明度要和Activity弹出弹出框的透明度一样，具体可以参考透明度换算。

PopupWindow的xml代码：

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

<RelativeLayout
android:id="@+id/rlBottom_popShopCart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/mainBlue_color">

<TextView
android:id="@+id/tvReal_popShopCart"
style="@style/RealPriceStyle"
android:layout_marginTop="@dimen/twentyFive_dp"
android:text="￥78" />

<TextView
android:id="@+id/tvStock_popShopCart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tvReal_popShopCart"
android:layout_marginTop="@dimen/ten_dp"
android:text="库存88件"
android:textColor="@color/muchDeep_color"
android:textSize="@dimen/fourteen_size" />

<TextView
android:id="@+id/tvChooseText_popShopCart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tvStock_popShopCart"
android:layout_marginTop="@dimen/ten_dp"
android:text="请选择  尺码  颜色"
android:textColor="@color/muchDeep_color"
android:textSize="@dimen/fourteen_size" />

</RelativeLayout>

<FrameLayout
android:id="@+id/flShow_popShopCart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/join_img_shape">

<ImageView
android:id="@+id/ivShow_popShopCart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/ic_launcher_round"
android:scaleType="fitXY" />

</FrameLayout>
</RelativeLayout>

Activity代码：

public class MapShopDetailActivity extends BaseActivity {

private TextView tvJoinShopCart;
private PopupWindow popupWindow = null;

private RelativeLayout mRlBottom, mRlPop;
private FrameLayout mFlShow;
private TextView mTvReal, mTvStock, mTvChoose;

private RelativeLayout.LayoutParams mFlParams, mRlBottomParams, mRlMainParams;
private RelativeLayout.LayoutParams mTvRealParams, mTvStockParams, mTvChooseParams ;

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

@Override
protected void initView() {
tvJoinShopCart = (TextView) findViewById(R.id.tvJoinShopCart_shopDetail);
tvJoinShopCart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showPop();
}
});
}

private void showPop() {
View contentView = LayoutInflater.from(this).inflate(R.layout.popup_join_shopcart, null);

setPopParams(contentView);

if (popupWindow == null) {
popupWindow = new PopupWindow(contentView, RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT, true);
}

popupWindow.setTouchable(true);
popupWindow.setFocusable(true); //设置点击menu以外其他地方以及返回键退出
popupWindow.setOutsideTouchable(true);   //设置触摸外面时消失
popupWindow.showAtLocation(findViewById(R.id.ll_shopDetail), Gravity.BOTTOM, 0, 0);

//设置Activity透明度为0.6
WindowManager.LayoutParams params = this.getWindow().getAttributes();
params.alpha = 0.6f;
this.getWindow().setAttributes(params);

mRlPop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//                popupWindow.dismiss();
}
});

mFlShow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MapShopDetailActivity.this, "hahahahhahhah", Toast.LENGTH_SHORT).show();

}
});

// PopupWindow消失时将Activity透明度设置为1f
popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {
popupWindow.dismiss();
popupWindow = null;
WindowManager.LayoutParams params = MapShopDetailActivity.this.getWindow().getAttributes();
params.alpha = 1f;
MapShopDetailActivity.this.getWindow().setAttributes(params);
}
});
}

//设置PopupWindow的控件位置
private void setPopParams(View contentView) {
mRlPop = (RelativeLayout) contentView.findViewById(R.id.rl_popupShopCart);
//图片的FrameLayout
mFlShow = (FrameLayout) contentView.findViewById(R.id.flShow_popShopCart);
//除图片之外的布局
mRlBottom = (RelativeLayout) contentView.findViewById(R.id.rlBottom_popShopCart);
//图片右边的文字
mTvReal = (TextView) contentView.findViewById(R.id.tvReal_popShopCart);
mTvStock = (TextView) contentView.findViewById(R.id.tvStock_popShopCart);
mTvChoose = (TextView) contentView.findViewById(R.id.tvChooseText_popShopCart);
//设置图片大小为屏幕宽度的1/4，距左边屏幕15像素，效果就是将图片固定在PopupWindow的左上方
mFlParams = new RelativeLayout.LayoutParams(ScreenUtils.getScreenWidth(this) / 4, ScreenUtils.getScreenWidth(this) / 4);
mFlParams.leftMargin = 15;
//给PopupWindow设置高度，为屏幕高度的3/5+20
mRlMainParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ScreenUtils.getScreenHeight(this) / 5 * 3 + 20);
//下部除图片之外的布局，高度比PopupWindow少40像素，实现图片位置效果
mRlBottomParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ScreenUtils.getScreenHeight(this) / 5 * 3 - 20);
//设置它离顶部40像素，将整体布局下移
mRlBottomParams.topMargin = 40;

mFlShow.setLayoutParams(mFlParams);
mRlBottom.setLayoutParams(mRlBottomParams);
mRlPop.setLayoutParams(mRlMainParams);

//Text的Params，主要是TextView要设置leftMargin为图片宽度+图片左移宽度+图片和文字的距离，我想要20像素，所以设置了ScreenUtils.getScreenWidth(this) / 4 + 30
mTvRealParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
mTvStockParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
mTvChooseParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
mTvRealParams.setMargins(ScreenUtils.getScreenWidth(this) / 4 + 30, 20, 20, 0);
mTvStockParams.setMargins(ScreenUtils.getScreenWidth(this) / 4 + 30, 20, 20, 0);
mTvChooseParams.setMargins(ScreenUtils.getScreenWidth(this) / 4 + 30, 20, 20, 0);
//设置相对布局
mTvStockParams.addRule(RelativeLayout.BELOW,mTvReal.getId());
mTvChooseParams.addRule(RelativeLayout.BELOW,mTvStock.getId());
mTvReal.setLayoutParams(mTvRealParams);
mTvChoose.setLayoutParams(mTvChooseParams);
mTvStock.setLayoutParams(mTvStockParams);
}
}

给自己：要有耐心。

出现问题：突然间图片上部分颜色和Activity的背景颜色不一样了。

解决：Popup的宽高在new PopupWindow时设置，将后来设置的LayoutParams注释掉

`

popupWindow = new PopupWindow(view, ScreenUtils.getScreenWidth(context),ScreenUtils.getScreenHeight(context)/5*3+20);

// mRlPop.setLayoutParams(mRlMainParams);

`